Facebook Sharer는 내 URL을 공유 할 때 이미지 및 기타 메타 데이터를 어떻게 선택합니까?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
Facebook Sharer를 사용할 때 Facebook은 사용자에게 소스에서 가져온 몇 개의 이미지 중 하나를 링크의 미리보기로 사용하는 옵션을 제공합니다. 이 이미지는 어떻게 선택되었으며 내 페이지의 특정 이미지가 언제나 이 목록에 포함되어 있습니까?
해결책
내 페이지가 공유 될 때 어떤 이미지를 사용할 것인지 Facebook에게 어떻게 알 수 있습니까?
Facebook에는 세트가 있습니다 개방형 메타 태그 표시 할 이미지를 결정하기 위해보고 있습니다.
Facebook 이미지의 키는 다음과 같습니다.
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
그리고 그것은 내부에 존재해야합니다 <head></head> 페이지 상단에 태그를 지정하십시오.
이 태그가 존재하지 않으면 이미지를 지정하는 오래된 방법을 찾습니다. <link rel="image_src" href="/myimage.jpg"/>. 참석하지 않으면 Facebook은 페이지의 내용을보고 공유 이미지 기준을 충족하는 페이지에서 이미지를 선택합니다. 이미지는 200px 이상 200px이어야하며 최대 종횡비는 3 : 1이며 PNG에서는 있어야합니다. JPEG 또는 GIF 형식.
사용자가 이미지를 선택할 수 있도록 여러 이미지를 지정할 수 있습니까?
예, 원하는 순서대로 여러 이미지 메타 태그를 추가하면됩니다. 사용자에게는 이미지 선택기 대화 상자가 표시됩니다.
적절한 이미지 메타 태그를 지정했습니다. Facebook이 변경 사항을 수락하지 않는 이유는 무엇입니까?
URL이 공유되면 Facebook의 크롤러는 사용자 대리인이 있습니다. facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), 페이지에 액세스하고 메타 정보를 캐시합니다. Facebook 서버가 캐시를 지우도록 강요하려면 Facebook URL 디버거 / 라이터 도구 그들 2010 년 6 월에 출시되었습니다 캐시를 새로 고치고 페이지의 메타 태그 문제를 해결하기 위해.
또한 페이지의 이미지는 Facebook 크롤러에 공개적으로 액세스 할 수 있어야합니다. 절대 URL과 같은 것을 지정해야합니다 http://example.com/yourimage.jpg 단지 /yourimage.jpg 대신.
이 메타 태그를 JavaScript 또는 jQuery와 같은 클라이언트 사이드 코드로 업데이트 할 수 있습니까?아니요. 검색 엔진 크롤러와 마찬가지로 Facebook 스크레이퍼는 스크립트를 실행하지 않으므로 페이지를 다운로드 할 때 메타 태그가있는 모든 메타 태그는 이미지 선택에 사용되는 메타 태그입니다.
이 태그를 추가하면 내 페이지가 더 이상 검증되지 않습니다. 이것을 어떻게 고칠 수 있습니까?
필요한 Facebook 네임 스페이스를 태그에 추가하면 페이지가 검증을 전달해야합니다.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
다른 팁
Facebook을 공유 할 때 HTML을 헤드 섹션에 추가해야합니다. 다음 메타 태그 :
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
그리고 그게 다야!
FB가 말한 것에 따라 버튼을 추가하십시오.
필요한 모든 정보가 있습니다 www.facebook.com/share/
2013 년 현재 Facebook.com/sharer.php (PHP)를 사용하는 경우 다음과 같은 버튼/링크를 만들 수 있습니다.
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>
링크 쿼리 매개 변수 :
p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook
단순합니다. JS 나 다른 설정이 필요하지 않습니다. HTML 원시 링크입니다. 원하는 방식으로 태그를 스타일링하십시오.
다음 태그를 head:
<link rel="image_src" href="/path/to/your/image"/>
에서 http://www.facebook.com/share_partners.php
이 태그가 없을 때 그것이 기본값으로 선택한 바에 따르면 확실하지 않습니다.
내 경험에서 http://www.facebook.com/sharer.php 메타 태그를 사용하지 않습니다. 전달한 문자열을 사용합니다. 아래를 참조하십시오.
http://www.facebook.com/sharer.php?s=100&p] this 내 제목입니다 & p [요약] = 이것은 내 요약입니다 & p [url] =http : //www.myurl.com&p [images] [0] = http : //www.myurl.com/img/imageaddress
메타 태그는 다른 열린 그래프 정보와 마찬가지로 Facebook의 개발자와 같은/전송 버튼과 함께 작동합니다. 따라서 댓글 등과 같은 Facebook의 실제 요소 중 하나를 사용하면 모두 열린 그래프에 연결됩니다.
업데이트 : Sharer *를 사용하는 두 가지 방법이 있습니다.
1 ==> 문자열 : http://www.facebook.com/sharer.php?s + 위의 콘텐츠
~~>은 문자열에서 정보를 가져옵니다.
2 ==> URL : http://www.facebook.com/sharer.php?u=url 여기서 URL은 실제 URL과 같습니다
~~> URL 값으로 제공된 페이지를 긁어냅니다.
~~> 여기에서 값을 테스트 할 수 있습니다. https://developers.facebook.com/tools/debug
오래된 방법은 더 이상 작동하지 않습니다.
<link rel="image_src" href="http://yoururl/yourimage"/>
보고 된 새로운 길, 또한 작동하지 않습니다.
<meta property="og:image" content="http://yoururl/yourimage"/>
그것은 내가 그것을 구현 한 첫날 동안 무작위로 일을 시작했고, 그 이후로 전혀 효과가 없었습니다.
귀하의 페이지를 검사하는 유틸리티 인 Facebook Linter 페이지는 모든 것이 정확하고 선택한 썸네일을 표시한다고보고합니다. Share.php 페이지 자체가 작동하지 않는 것 같습니다. Facebook에서 버그가되어야합니다. 시스템에서 본이 문제에 관한 모든 버그 보고서가 모두 해결되거나 고정되어 있다고 말하면서 고치기를 신경 쓰지 않습니다.
제목, 설명 및 이미지를 변경하려면 헤드 태그 아래에 메타 태그를 추가해야합니다.
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/) 태그를 언급 한 곳. 디버그 버튼을 클릭하십시오.
끝났다.
여기서 확인할 수 있습니다 https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
위의 URL에서 u = 웹 사이트 링크
즐겨 !!!!
안전한 HTTPS 용
<meta property="og:image:secure_url" content="https://image.path.png" />
나는이 문제가 있었고 Manuel-84의 제안으로 그것을 고쳤다. 400x400px 이미지를 사용하는 것은 훌륭하게 작동했지만 내 작은 이미지는 공유기에 나타나지 않았습니다.
Facebook은 OG : 이미지 태그로 최소 200px 제곱 이미지를 권장합니다. https://developers.facebook.com/docs/opengraph/howtos/maximizing-dotribution-media-content/#tags
이것은 나에게 효과가있는 것입니다 : 나는 원하는 썸네일 이미지를 태그 바로 뒤에 페이지에 배치하고 너무 작게 볼 수 없게 만들었습니다.
<img src="imagename.jpg" width="1" height="1" />
높이 0과 너비 0으로 테스트하지는 않았지만 아마도 여전히 작동 할 것입니다. 이것은 사용자 가이 이미지를 선택할 것이라고 보장하지 않습니다 ..
또한 Facebook이 페이지의 축소판을 캐시하고 항상 새로운 것을 확인하지는 않습니다. 사이트의 다른 페이지에 이것을 추가하면 작동하는 것을 알 수 있습니다.
공유 대화 상자 대신 Facebook 피드 대화 상자를 사용하여 사용자 정의 이미지를 표시합니다.
예시:
https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
Facebook이 특정 게시물에서 올바른 이미지를 선택하도록 할 수 없었기 때문에이 페이지에 설명 된 내용을 수행했습니다.
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to- indiblog-blogger-posts
다시 말해, 다음과 같은 것 :
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
기본적으로 귀하는 귀하의 사이트의 HTML에 IF 문을 하드 코드로 사용하여 해당 게시물에 대해 변경 한 내용에 대한 메타 컨텐츠를 변경하도록합니다. 지저분한 해결책이지만 작동합니다.
