“Facebook Publisher”는 공유 웹 사이트에서 이미지, 제목 및 내용을 어떻게 선택합니까?


12

이것은 Facebook 게시자 에 대한 질문 입니다. 링크를 공유하면 Facebook에서 텍스트를 가져 와서 제목을 사이트의 이미지로 가져 와서 사용자 미리보기를 구성합니다. 그런 다음 사용자는 미리보기를 편집하고 여러 다른 썸네일 중 하나를 선택한 다음 Facebook 프로필에 게시 할 수 있습니다.

요점을 설명하는 스크린 샷은 다음과 같습니다.

Facebook 스크린 샷

Publisher 응용 프로그램은 링크에서 이미지와 텍스트를 어떻게 가져 옵니까? 다른 인기있는 웹 응용 프로그램, Google 응용 프로그램, Wordpress 블로그 등에서 작동하는 유사한 응용 프로그램이 있습니까?

내가 물어 비슷한 질문을 몇 달 전에, 페이스 북이 사용하는 표시 에서 oEmbed를 하지만에서 oEmbed는 내용 내장 나타납니다. 또한 oEmbed는 oEmbed 공급자와 만 작동한다는 것을 읽었습니다. Facebook 게시자는 거의 모든 웹 사이트에서 작동합니다.



@phwd : @Edward가 자신의 게시물에서 버그에 대해 이야기하는 것 같습니다. "하지만 약 2 주 전부터 ..."
까지

답변:


10

Facebook은 제목 및 이미지 등 (예 : og : title)에 대해 열려있는 그래프 메타 태그를 사용합니다. Open Graph Protocol 의 페이스 북 문서 는이를 자세히 설명합니다.

Open Graph 프로토콜은 네 가지 필수 속성을 정의합니다.

og : title-그래프 안에 나타날 객체의 제목입니다 (예 : "The Rock").

og : type-객체의 유형입니다 (예 : "movie"). 지원되는 유형의 전체 목록을 참조하십시오.

og : image-그래프 내 객체를 나타내는 이미지 URL입니다. 이미지는 50x50 픽셀 이상이어야하며 최대 가로 세로 비율은 3 : 1이어야합니다.

og : url-그래프에서 영구 ID로 사용될 객체의 표준 URL입니다 (예 : http://www.imdb.com/title/tt0117500/) .

또한 기본 메타 데이터를 확장하여 페이지를 Facebook과 연결하는 데 필요한 두 개의 필드를 추가했습니다.

og : site_name-사이트의 사람이 읽을 수있는 이름입니다 (예 : "IMDb").

fb : admins 또는 fb : app_id-쉼표로 구분 된 Facebook 사용자 ID 또는이 페이지를 관리하는 Facebook 플랫폼 애플리케이션 ID 목록입니다. 페이지에 fb : admins 및 fb : app_id를 모두 포함하는 것이 유효합니다.

이러한 다중 부품 속성뿐만 아니라 다음 속성도 포함하는 것이 좋습니다.

og : description-페이지에 대한 1-2 개의 문장 설명.

이 태그가없는 페이지에 어떻게 적용되는지 잘 모르겠습니다. 이 기능을 복제하려는 경우 도움이되지 않습니다. 죄송합니다. 그러나 원하는대로 페이지가 게시자에 표시되도록하려면 이것이 가능할 것입니다.

또한 페이스 북 오픈 그래프 디버거를 사용하면 미리보기에 대한 정보를 제공하고 변경하면 캐시 된 링크를 업데이트 할 수 있습니다. 그렇지 않으면 공유하려는 링크를 변경할 수 있으며 변경 사항은 며칠 동안 표시되지 않습니다.

https://developers.facebook.com/tools/debug


열린 그래프 태그를 제공하지 않은 경우 메타 태그를 사용합니다. OG 태그는 웹 페이지를 좋아할 때 더 유용합니다. coz는 페이스 북 페이지를 생성 한 다음 사이트 / URL에 대해
Umair Jabbar

4

선택할 텍스트와 이미지를 페이스 북에 알리려면 페이지 머리에 특정 메타 키를 추가해야합니다.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

나는 그가 여기에 세부 사항을 게시했습니다 http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/


1
흥미롭고 메타 태그는 많은 웹 마스터에게 권장되는 방법입니다 (검색 엔진 등에 도움이 됨). 그러나 flowdata.com/2010/09/15/… 의 소스를 살펴보십시오 . 해당 페이지에는 해당 태그가 없으며 <link rel=이미지 이미지 태그도 없습니다.
Stefan Lasiewski

@ Stefan, 이것은 매우 좋은 질문입니다 .FB가 새로운 OpenGraph OG 태그의 메타 태그를 찾지 못하면 모든 이미지를 선택하고 해당 페이지의 HTML 시작 부분에서 텍스트의 일부를 보여줍니다. . 따라서 사용자는 이미지를 선택할 수 있지만 텍스트는 동일합니다. 또한 Facebook에서 지정한 기준에 해당하는 이미지 만 표시됩니다. aspet 비율
Umair Jabbar

1

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

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

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

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

도움이 되었기를 바랍니다.


0

Facebook은 공유중인 페이지에서 메타 태그를 사용하여 링크를 게시 할 때 표시 할 이미지, 제목 및 설명을 결정합니다. 메타 태그 구문은 Facebook의 OpenGraph 사양을 따릅니다 .

정의해야 할 가장 중요한 메타 태그는 다음과 같습니다.

  • <meta property="og:title" content="The title of the sharing preview" />
  • $<meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

이것은 물론 공유하는 사이트를 완전히 제어 할 수있는 경우에만 작동합니다. 뉴스 기사와 같은 외부 링크를 공유하는 경우 해당 사이트에 액세스 할 수 없으므로 메타 태그를 변경할 수 없습니다. 내가 사용하고 ShareKit.io 당신이 메타 태그와 바이올린을하지 않고있는 링크를 당신이있는 거 공유의 제목, 설명, 이미지를 변경할 수 있습니다.


-1

귀하의 질문에 대한 답변이 상당히 복잡하며 Facebook의 영업 비밀이라고 할 수 있습니다. URL을 스캔하고 뉴스 스트림에 표시 할 관련 컨텐츠 / 미디어를 선택할 수있는 기능은 Facebook을 사용하는 일상적인 사람들에게 서비스를 독특하고 유용하게 만드는 것 중 하나입니다.

즉, 알고리즘이 굉장히 복잡하지는 않을 것이라고 말하고 싶습니다. 웹 사이트의 콘텐츠를 긁기 위해 Google이 사용하는 것과 동일한 규칙을 많이 사용합니다 ( 여기에 일반적인 세부 정보가 게시되어 있음 ). 게시자의 힘은 Facebook 엔지니어의 많은 시행 착오와 테스트에서 비롯된 것 같습니다.


1
나는 완전히 동의하지 않는다!
Umair Jabbar
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.