it-swarm-ko.com

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

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

Facebook에서 og:image 파일을 파악할 수 없으며 모든 일반적인 해결책을 시도했습니다. https://...와 관련이 있다고 생각하기 시작했습니다.

  • http://developers.facebook.com/tools/debug 를 확인했으며 경고 또는 오류가 없습니다.
  • "og:image"에서 링크 된 이미지를 찾고 있지만 비어 있습니다. 그러나 이미지를 클릭하면 DO가 존재하고 곧바로 나타납니다.
  • Https 서버가 아닌 서버에서 호스팅되는 이미지 하나만 표시됩니다.
  • 우리는 정사각형 이미지, jpeg, png, 더 큰 크기 및 더 작은 크기를 시도했습니다. 이미지를 public_html에 넣었습니다. 제로가 나타납니다.
  • 캐싱 오류가 아닙니다. 메타에 다른 og:image를 추가하면 FB의 린터가이를 찾아서 읽기 때문입니다. 미리보기가 표시됩니다. 미리보기가 비어 있습니다. 우리가 얻는 only 예외는이 웹 사이트에없는 이미지에 대한 것입니다.
  • cpanel 또는 .htaccess에 이미지가 보이지 않게하는 침출 방지 기능이 있다고 생각하여 확인했습니다. 그곳 엔 없었다. 완전히 다른 서버에서 < img src="[remote file]" >을 (를) 빠르게 수행했는데 이미지가 제대로 표시됩니다.
  • og:type 또는 다른 메타 태그와의 다른 이상이라고 생각했습니다. 한 번에 하나씩 모두 제거하고 확인했습니다. 변경 없음. 경고 만.
  • 다른 웹 사이트의 동일한 코드가 문제없이 나타납니다.
  • maybe 여러 제품에 대해 동일한 제품 페이지를 사용하고 있기 때문에 이미지를 가져 오지 않을 것이라고 생각했습니다 (예 : "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 웹 사이트에 subdomain을 추가했습니다 (이미지는 실제로 페이스 북을 통해 표시됨). 하위 도메인은 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 코딩 시간의 their 생명을 잃지 않도록 도와 줄 수 있기를 바랍니다.

288
Cyprus106

나는 같은 문제를 겪고 페이스 북 개발자 사이트에서 버그로보고했다. og : HTTP를 사용하는 이미지 URI는 정상적으로 작동하고 HTTPS를 사용하는 URI는 제대로 작동하지 않습니다. 그들은 지금 그들이 "이것을 들여다 보았다"고 인정했다.

버그는 여기에서 볼 수 있습니다 : https://developers.facebook.com/bugs/260628274003812

82
Keegan Quinn

일부 속성에는 추가 메타 데이터가 첨부 될 수 있습니다. 이들은 propertycontent을 사용하는 다른 메타 데이터와 동일한 방식으로 지정되지만 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" />

따라서 HTTPS URL의 og:image 속성을 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

125
Syed I.R

모르겠다. 나와 만있는 것이지만 og:image가 작동하지 않고 facebook 디버거 가 올바른 것을 나타내더라도 내 사이트 로고를 고른다. 영상.

하지만 og:imageog:image:url로 변경하면 효과가있었습니다. 희망이 다른 사람이 비슷한 문제에 직면하는 데 도움이됩니다.

14
lalit

tl; dr - 환자가 되십시오

Https 사이트에서 제공되는 빈 이미지를보고 있었기 때문에 여기에서 끝났습니다. 문제는 상당히 달랐습니다.

콘텐츠를 처음 공유 할 때 Facebook 크롤러는 공유 된 URL의 메타 데이터를 긁어서 캐시합니다. 크롤러는 렌더링되기 전에 적어도 한 번 이미지를보아야합니다. 즉, 콘텐츠를 공유하는 첫 번째 사용자는 렌더링 된 이미지를 보지 못합니다.

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

테스트를하는 동안 마침내 렌더링 된 이미지를 보여주기 위해 페이 스북 을 약 10 분분 소요했습니다. 그래서 내 머리를 긁적이고 페이 스북 (그리고 여기에 언급 된 https 문제를 의심)에 임의의 OG 태그를 던지고있는 동안, 내가해야만하는 것은 기다리는 것이었다.

이렇게하면 사람들이 처음으로 링크를 공유하는 것을 실제로 막을 수 있으므로 FB는이 동작을 피할 수있는 두 가지 방법을 제안합니다. a) 모든 링크에서 OG 디버거를 실행합니다. 이미지가 캐싱되어 ~ 10 분 또는 b 후에 공유 할 준비가됩니다. ) og : image : width 및 og : image : height를 지정합니다. (위의 링크에서 더 많은 것을 읽으십시오)

아직도 오래 걸리는 것이 무엇인지 궁금해합니다 ...

8
panepeter

Google로부터 얻었지만 이것은 나에게별로 도움이되지 못했습니다. 로고에 필요한 최소 가로 세로 비율은 3 : 1입니다. 내 것은 거의 4 : 1이었다. 저는 Gimp를 사용하여 정확히 3 : 1로 잘라 냈습니다. 이제 내 로고가 FB에 표시됩니다.

8
priiiiit

나는 동일한 오류가 있었고 이전에는 아무 것도 도움이되지 않았기 때문에 Open Graph Protocol 의 원본 문서를 따르려고했지만 html 태그에 접두어 속성을 추가하면 모든 것이 멋지게되었습니다.

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

다음을 통해 서버를 새로 고치는 것을 잊지 마십시오.

Facebook 디버거

"새 정보 수집"을 클릭하십시오.

2
Scaraux

나는 비슷한 문제가 있었다. 나는 property = "og : image : secure_url"속성을 제거하고 이제는 단지 og : image로 제거 할 것입니다. 때때로 더 적은 것이 더 많습니다.

1
HappaGirl

제 경우에는 문제가 CA Root Certificate를 제공하지 않았습니다. SSL 구성을 분석하기 위해 https://www.ssllabs.com/ssltest/analyze.html 을 사용하여 알아 냈습니다.

1
instead

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

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

이것은 WP에서 지킬로의 최근 마이 그 레이션으로 인해 발생했습니다. 꿀꺽 꿀꺽 마시면서 이미지를 최적화했지만 실수로 원래 이미지를 사용했습니다.

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

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

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

1
Mark

우연히 발견 한 것처럼 투명 빈 이미지에는 문제의 가능한 원인을 나타내는 응답 헤더가 있습니다.

  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/Developer 도구의 Net 탭을 켜고 필요하면 페이지를 새로 고칩니다.
  5. 설명이있는 x-error-detail 응답 헤더가 표시됩니다.

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

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

이미지가 prerender를 통해 요청 된 경우 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 봇에서 요청한 경우에도 마찬가지입니다).

Prerender는 특정 사용자 에이전트 헤더에서만 사용되므로이 사실을 알아 채기가 정말 어렵습니다.

1
Marius Balčytis

나는 같은 문제에 부딪혔다. 그리고 나는 내가 og:url에 대해 다른 도메인을 가지고 있다는 것을 알아 차렸다.

도메인이 og:urlog:image에서 동일하다는 것을 확인한 후에 작동했습니다.

희망이 도움이됩니다.

1
Darren Hall

사이트의 https 인증서가 완벽하게 호환되지 않으면 비슷한 증상 (페이스 북 외에도 og : 이미지 및 기타 애셋을 https로 올바르게 가져 오지 못함)이 발생할 수 있습니다.

사이트의 https 인증서가 유효 할 수도 있지만 (중간 키 또는 체인 인증서가 녹색 인 경우) 중간 또는 체인 인증서가 누락 된 경우 올바르게 고칩니다. 이로 인해 여러 가지 캐시와 메타 태그를 모두 확인하고 다시 확인하는 데 많은 시간이 낭비 될 수 있습니다.

당신의 문제가 아니었을 지 모르지만 비슷한 증상 (예 : 광산)이있는 다른 환자 일 수 있습니다. 인증서를 확인하는 방법은 여러 가지가 있습니다. 사용 방법은 다음과 같습니다 https://www.sslshopper.com/ssl-checker.html

1
Lance

내가 관찰 한 것에서 볼 때 귀하의 웹 사이트가 공개되어 있고 이미지 URL이 https인데도 정상적으로 작동한다는 것을 알 수 있습니다.

0
AK M

나에게 이것은 효과가 있었다.

<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"/> 
0
Dr.MTR

또한이 문제는 사용자 생성 스토리 (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

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

0
Aamir Quraishi

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

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

0
Lix

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

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

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

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

또한 Facebook의 Object Debugger 이외의 다른 체커가 있습니다 : OpenGraphCheck.com , Abhinay Rathore의 오픈 그래프 테스터 ,- Iframely 포함 코드 , 카드 검사기 | 트위터 개발자 .

0
Ooker

나는 내 http://에서 og:image을 가져 와서 평범한 오래된 www.로 바꾸었다.

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

0
Albert Renshaw

오늘 공유 디버거 가 해결하는 데 도움이되었던 유사한 문제가있었습니다. 페이스 북은 (현재) XMP 메타 데이터가 임베드 된 이미지를 이해할 수 없다. 기사의 이미지를 XMP 메타 데이터가없는 버전으로 바꾼 다음 공유 디버거를 사용하여 페이지를 다시 긁어서 문제가 해결되었습니다. 16 진수 편집기는 이미지에 XMP 메타 데이터가 있는지 여부를 확인하는 데 도움이됩니다.

0
Brett Donald

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

0
Thyagu