누군가가 페이스 북에 링크를 게시하면 스크립트는 일반적으로 해당 링크에서 이미지를 검색하고 게시물 옆에 빠른 썸네일을 표시합니다. 하지만 특정 URL (내 URL 포함)의 경우 FB는 해당 페이지에 많은 이미지가 있음에도 불구하고 아무것도 선택하지 않는 것 같습니다.
FB가 사용자가 지정하려는 이미지에 대해 "image_src"rel 태그를 선호한다는 것을 읽었지만 이것은 내 사이트에 대해 해당 썸네일도 생성하지 않습니다.
내 URL은 DNS로 직접 이동하고 전달되지 않으므로 문제가 될 수 있다고 생각하지 않습니다.
FB가 내 사이트에서 썸네일을 생성 할 수없는 이유에 대해 아는 사람이 있습니까?
답변:
가장 쉬운 방법은 링크 태그입니다.
<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />그러나 사이트를보다 소셜 미디어 친화적으로 만들기 위해 사이트에 추가 할 수있는 몇 가지 다른 사항이 있습니다.
오픈 그래프 태그
오픈 그래프 태그는 <head>밴드, 레스토랑, 블로그 등 페이지가 나타내는 엔티티를 설명하기 위해 웹 사이트에 추가하는 태그입니다 .
오픈 그래프 태그는 다음과 같습니다.
<meta property="og:tag name" content="tag value"/> 오픈 그래프 태그를 사용하는 경우 다음 6 개가 필요합니다.
og:title -엔티티의 직함.og:type-엔티티 유형입니다. 오픈 그래프 유형 목록에서 유형을 선택해야합니다.og:image-엔티티를 나타내는 이미지의 URL입니다. 이미지는 50 픽셀 x 50 픽셀 이상이어야합니다. 정사각형 이미지가 가장 잘 작동하지만 이미지 너비는 높이의 3 배까지 사용할 수 있습니다.og:url-엔티티를 나타내는 페이지의 정식 영구 URL입니다. 오픈 그래프 태그를 사용할 때 좋아요 버튼 og:url은 좋아요 버튼 코드에서 URL 대신에 링크를 게시합니다 .og:site_name -사람이 읽을 수있는 사이트 이름 (예 : "IMDb")fb:admins또는 fb:app_id-페이지 관리자의 Facebook ID 또는 Facebook 플랫폼 애플리케이션 ID의 쉼표로 구분 된 목록입니다. 최소한 자신의 Facebook ID 만 포함하십시오.Open Graph 태그에 대한 자세한 내용과 페이지 관리에 대한 세부 정보는 Open Graph 프로토콜 문서에서 찾을 수 있습니다.
All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. 그냥 참고하시기 바랍니다
나는이 질문이 오래되었다는 것을 알고 있지만 최근에 똑같은 문제를 다루었 고 몇 주 동안 그 문제를 둘러 보았습니다. Google에서 여러 번 검색하면 유용한 정보가 많이 나타 났지만 대부분은 내가 사용하는 데 관심이 없었던 Open Graph 태그에 초점을 맞추 었습니다. 내 사이트에 여러 가지 문제가있는 것으로 밝혀졌지만 여기에 몇 가지 기본 사항이 있습니다.
EightyEight가 말했듯이 HTML이 유효한지 확인하세요. 자바 스크립트와 서버 측 코드 (PHP, ASP 등)도 마찬가지입니다. 메인 페이지에서 서버에 대한 별도의 호출로 실행되는 코드에서 작은 PHP 오류가 발생했습니다. 여러 가지 기이 한 우연으로 인해이 코드는 500 오류를 생성했지만 IE6 및 W3C 유효성 검사기 및 Facebook 페이지 크롤러와 같은 엄격한 구문 분석 엔진에만 해당됩니다. 이 문제는 최신 브라우저 (Chrome 4, FF 3.5, IE 8 등)에서는 나타나지 않았기 때문에 즉시 확인하지 못했지만 이전 / 엄격한 클라이언트가 매번 500을 표시했고 이것이 FB가 그렇지 않은 주된 이유였습니다. 페이지를 크롤링하지 않습니다 (다른 모든 것이 올바른 것으로 보이는 경우).
Randy의 응답에 관해서는 Facebook이 페이지를 업데이트 한 후에도 오랫동안 캐시 된 페이지 사본을 유지한다는 것이 맞습니다. FB는 24 시간 동안 만 개최한다고 주장하지만 그보다 훨씬 더 오랜 시간을 경험했습니다. 다행히, FB는 당신에게 FB에서 공유 될 때 페이지가 표시되는 방식의 미리보기를 표시합니다 그들의 "URL 린터"도구를 출시했습니다, 그리고 그것은 즉시 페이지의 캐시를 업데이트 할 FB를 강제 할 것이다. 이것은 생명을 구하는 도구였습니다. http://developers.facebook.com/tools/lint/ 에서 찾을 수 있습니다.
URL Linter 도구와 관련하여 URL의 각 변형은 Facebook에서 별도로 캐시되므로 "www.example.com"은 "example.com"과 동일하지 않습니다. 또한 고유 한 대문자 도 저장되므로 "ExampleOne.com"은 "exampleone.com"과 동일하지 않습니다. (이로 인해 캐시가 제대로 업데이트 된 것처럼 보였고 클라이언트가 업데이트를 볼 수 없다고 주장했을 때 제 클라이언트와 저 사이에 많은 혼란이 생겼습니다. 제가 exampleone.com을보고 사용하고있었습니다. Linter는 캐시를 업데이트하기 위해 Linter에 제출하지 않은 exampleOne.com을보고 있었기 때문에 Linter에 몇 가지 URL을 제출하여베이스를 덮었습니다.)
image_src 링크 태그를 사용하라는 WyrdNEXUS의 조언은 확실합니다. 이를 통해 FB가 귀하의 페이지에 가장 적합한 이미지를 스크랩하고 있는지 확인할 수 있습니다. 이미지 파일의 사양에 대한 몇 가지 다양한 지침이 있지만 128px 정사각형 이미지를 성공적으로 사용했으며 130x97 이미지도 통과했습니다. 다음은 http://developers.facebook.com/docs/reference/plugins/like/ 의 Facebook 공식 문서입니다 .
이미지는 50 픽셀 x 50 픽셀 이상이어야합니다. 정사각형 이미지가 가장 잘 작동하지만 이미지 너비는 높이의 3 배까지 사용할 수 있습니다.
분명히 FB는 큰 이미지의 크기를 조정하지만 미리 크기를 조정하면 거의 항상 더 나은 결과를 얻을 수 있습니다.
eHow 기사에 대한 Mike Cooper의 링크와 관련하여 해당 기사의 1 단계를 사용하지 마십시오. 기사가 작성되고 Mike가 링크를 게시했을 때 유효한 조언 이었지만 이제는 URL Linter 도구를 사용하여 페이지가 공유 될 때 어떻게 표시되는지 미리 보는 것이 좋습니다. Linter를 사용하면 페이지를 조정할 기회를 얻기 전에 FB가 (잠재적으로) 잘못된 페이지 사본을 캐시하지 않게됩니다.
여기에서 제공되는 facebook lintter를 사용하십시오. http://developers.facebook.com/tools/lint/
링크를 확인하고 이미지를 다시 가져옵니다. 이렇게하면 이전 캐시도 지워집니다.
또는 이것을 시도하십시오 -https : //developers.facebook.com/tools/debug
제목, 설명 및 이미지를 변경하려면 헤드 태그 아래에 메타 태그를 추가해야합니다.
1 단계 : 헤드 태그 아래에 메타 태그 추가
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
다음 단계 : 아래 링크를 클릭하십시오 https://developers.facebook.com/tools/debug 하십시오.
텍스트 상자에 URL을 추가합니다 (예 : http://www.test.com/태그를 언급 한 )에 . DEBUG 버튼을 클릭합니다.
끝났다.
여기에서 확인할 수 있습니다. https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/에서
위 URL에서 u = 웹 사이트 링크
즐겨 !!!!
사이트의 HTML이 유효합니까? w3c 유효성 검사 서비스를 통해 실행합니다 .
다음과 같이 사용해보십시오.
<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`
이미지의 전체 경로를 사용하는 한 Firefox에서 잘 작동하는 것 같습니다.
문제는 어떤 이유로 수직으로 아래로 오프셋된다는 것입니다. 내가 읽은 곳에서 권장되는 이미지는 200 x 200입니다.