첫째- 이것이 중복 문제라고 생각 하지 않습니다 . 나는 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 코딩 시간을 잃지 않도록 도와 줄 수 있기를 바랍니다 .
답변
같은 문제가 발생하여 Facebook 개발자 사이트의 버그로보고했습니다. og:image
HTTP를 사용 하는 URI는 제대로 작동하고 HTTPS를 사용 하는 URI는 제대로 작동하지 않는 것이 분명합니다 . 그들은 이제 “이것을보고있다”고 인정했다.
업데이트 : 2020 년 현재 버그는 Facebook 티켓 시스템에서 더 이상 보이지 않습니다. 그들은 응답하지 않았으며이 행동이 바뀌 었다고 생각하지 않습니다. 그러나 HTTPS URI를 지정 og:image:secure
하면 제대로 작동하는 것 같습니다.
답변
일부 속성에는 추가 메타 데이터가 첨부 될 수 있습니다. 이것들은 property
and와 다른 메타 데이터와 같은 방식으로 지정 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:image
HTTPS 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
답변
페이스 북 디버거 가 올바른 이미지를 표시 og:image
하더라도 나와 함께 있지만 작동하지 않고 내 사이트 로고를 선택 하면 알 수 없습니다 .
그러나 나를 og:image
위해 og:image:url
일하기로 변경 했습니다. 이것이 다른 사람이 비슷한 문제에 직면하는 데 도움이되기를 바랍니다.
답변
구글에서 왔지만 이것은별로 도움이되지 않았습니다. 로고에는 3 : 1의 최소 종횡비가 필요하다는 것이 밝혀졌습니다. 광산은 거의 4 : 1이었습니다. Gimp를 사용하여 정확하게 3 : 1로 자르고 짜잔으로 내 로고가 FB에 표시됩니다.
답변
tl; dr – 인내심
https 사이트에서 빈 이미지가 제공되는 것을보고 있었기 때문에 여기까지 왔습니다. 그래도 문제는 상당히 달랐습니다.
콘텐츠가 처음으로 공유되면 Facebook 크롤러는 공유 된 URL에서 메타 데이터를 긁어 캐시합니다. 크롤러는 이미지를 렌더링하기 전에 한 번 이상 이미지를보아야합니다. 즉, 컨텐츠를 공유하는 첫 번째 사람에게는 렌더링 된 이미지가 표시되지 않습니다.
[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]
테스트하는 동안 렌더링 된 이미지를 표시하는 데 약 10 분 동안 페이스 북 이 소요 되었습니다. 그래서 머리를 긁고 페이스 북에서 임의의 og 태그를 던지는 동안 (그리고 여기에 언급 된 https 문제가 의심되는 동안) 기다려야했습니다.
이렇게하면 사람들이 처음으로 링크를 공유하지 못하게 될 수 있으므로 FB는이 동작을 피할 수있는 두 가지 방법을 제안합니다. ) : og : image : width 및 og : image : height를 지정하십시오. (위의 링크에서 자세한 내용을 읽으십시오)
왜 그렇게 오래 걸리는지 궁금합니다 …
답변
나는 같은 오류가 있었고 이전의 아무것도 도움이되지 않았기 때문에 Open Graph Protocol 의 원본 문서를 따르려고 시도하고 HTML 태그에 접두사 속성을 추가했으며 모든 것이 멋지게되었습니다.
<html prefix="og: http://ogp.me/ns#">
답변
비슷한 문제가있었습니다. property = “og : image : secure_url”을 제거했으며 이제 og : image 만 사용하여 제거합니다. 때때로, 더 적은