FB OpenGraph og : 이미지가 이미지를 가져 오지 않음 (아마 https?)


301

첫째- 이것이 중복 문제라고 생각 하지 않습니다 . 나는 SO에서 동일하거나 유사한 문제를 광범위하게 검색했으며 묻기 전에 문제 해결의 특성으로 인해이 문제는 독특하다고 생각합니다.

Facebook은 내 og:image파일을 파악할 수 없으며 모든 일반적인 솔루션을 시도했습니다. 나는 그것과 관련이 있다고 생각하기 시작했습니다.https://...

  • http://developers.facebook.com/tools/debug를 확인 했으며 경고 또는 오류가 없습니다.
  • " og:image" 에서 연결 한 이미지를 찾고 있지만 비어 있습니다. 그러나 이미지를 클릭하면 DO가 존재하고 곧바로 나타납니다.
  • 그것은 비 -https 서버에서 호스팅되는 이미지를 보여줍니다.
  • 우리는 정사각형 이미지, jpeg, png, 더 큰 크기 및 더 작은 크기를 시도했습니다. 이미지를 public_html에 넣었습니다. 제로가 나타납니다.
  • 캐싱 오류는 아닙니다. og:image메타 에 다른 것을 추가 할 때 FB의 린터가이를 찾아서 읽기 때문입니다. 미리보기가 표시됩니다. 미리보기가 비어 있습니다. 단지 우리가 얻고 예외는이 웹 사이트에없는 이미지입니다.
  • 우리는 아마도 안티-리치 (anti-leach)가 cpanel있거나 .htaccess이미지가 표시되는 것을 방해 한다고 생각 했기 때문에 확인했습니다. 그곳 엔 없었다. 우리 < img src="[remote file]" >는 완전히 다른 서버 에서 빠르게 작업 했으며 이미지가 잘 나타납니다.
  • og:type다른 메타 태그와는 다른 것이 아닐까 생각했습니다 . 한 번에 하나씩 모두 제거하고 확인했습니다. 변경 없음. 경고 만.
  • 다른 웹 사이트의 동일한 코드가 문제없이 나타납니다.
  • 우리는 생각 어쩌면 우리가 여러 제품에 대해 동일한 제품 페이지 (들)을 사용하고 있기 때문에 이미지를 당겨되지 않았다 (는 GET 값에 따라 변화를, 즉, "details.php? ID = XXX")하지만 여전히 하나에 당기는 이미지 (다른 URL에서).
  • 어떤 떠나 og:image거나 image_src을 끈 것은, FB는 이미지를 찾을 수 없습니다.

나는 밧줄의 끝에있다. 내가 나와 다른 사람들이 이것에 얼마나 많은 시간을 썼는지 말하면 충격을받을 것입니다. 문제는 이것이 온라인 상점이라는 것입니다. 우리는 절대적으로 이미지를 가질 수 없습니다. 우리는해야합니다. 우리는 10 개 정도의 다른 사이트를 가지고 있습니다. 이것은 og:image문제 가있는 유일한 사이트 입니다. 또한 유일한 제품 https이므로 문제 일 수 있다고 생각했습니다. 그러나 우리는 웹상의 어느 곳에서도 그 선례를 찾을 수 없습니다.

메타 태그는 다음과 같습니다.

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

원하는 경우 여기에 작업중인 제품 페이지 중 하나에 대한 링크가 있습니다. [이 사이트에 대한 검색 결과를 얻기 위해 링크를 단축했습니다] : http://rockn.ro/114

편집하다 ----

"페이스 북에 표시되는 내용보기"스크레이퍼 도구를 사용하여 다음을 확인할 수있었습니다.

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

단일 페이지에서 찾은 모든 링크를 테스트했습니다. 모두 완벽하게 유효한 이미지였습니다.

편집 2 ----

테스트를 시도 하고 NONSECURE 웹 사이트에 서브 도메인 을 추가했습니다 (노트북을 통해 이미지를 실제로 볼 수 있음). 하위 도메인은 http : // img. [nonsecuresite] .com입니다. 그런 다음 모든 이미지를 기본 하위 도메인 폴더에 넣고 참조했습니다. 해당 이미지를 FB로 가져 오지 않습니다. 그러나 여전히 비보안 주 도메인에서 참조 된 이미지를 가져옵니다.

게시 된 해결 방법 ----

Keegan 덕분에 우리는 이것이 Facebook의 버그라는 것을 알고 있습니다. 이 문제를 해결하기 위해 하위 도메인을 다른 NON-HTTPS 웹 사이트에 배치하고 모든 이미지를 덤프했습니다. 각 제품 페이지 http://img.otherdomain.com/[like-image.jpg]에서 조정 이미지를 og:image참조했습니다. 그런 다음 FB Linter를 통해 OG 데이터를 새로 고치기 위해 모든 링크를 실행해야했습니다. 이것은 효과가 있었지만 해결책은 반창고 해결 방법이며 https문제가 해결되어 자연적인 https 도메인을 다시 사용하면 FB가 다른 웹 사이트의 이미지를 캐시하여 문제를 복잡하게 만듭니다. 이 정보가 다른 사람이 자신의 32 코딩 시간을 잃지 않도록 도와 줄 수 있기를 바랍니다 .


27
잘 문서화 된 질문. 당신을 위해 그것을 upvoted!
DMCS

문제 해결을 위해 og:type: og_products:product웹 사이트 유형을 변경 하고 이미지를 가져올 수 있는지 확인하십시오.
DMCS

2
육즙, 우리는 http가 아닌 외부 사이트에서 참조 된 og : 이미지를 가지고 있으며 표시됩니다.
키프로스 106

1
안녕하세요, 고마워요. 일단 작동이 시작되면 https-urls로 돌아 가면 캐시를 업데이트해야한다고 걱정하는 것에 대한 약간의 언급 : fb 캐시가 일정 시간 후에 릴리스되므로 걱정하지 않아도됩니다. 하루나 이틀이면 캐시는 새로운 URL을 사용하여 자동으로 해제됩니다.
Niclas Lindqvist

1
@NiclasLindqvist 이봐, 단지 기록을 위해, 우리는 오래된 이미지를 한 달 전과 몇 달 전에 캐시에 보관 했으므로 FB의 캐시 표준을 소금 한 알로 가져갈 것입니다.
키프로스 106

답변:


93

같은 문제가 발생하여 Facebook 개발자 사이트의 버그로보고했습니다. og:imageHTTP를 사용 하는 URI는 제대로 작동하고 HTTPS를 사용 하는 URI는 제대로 작동하지 않는 것이 분명합니다 . 그들은 이제 "이것을보고있다"고 인정했다.

업데이트 : 2020 년 현재 버그는 Facebook 티켓 시스템에서 더 이상 보이지 않습니다. 그들은 응답하지 않았으며이 행동이 바뀌 었다고 생각하지 않습니다. 그러나 HTTPS URI를 지정 og:image:secure하면 제대로 작동하는 것 같습니다.


3
KEEGAN! 감사합니다! 우리가 HTTPS 문제를 버그로 문서화 한 것은 이번이 처음입니다. ..... 우리는 열심히 보았습니다. 질문 의견에 해결 방법을 게시합니다.
사이프러스 106

2
2013 년 8 월 현재 해당 URL에 버그가 표시되지 않습니다. 그것에 대한 업데이트가 있었습니까?
Andreas Andreou 2013 년

3
developers.facebook.com/bugs/256470807842897 이 최신 버그도 관련이 있습니다. 질문에 대한 답변이 있지만 여기에 링크를 추가하여 비슷한 문제가있는 다른 사람이 여기에 있으면 링크를 추가 할 것이라고 생각했습니다.
Zoidberg

4
문제가 2014 년 3 월 18 일에 해결되었다고 말합니다.
Mike Flynn

1
@MattBrowne 아니오, 그것은 고정되어 있지 않습니다 :-(
starbeamrainbowlabs

131

일부 속성에는 추가 메타 데이터가 첨부 될 수 있습니다. 이것들은 propertyand와 다른 메타 데이터와 같은 방식으로 지정 content되지만 property추가는 다음과 같습니다.

og:image속성에는 선택적 구조적 속성이 있습니다.

  • og:image:url -og : image와 동일합니다.
  • og:image:secure_url -웹 페이지에 HTTPS가 필요한 경우 사용할 대체 URL입니다.
  • og:image:type -이 이미지의 MIME 유형입니다.
  • og:image:width -픽셀 수입니다.
  • og:image:height -높은 픽셀 수입니다.

전체 이미지 예 :

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

따라서 og:imageHTTPS URL의 속성을 다음 으로 변경해야 합니다.og:image:secure_url

전의:

이미지의 HTTPS 메타 태그 :

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

이미지의 HTTP 메타 태그 :

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

출처 : http://ogp.me/#structured <-자세한 내용은이 사이트를 방문하십시오.

이것이 도움이되기를 바랍니다.

편집 : 코드를 업데이트 한 후 페이스 북 서버를 핑하는 것을 잊지 마십시오 -URL Linter


1
감사합니다. 이미지에 대한 추가 메타 데이터가 있는지 몰랐습니다! image : secure_url 자체를 시도했지만 FB에서 오류가 발생했습니다. 우리는 image & secure_url *을 여러 가지 방법으로 시도했지만 linter는 아무런 변화가 없었습니다.
키프로스 106

나를 위해 메타 태그 이미지가 아닌 미리보기 이미지가 계속 표시됩니다. 나는 확실히 올바른 URL을 가지고 있습니다! :( 아이디어?
jaminroe 21:09에

1
@jaminroe 보풀이 났습니까? 보푸라기가 없다면. 대부분 문제를 해결해야합니다. 그래도 선택하지 않으면 도구가 긁을 수있는 것을보고 정확히 긁힌 것을 볼 수 있습니다. 결과 끝에 See exactly what our scraper sees for your URL클릭 하면 링크가 있으며 링크의 전체 소스 또는 스트립을 표시하는지 확인하십시오 아무것도. 잘못 charset설정하면 스크레이퍼가 어떤 이유로 긁어 낼 수 없습니다 (이 문제로 언젠가 비슷한 질문에 대답했습니다). 따라서이 모든 것이 올바른지 확인하십시오.
Syed IR

3
og : image URL은 이미지가 서비스 (/ foo / bar)에 의해 생성되므로 파일 확장자가 없습니다. 이 답변은 아마도 og : type = "image / png"로 인한 Facebook linter 문제를 해결했습니다. 감사합니다!!
Dunc

3
@JohnWasham og:image태그는 HTTPS 일 수 있습니다 (StackExchange, YouTube, WordPress.com, Amazon 등). 그것은 당신 og:image:secure_url이 정말로 무엇인지 궁금하게 만듭니다 ?
DocRoot

16

페이스 북 디버거 가 올바른 이미지를 표시 og:image하더라도 나와 함께 있지만 작동하지 않고 내 사이트 로고를 선택 하면 알 수 없습니다 .

그러나 나를 og:image위해 og:image:url일하기로 변경 했습니다. 이것이 다른 사람이 비슷한 문제에 직면하는 데 도움이되기를 바랍니다.


건배-나를 위해 일했지만 페이스 북 디버거도 이미지를 원하므로 둘 다 보냅니다. og : image와 og : image :
url-

1
og : image : url이 구문을 인식합니까, 아니면 구문이 잘못 되었습니까? 즉, 메타 태그가 전혀없는 것과 동일합니까?
Jonathan Tonge

행 @JonathanTonge accoding의 ogp.me은 " og:image:url동일하다 og:image".
DocRoot

9

구글에서 왔지만 이것은별로 도움이되지 않았습니다. 로고에는 3 : 1의 최소 종횡비가 필요하다는 것이 밝혀졌습니다. 광산은 거의 4 : 1이었습니다. Gimp를 사용하여 정확하게 3 : 1로 자르고 짜잔으로 내 로고가 FB에 표시됩니다.


2
3:50

1
페이스 북 디버거에 따르면, 크기 요구 사항은 이제 200px x 200px
braX

8

tl; dr – 인내심

https 사이트에서 빈 이미지가 제공되는 것을보고 있었기 때문에 여기까지 왔습니다. 그래도 문제는 상당히 달랐습니다.

콘텐츠가 처음으로 공유되면 Facebook 크롤러는 공유 된 URL에서 메타 데이터를 긁어 캐시합니다. 크롤러는 이미지를 렌더링하기 전에 한 번 이상 이미지를보아야합니다. 즉, 컨텐츠를 공유하는 첫 번째 사람에게는 렌더링 된 이미지가 표시되지 않습니다.

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

테스트하는 동안 렌더링 된 이미지를 표시하는 데 약 10 분 동안 페이스 북 이 소요 되었습니다. 그래서 머리를 긁고 페이스 북에서 임의의 og 태그를 던지는 동안 (그리고 여기에 언급 된 https 문제가 의심되는 동안) 기다려야했습니다.

이렇게하면 사람들이 처음으로 링크를 공유하지 못하게 될 수 있으므로 FB는이 동작을 피할 수있는 두 가지 방법을 제안합니다. ) : og : image : width 및 og : image : height를 지정하십시오. (위의 링크에서 자세한 내용을 읽으십시오)

왜 그렇게 오래 걸리는지 궁금합니다 ...


그 이유는 이미지 비율입니다. 화상 치수 비가 정확히 1.91 없으면 1 및 / 또는 og:image:widthog:image:height데이터 I 불포함하고 한국어는 그들의 크기에 맞도록 폐기 후 이미지를 처리 할 것이다. 이미지도 잘려서 원하지 않을 수 있습니다. 자세한 내용은 다음을 참조하십시오 developers.facebook.com/docs/sharing/best-practices/#images
Slicktrick

1
한정된 해상도의 매우 짧은 목록에없는 이미지에 대해 og : image : width 및 og : image : height를 지정하면 테스트 속도가 빨라지지 않습니다.
Chris Moschini가

5

나는 같은 오류가 있었고 이전의 아무것도 도움이되지 않았기 때문에 Open Graph Protocol 의 원본 문서를 따르려고 시도하고 HTML 태그에 접두사 속성을 추가했으며 모든 것이 멋지게되었습니다.

<html prefix="og: http://ogp.me/ns#">

2

비슷한 문제가있었습니다. property = "og : image : secure_url"을 제거했으며 이제 og : image 만 사용하여 제거합니다. 때때로, 더 적은


1
답은 훨씬 더 많은 표를 가져야합니다! https를 통해서만 콘텐츠를 제공하는 경우 og : image : url을 사용하고 완료하면됩니다.
marcvangend

1
이것이 왜 해결책인지 이해할 수 없습니다. 질문은 분명히 secure_url이 처음에 없었습니다. 왜 그것이 효과가 있다고 생각합니까, 너무 임의적입니다
Decebal

1

이 문제를 일으킬 수있는 다른 시나리오를 발견했습니다. 나는 질문과 대답에 설명 된 모든 단계를 거쳤지만 여전히 문제는 남아 있습니다.

내 이미지를 확인한 결과 내 게시물 중 일부가 수천 픽셀과 수 메가 바이트 범위의 너무 큰 썸네일 이미지를 가지고 있음을 발견했습니다 .og:image

이것은 최근 WP에서 Jekyll로 마이그레이션했기 때문에 발생했습니다. 이미지를 꿀꺽 꿀꺽 최적화했지만 실수로 og : image의 원본 이미지를 사용했습니다.

Facebook은 오늘 현재 다음과 같은 권장 사항을 제공합니다 .

고해상도 장치에서 최상의 디스플레이를 위해 1200 x 630 픽셀 이상의 이미지를 사용하십시오. 최소한 600 x 315 픽셀 인 이미지를 사용하여 더 큰 이미지가있는 링크 페이지 게시물을 표시해야합니다. 이미지 크기는 최대 8MB입니다.

따라서 8MB의 상한이 있습니다.


1

실수로 찾은 것처럼 투명한 빈 이미지에는 문제의 가능한 원인을 나타내는 응답 헤더가 있습니다.

  1. https://developers.facebook.com/tools/debug/og/object/ 에서 디버거로 이동 하십시오.
  2. 당신의 URL을 넣어
  3. 하단의 페이스 북에는 "이미지"(투명 1x1 GIF)가 표시됩니다
    1. 이미지가 원본 이미지와 연결되어 있습니다.
    2. 오른쪽을 누르고 이미지를 봅니다 (와 같은 것을 얻습니다 https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. Firebug / 개발자 도구에서 Net 탭을 켜고 필요한 경우 페이지를 새로 고칩니다.
  5. 당신은 x-error-detail설명과 함께 응답 헤더를 얻을 것이다

예를 들어 제 경우에는 Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

내 경우의 실제 문제는 prerender.io 와 관련이 있습니다. 있습니다.

결과적으로 프리 렌더링을 통해 이미지를 요청하면 HTML로 변환됩니다. 이 같은:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

프리 렌더 자체의 버그이거나 프리 렌더를 사용하지 않도록 프록시에서 구성되어 있어야합니다. *.jpg (Facebook 봇이 요청한 경우에도) 요청에 .

프리 렌더는 특정 사용자 에이전트 헤더에서만 사용되므로 이것을 알아 채기가 매우 어렵습니다.


1

나는 같은 문제에 부딪 쳤고 다른 도메인을 가지고 있음을 알았습니다. og:url

도메인이 동일 og:url하고og:image 는했다.

도움이 되었기를 바랍니다.


2
og : image가 클라우드 프론트 CDN URL 일 수 있기 때문에 항상 가능하지는 않습니다. 또한 필자의 경우 FB (2017 년)는 페이지 자체에서 CDN 이미지를 선택하지 않지만 Cloudfront 인 다른 CDN 이미지를 선택하므로 내 og : url도 아닙니다. 그래서 당신의 요점은 정확하지 않습니다.
PKHunter

사실입니다. CDN URL을 사용하지 않았습니다. 나는 방금 나를 위해 일한 것을 나눌 것이라고 생각했다.
대런 홀


1

사이트의 https 인증서가 완전히 호환되지 않는 경우 유사한 증상 (Facebook 등이 https를 통해 og : image 및 기타 자산을 올바르게 가져 오지 않음)이 발생할 수 있습니다.

사이트의 https 인증서가 유효 해 보일 수 있지만 (브라우저 및 모두의 녹색 키) 중간 또는 체인 인증서가없는 경우 올바르게 긁히지 않습니다. 이로 인해 다양한 캐시 및 메타 태그를 모두 확인하고 다시 확인하는 데 많은 시간이 낭비 될 수 있습니다.

문제가되지 않았을 수도 있지만 비슷한 증상 (예 : 내 것과 같은)이있는 다른 것일 수도 있습니다. 인증서를 확인하는 방법에는 여러 가지가 있습니다. https://www.sslshopper.com/ssl-checker.html


1

나는 http://내 것을 꺼내서 og:image평범한 오래된 것으로 바꿨다.www. 바꾼 다음 잘 작동하기 시작했습니다.

Facebook에서이 도구 를 사용 하여 이미지 스크랩 캐시를 재설정하고 데모 이미지로 가져 오는 URL을 테스트 할 수 있습니다.


0

디버거가 4 개의 태그를 검색 하고 있음을 알 수 있습니다og:image URL에서 를 .

첫 번째 이미지가 가장 크므로로드하는 데 가장 오래 걸립니다. 첫 번째 이미지를 축소하거나 작은 이미지를 먼저 표시하도록 순서를 변경하십시오.


고마워요! 우리는 실제로 처음으로 약 200x200의 작은 정사각형 이미지를 오랫동안 가지고있었습니다. 우리는 여러 번 다시 정리하고 긁었습니다. 또한 작거나 큰 이미지 또는 대체 이미지를 유일한 이미지로 만들고 성공률이 0 인 스크랩 핑을 조합했습니다.
키프로스 106

0

또한이 문제는 og : image를 사용하지 않는 사용자 생성 스토리를 추가 할 때도 발생합니다. 예를 들면 다음과 같습니다.

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

위의 내용은 http가 아닌 https에서만 작동합니다. https를 사용하면 첨부 된 이미지 ()를 업로드하지 못했습니다라는 오류가 표시됩니다.


사랑은, 구글은 여전히 (실수, 아마도,하지만 여전히 죄) 웹 사이트를 처벌 그 값들이 방문자의 보안이 질문에, FB의 요청 이후에 https 사이트, 2 년에 사이트에게 더 많은 관련성을주는쪽으로 이동
Cyprus106


0

오늘 비슷한 문제가 있었는데 공유 디버거 가 해결하는 데 도움이되었습니다. Facebook은 현재 XMP 메타 데이터가 포함 된 이미지를 (현재) 이해할 수없는 것 같습니다. 기사의 이미지를 XMP 메타 데이터가없는 버전으로 바꾸고 공유 디버거를 사용하여 페이지를 다시 스크랩하면 문제가 사라졌습니다. 16 진 편집기를 사용하면 이미지에 XMP 메타 데이터가 포함되어 있는지 확인할 수 있습니다.


0

제 경우에는 크롤러에 버그가있는 것 같습니다. 난 노력 했어:

  • http로만 링크 변경
  • 끝 공백 제거
  • http로 완전히 전환
  • 웹 사이트 재설치
  • 여러 OG 플러그인 설치 (WordPress 사용)
  • 서버에서 봇을 차단하는 이상한 구성 오류가 의심되는 경우 (모든 OG 검사기가 태그를 가져올 수없고 내 사이트에 대한 다른 요청이 불안정하기 때문에)

이 중 어느 것도 작동하지 않습니다. 일주일이 걸렸습니다. 갑자기 갑자기 아무 일도 일어나지 않는 것 같습니다.

누군가 가이 문제를 다시 만나면 내 연구는 다음과 같습니다.

또한, 이외의 더 체커가 페이스 북의 개체 디버거 는 확인을 위해 : OpenGraphCheck.com는 , 앱 히니 토레의 오픈 그래프 테스터 , Iframely의 삽입 코드 , 카드 검사기 | 트위터 개발자 .


0

좋아 ...이 스레드는 오래되고 혼잡하다는 것을 알고 있지만 Facebook에서 제대로 작동하기 위해 og : image 태그를 얻는 데 어려움을 겪고있는 사람이 오는 경우 여기에 나에게 유용한 트릭이 있습니다.

이 링크를 사용하지 마십시오 :

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

문제를 해결하기 위해. 또는 할 경우 즉시 맨 아래로 스크롤하여 Scrape VIA API를 클릭하십시오.

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

"디버그"도구에는 표시되지 않는 오류가 탐색기 도구에 표시됩니다. 미치게 하는!!! (필자의 경우 이미지 파일 이름의 공백이 디버그 도구에서 자동으로 이미지를 녹아웃했지만 탐색기 도구에서 오류를 표시했습니다).


0

og 이미지가 FB 카드에 표시되지 않는 또 다른 이유가 있습니다. 또한 FB 스크레이퍼 도구를 사용하여 og meta tags를 디버깅하면 WordPress 페이지에있는 모든 필요한 태그를 확인할 수 있지만 다음 파일 다운로드 오류가 발생합니다.

제공된 og : image, <https-link-to-jpg-image>를 다운로드 할 수 없습니다. 지원되지 않는 컨텐츠 인코딩을 사용하는 서버와 같은 여러 가지 이유로 인해 발생할 수 있습니다. 크롤러는 수축 및 gzip 콘텐츠 인코딩을 허용합니다.

이미지 형식에 문제가 있다고 생각하는 모호한 느낌이 들었습니다. 이미지 링크가 작동했지만 메시지가 내용 인코딩에 문제가 있음을 나타내는 것 같습니다.

많은 검색을 마친 후에 WordPress 서버에 필요한 php 확장을 보았고 pho-exif 모듈이 설치되지 않았다는 것을 깨달았습니다. exif 모듈은 exif 메타 데이터를 작성 합니다 업로드 된 모든 이미지에 를 . 결과적으로 FB og 이미지 태그에 사용 된 이미지에는 이와 관련된 exif 메타 데이터가 없었습니다.

exif 모듈이 활성화되면 WordPress에서는 이미지 (예 : 미디어 라이브러리-> 선택 및 이미지-> 자세한 정보 편집-> exif 메타 데이터 매핑)에 대해 exif 메타 데이터를 재설정 할 수 있으며 이미지가 예상대로 FB 카드에 나타납니다.


-1

내가 관찰 한 바에 따르면 귀하의 웹 사이트가 공개 될 때 이미지 URL이 https 일지라도 잘 작동합니다.


-1

나를 위해 이것은 효과가 있었다 :

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

-2

몇 시간 동안 테스트하고 시도한 후 ...

이 문제를 가능한 한 간단하게 해결했습니다. Facebook 개발자 페이지에서 "og"태그와이 og 태그를 참조하는 body 태그의 일부 텍스트 만 포함하는 "테스트 페이지"를 사용하고 있습니다.

그래서 내가 무엇을 했습니까?

응용 프로그램에서 사용하는 것과 동일한 내용을 포함하는 두 번째보기를 만들었습니다.

그리고 내 페이지에 액세스하는 Facebook이보기를 어떻게 변경할 수 있는지 어떻게 알 수 있습니까? "facebookexternalhit / 1.1"이라는 고유 한 사용자 에이전트가 있습니다.


-2

메타 태그를 업데이트 한 후 컨텐츠 (이미지) 링크가 절대 경로인지 확인하고 여기 로 이동 https://developers.facebook.com/tools/debug/sharing하여 사이트 링크를 입력 한 scrape again후 다음 페이지를 클릭 하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.