Facebook 공유자는 내 URL을 공유 할 때 이미지 및 기타 메타 데이터를 어떻게 선택합니까?
Facebook Sharer을 사용할 때 Facebook은 소스에서 가져온 몇 개의 이미지 중 1 개를 링크 미리보기로 사용할 수있는 옵션을 사용자에게 제공합니다. 이러한 이미지는 어떻게 선택되며 내 페이지의 특정 이미지 가이 목록에 항상 포함되도록 확인하려면 어떻게해야합니까?
내 페이지를 공유 할 때 사용할 이미지를 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은 페이지의 콘텐츠를보고 페이지에서 공유 이미지 기준을 충족하는 이미지를 선택합니다. 이미지는 최소 200x200 픽셀이어야하고 최대 종횡비는 3 : 1이어야하며 PNG, JPEG 또는 GIF 형식.
사용자가 이미지를 선택할 수 있도록 여러 이미지를 지정할 수 있습니까?
예, 여러 이미지 메타 태그를 표시하려는 순서대로 추가하면됩니다. 사용자에게 이미지 선택기 대화 상자가 표시됩니다.
적절한 이미지 메타 태그를 지정했습니다. Facebook에서 변경 사항을 승인하지 않는 이유는 무엇입니까?
URL이 공유되면 facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)의 사용자 에이전트가있는 Facebook의 크롤러가 사용자의 페이지에 액세스하고 메타 정보를 캐시합니다. Facebook 서버에서 캐시를 지우려면 Facebook URL 디버거/Linter 도구 its 2010 년 6 월에 시작 를 사용하여 캐시를 새로 고침하고 페이지의 메타 태그 문제를 해결합니다.
또한 페이지의 이미지는 Facebook 크롤러가 공개적으로 액세스 할 수 있어야합니다. /y[image.jpg 대신 http://example.com/yourimage.jpg 와 같은 절대 URL을 지정해야합니다.
이 메타 태그를 Javascript 나 jQuery와 같은 클라이언트 측 코드로 업데이트 할 수 있습니까? 아니요. 검색 엔진 크롤러와 마찬가지로 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 원시 링크 일뿐입니다. 원하는 방식으로 A 태그의 스타일을 지정하십시오.
다음 태그를 head에 넣습니다.
<link rel="image_src" href="/path/to/your/image"/>
From http://www.facebook.com/share_partners.php
이 태그가없는 경우 기본값으로 선택하는 항목은 확실하지 않습니다.
내 경험상, http://www.facebook.com/sharer.php 는 메타 태그를 사용하지 않습니다. 그것은 전달한 문자열을 사용합니다. 아래를 참조하십시오.
http://www.facebook.com/sharer.php?s=100&p [title] =이 IS 내 제목 & 요약] =이 IS 요약 및 p [url] = http : //www.MYURL.com&&p [images] [0] = http : //www.MYURL. co.kr/img/IMAGEADDRESS
메타 태그는 다른 Open Graph 정보처럼 페이스 북의 개발자/보내기 버튼과 함께 작동합니다. 따라서 댓글과 같은 Facebook의 실제 요소 중 하나를 사용하면 Open Graph에 모두 포함됩니다.
업데이트 : 공유기를 사용하는 두 가지 방법이 있습니다 * 쿼리 문자열의? u 값 비교
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)에서 벌레가되어야합니다. 그들은 자신들의 시스템에서 본 이슈에 관한 모든 버그 보고서가 모두 해결되었거나 고쳐 졌다고 말하면서 수정을 원하지 않는 것 같습니다.
제목, 설명 및 이미지를 변경하려면 head 태그 아래에 몇 가지 메타 태그를 추가해야합니다.
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
태그를 언급 한 텍스트 상자 (예 : http://www.test.com/ )에 URL을 추가하십시오. DEBUG 버튼을 클릭하십시오.
끝났다.
여기서 확인할 수 있습니다 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" />
이것은 나를 위해 일한 것입니다 : 태그 바로 뒤에 원하는 축소판 이미지를 배치하고 볼 수 없을 정도로 작게 만듭니다.
<img src="imagename.jpg" width="1" height="1" />
높이 0과 너비 0으로 테스트하지는 않았지만 여전히 작동 할 것입니다. 사용자가이 이미지를 선택할 것을 보장하지는 않습니다.
또한 페이 스북이 귀하의 페이지에 축소판을 캐시하고 항상 새로운 페이지를 확인하지 않는 것 같습니다. 사이트의 다른 페이지에 이것을 추가하면 작동하는 것을 볼 수 있습니다.
나는이 문제를 가지고 manuel-84의 제안으로 해결했다. 400x400 픽셀 이미지를 사용하면 큰 효과를 얻었지만 작은 이미지는 공유기에 표시되지 않았습니다.
Facebook은 og : image 태그로 200px 이상의 정사각형 이미지를 권장합니다. https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
공유 대화 상자 대신 페이스 북 피드 대화 상자를 사용하여 사용자 정의 이미지를 표시하십시오
예:
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
페이스 북에서 특정 게시물의 올바른 이미지를 고를 수 없어서이 페이지에 설명 된 내용을 수행했습니다.
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
즉, 다음과 같은 것입니다.
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
기본적으로 사이트의 HTML에 if 문을 하드 코딩하여 해당 게시물에 대해 변경 한 메타 내용을 변경하도록 할 것입니다. 지저분한 해결책이지만 작동합니다.