Facebook 공유기는 URL을 공유 할 때 이미지 및 기타 메타 데이터를 어떻게 선택합니까?

393

Facebook Sharer를 사용할 때 Facebook은 소스에서 가져온 몇 개의 이미지 중 하나를 링크 미리보기로 사용할 수있는 옵션을 사용자에게 제공합니다. 이러한 이미지는 어떻게 선택되며 내 페이지의 특정 이미지가 항상 이 목록에 포함 되도록하려면 어떻게해야 합니까?

facebook  facebook-opengraph  facebook-sharer 
— 샘슨
소스
메타 속성을 사용할 때 실제로 작동하지만 유효하지 않은 HTML이므로 매우 이상합니다! 유효성 검사기를 통해 실행하면 볼 수 있습니다. 지구상에서 유효한 HTML로 작동하지 않는 이유는 무엇입니까?
1
— cope360
3
변경 한 후에 팁 -이 있습니다 .. 린터를 통해 페이지를 실행하고 페이스 북은 페이지의 축소판 등 업데이트됩니다 developers.facebook.com/tools/lint
— J0ANMM

답변:

593

내 페이지가 공유 될 때 사용할 이미지를 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="https://stackoverflow.com/myimage.jpg"/>. 둘 다 존재하지 않으면 Facebook은 페이지의 내용을보고 공유 이미지 기준에 맞는 페이지에서 이미지를 선택합니다. JPEG 또는 GIF 형식.

사용자가 이미지를 선택할 수 있도록 여러 이미지를 지정할 수 있습니까?

예, 원하는 순서대로 여러 이미지 메타 태그를 추가하면됩니다. 그러면 이미지 선택기 대화 상자가 나타납니다.
페이스 북 이미지 셀렉터

적절한 이미지 메타 태그를 지정했습니다. Facebook에서 변경 사항을 수락하지 않는 이유는 무엇입니까?

URL이 공유되면의 사용자 에이전트가있는 Facebook 크롤러가 facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)페이지에 액세스하여 메타 정보를 캐시합니다. Facebook 서버가 캐시를 지우도록하려면 2010 년 6 월에 시작한 Facebook Url Debugger / Linter Tool 을 사용하십시오. 하여 캐시를 새로 고치고 페이지의 메타 태그 문제를 해결하십시오.

또한 페이지의 이미지는 Facebook 크롤러가 공개적으로 액세스 할 수 있어야합니다. /yourimage.jpg 대신 http://example.com/yourimage.jpg 와 같은 절대 URL을 지정해야합니다 .

이러한 메타 태그를 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">
— ka
소스
1
또 다른 장소 : <link rel="apple-touch-icon" href="...">(이것이 SO 이미지를 얻는 방법입니다)
— Yarin
2
@Yarin 나는 그것이 확실하지 않다. StackOverflow에는 사용중인 image_src 특성이 설정되어 있습니다. apple-touch-icon의 파일 이름이 다르며 사용 중이 아닙니다.
— bkaid
3
이미지 순서를 선택할 수 있습니까? 필자의 경우 메타 태그 이미지 앞에 다른 이미지가 나타납니다.
— vicenrele
23
최소 이미지 크기는 이제 200x200px입니다.
— Tr1stan
1
우와! img의 크기를 300px로 설정했는데 이제는 작동하는 것 같습니다. 감사합니다 @ Tr1stan
— Urs
37

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/에 있습니다.

— 마티아스
소스
28

2013 년 현재 facebook.com/sharer.php(PHP)를 사용하는 경우 다음과 같은 버튼 / 링크를 만들 수 있습니다.

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;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 태그의 스타일을 지정하십시오.

— 안토니오 맥스
소스
p[images][0]정확히 내가 필요한 것입니다. og태그는 동일한 이미지를 공유하는 데 작동하지만 동일한 페이지에서 여러 이미지를 공유해야합니다.
— thekingoftruth
4
이것은 새롭고 '허용되는 대답'이어야합니다. 매우 간단하고 간단합니다. 고마워요, 친구
— Mike
안토니오, 위에 표시된 것에 대한 소스 링크가 있습니까? developers.facebook.com에서 이것을 보려고하지만 이것 이외의 것을 찾을 수 없습니다 . 도와주세요.
— Mr_Green
@Mr_Green 그게 다야. 이 기능은 '더 이상 사용되지 않지만'공식 문서로 돌아 왔습니다. 어쨌든, 나는 내 대답이 작동하기위한 기본 설정을 다루고 있다고 생각합니다.
— Antonio Max
@AntonioMax s=100게시물에 무엇이 있는지 설명해주세요 .
— Mr_Green
12

내 경험으로는 http://www.facebook.com/sharer.php 는 메타 태그를 사용하지 않습니다. 전달한 문자열을 사용합니다. 아래를 참조하십시오.

http://www.facebook.com/sharer.php?s=100&p[title]= 이것은 내 제목입니다 & p [요약] = 이것은 내 요약입니다 & p [url] = 이것은 이것은 http : //www.MYURL.com&&p [images] [ 0] = http : //www.MYURL.com/img/IMAGEADDRESS

메타 태그는 다른 Open Graph 정보와 마찬가지로 Facebook 개발자 좋아요 / 보내기 버튼과 함께 작동합니다. 따라서 댓글과 같은 Facebook의 실제 요소 중 하나를 사용하는 경우 모두 Open Graph에 연결됩니다.

업데이트 : 공유자를 사용하는 두 가지 방법이 있습니다 * 쿼리 문자열
1 ==> STRING 에서? s와? u 값을 확인하십시오 : 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

— 제이슨 리돈
소스
매우 도움이됩니다. 감사! : D
— Aaron Gray
다른 웹 사이트에서 해당 공유자를 사용하여 URL에서 내용을 가져 오는 합법적 인 방법이 있습니까? 나는 페이스 북 API와 것들에 대해 잘 모른다 ...
— Lyth
URL 옵션을 사용해보십시오. 페이지에 OG 태그가 있으면 FB가 긁습니다. 여기에서 사용하려는 페이지를 테스트하십시오. developers.facebook.com/tools/debug
— Jason Lydon
11

옛날 방식은 더 이상 작동하지 않습니다.

<link rel="image_src" href="http://yoururl/yourimage"/>

새로운 방법으로보고도 작동하지 않습니다.

<meta property="og:image" content="http://yoururl/yourimage"/>

내가 그것을 구현 한 첫날에는 무작위로 효과가 있었지만 그 이후로는 전혀 효과가 없었습니다.

페이지를 검사하는 유틸리티 인 Facebook linter 페이지는 모든 것이 올바르다 고보고하고 선택한 썸네일을 표시합니다 ... share.php 페이지 자체가 작동하지 않는 것 같습니다. 페이스 북에서 버그가 있어야합니다. 시스템에서 본이 문제에 관한 모든 버그 보고서가 모두 해결되거나 해결 된 것처럼 수정하지 않아도됩니다.

— 테오
소스
나는 또한이 문제를 겪고있다. linter는 오류를보고하지 않고 이미지를 올바르게 표시하지만 사이트에서 공유 버튼을 클릭하면 공유 인터페이스에 이미지가 전혀 없습니다.
— 누가 그리피스
image_src는 더 이상 Facebook에서 작동하지 않지만 일부 서비스에서는 여전히 사용하고 있습니다 (Telegram 클라이언트 등)
— Andres SK
10

제목, 설명 및 이미지를 변경하려면 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

텍스트 상자에 URL을 추가하십시오 (예 : http://www.test.com/태그를 언급 한 )에 . DEBUG 버튼을 클릭하십시오.

끝났다.

https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/에서 확인할 수 있습니다.

위의 URL에서 u = 웹 사이트 링크

즐겨 !!!!

— 가우 라브 123
소스
디버거가 도움이되었습니다.
— konsolebox
1

이것이 나를 위해 일한 것입니다 : 태그 바로 다음에 원하는 축소판 이미지를 페이지에 배치하고 너무 작아서 볼 수 없었습니다.

<img src="imagename.jpg" width="1" height="1" />

높이 0과 너비 0으로 테스트하지는 않았지만 여전히 작동 할 것입니다. 사용자 가이 이미지를 선택한다고 보장하지는 않습니다.

또한 Facebook이 페이지의 미리보기 이미지를 캐시하고 항상 새로운 이미지를 확인하지는 않는 것 같습니다. 사이트의 다른 페이지에 추가하면 효과가 있습니다.

— 다니엘 베르날
소스
1
태그 뒤 – "BODY 태그 뒤"를 의미합니까?
— Alexis Wilke
예, 그것이 그들이 의미하는 바라고 믿습니다. 오래 전에 사이트 에서이 작업을 수행했지만 style="display:none;"1x1 픽셀로 설정 하는 대신 사용 했습니다.
— Mike
1

공유 대화 상자 대신 페이스 북 피드 대화 상자를 사용하여 사용자 정의 이미지 표시

예:

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
— 키투
소스
0

Facebook에서 특정 게시물에서 올바른 이미지를 선택하도록 할 수 없었으므로이 페이지에 설명 된 내용을 수행했습니다.

/webapps/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 문을 하드 코딩하여 해당 게시물에 대해 변경 한 내용에 대한 메타 콘텐츠를 변경합니다. 지저분한 솔루션이지만 작동합니다.

— 미셸 글 라우저
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.