[FB] facebook 공유하기 위한 웹페이지의 meta 정보 작업 Tag

[FB] facebook 공유하기 위한 웹페이지의 meta 정보 작업 Tag

https://developers.facebook.com/docs/sharing/webmasters

meta 정보가 정확해야 공유하기 했을때 미리보기가 잘 나온다. 

이미지가 항상 문제가 되는데, 최소 사이즈가 200x200 픽셀이다. 

크게 나오는 이미지는  최소한 600x315픽셀 이상이어야 한다. 

이미지관련은 아래의 링크에서 확인해보자. 

https://developers.facebook.com/docs/sharing/best-practices#images

공유디버그(캐쉬 삭제, 미리보기 확인)

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

=================================

웹 마스터용 공유 가이드

이 문서에서는 데스크톱, 모바일 웹, 모바일 앱 등 공유된 위치와 관계없이 Facebook에 공유하는 웹 호스팅된 콘텐츠를 최적화하는 방법에 대해 설명합니다.

이 문서에서는 다음에 대한 정보를 제공합니다.

• 오픈 그래프 마크업
• 마크업 테스트
• 미디어 콘텐츠 유형

오픈 그래프 마크업

대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다.

이러한 태그가 없으면 Facebook 크롤러에서 내부의 경험적 접근법을 사용하여 콘텐츠의 제목, 설명, 미리 보기 이미지에 대해 가장 현실성 높은 추측을 내립니다. Facebook에 게시물이 가장 최적화된 품질로 표시될 수 있도록 오픈 그래프 태그를 사용하여 이 정보를 명시적으로 지정합니다.

다음은 Facebook에 최적화되어 표시되도록 오픈 그래프 태그로 형식화된 콘텐츠의 예시입니다.

마크업 예시

예를 들어, 다음은 og:type="article" 및 여러 추가 속성으로 기사, 뉴스 소식 또는 블로그 게시물을 마크업하는 방법입니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

이 속성에는 사용자가 기사를 공유할 때 특별히 표시할 기사에 대한 설명적인 메타데이터가 포함됩니다.

기본 태그

다음은 모든 콘텐츠 유형에 사용해야 하는 가장 기본적인 메타 태그입니다.

태그	설명
og:url	페이지의 표준 URL입니다. 세션 변수, 사용자 식별 매개변수 또는 카운터가 없는 그대로의 URL이어야 합니다. 이 URL의 좋아요 및 공유는 이 URL에서 집계됩니다. 예를 들어, 여러 버전의 페이지에서 좋아요와 공유를 집계하기 위해 모바일 도메인 URL은 표준 URL로 지정된 데스크톱 버전의 URL을 가리켜야 합니다.
og:title	사이트 이름과 같은 브랜드가 없는 기사의 제목입니다.
og:description	콘텐츠의 간략한 설명으로, 대개 2~4개의 문장으로 구성됩니다. 이 설명은 Facebook의 게시물 제목 아래에 표시됩니다.
og:image	사용자가 Facebook에 콘텐츠를 공유할 때 표시되는 이미지의 URL입니다. 자세한 내용은 아래를 참조하고, 고품질 미리 보기 이미지를 지정하는 방법에 대해 알아보려면 모범 사례 가이드를 확인하세요.
fb:app_id	Facebook 도메인 인사이트를 사용하려면 페이지에 앱 ID를 추가해야 합니다. 도메인 인사이트를 사용하면 Facebook에서 회원님의 사이트로 보내는 트래픽의 분석 결과를 볼 수 있습니다. 앱 대시보드에 앱 ID가 있습니다.

콘텐츠 배포를 늘리고 참여를 높이기 위해 다음 두 개의 태그를 추가할 수도 있습니다.

태그	설명
og:type	콘텐츠의 미디어 유형입니다. 이 태그는 뉴스피드에 콘텐츠가 표시되는 방식에 영향을 줍니다. 유형을 지정하지 않는 경우 기본값은 website입니다. 각 URL은 단일 개체여야 하므로, 여러 og:type 값은 가능하지 않습니다. 모든 개체 유형은 개체 유형 참조에서 확인할 수 있습니다.
og:locale	리소스의 언어입니다. 기본값은 en_US입니다. 다른 언어로 번역 기능을 사용할 수 있으면 og:locale:alternate도 사용할 수 있습니다. 현지화에 대한 문서에서 지원되는 언어에 대해 알아보세요.

모든 표준 개체 속성은 개체 속성 참조에서 확인할 수 있습니다.

마크업 테스트

Facebook 크롤러에 마크업이 표시되는 방식을 보려면 공유 디버거에 URL을 입력합니다. 오류나 경고 외에도 크롤러가 스크랩하는 메타 태그가 표시됩니다.

디버거에서는 페이지의 스크랩도 트리거하므로, HTML에 오류가 있는 경우 디버거를 사용하여 콘텐츠를 업데이트할 수 있습니다. 자세한 내용은 개체 업데이트를 참조하세요.

미디어 콘텐츠 유형

콘텐츠에 오디오, 동영상 또는 위치 정보가 포함된 경우 마크업을 추가할 수 있습니다. 모든 표준 개체 속성은 개체 유형 참조를 확인하세요.

동영상

모든 콘텐츠 유형에 대해 og:video를 사용할 수 있습니다. 이 섹션에서는 추가 태그를 사용하여 Facebook에서 동영상의 모양을 최적화하는 방법을 설명합니다. Facebook에서는 mp4와 Flash 동영상을 모두 지원합니다.

og:video:url과 og:video:secure_url 태그 모두에 보안 URL을 사용하여 동영상을 뉴스피드에서 즉시 재생할 수 있게 만듭니다. 다양한 요인에 따라 동영상이 즉시 재생되지 않을 수도 있습니다.

메타 태그	설명
og:video	동영상의 URL입니다. 뉴스피드에서 즉시 동영상을 재생하려면 가능한 한 https:// URL을 사용해야 합니다.
og:video:url	og:video URL입니다.
og:video:secure_url	동영상의 보안 URL입니다. og:video에 보안 URL을 설정한 경우에도 이 URL을 포함합니다.
og:video:type	동영상의 MIME 유형입니다. application/x-shockwave-flash 또는 video/mp4입니다.
og:video:width	픽셀 단위로 된 동영상의 너비입니다. 동영상의 필수 속성입니다.
og:video:height	픽셀 단위로 된 동영상의 높이입니다. 동영상의 필수 속성입니다.
og:image	뉴스피드에서 고품질 미리 보기를 위한 이미지를 지정합니다.

이미지

두 개 이상의 이미지를 포함하는 콘텐츠에 이 속성 세트를 사용합니다. og:image를 가장 효율적으로 사용하는 방법에 대한 가이드는 공유 모범 사례를 참조하세요.

메타 태그	설명
og:image	이미지의 URL입니다. 이미지를 게시한 다음 업데이트하려면 새 이미지에 대해 새 URL을 사용합니다. 이미지는 URL을 기반으로 캐싱되며 URL이 변경되는 경우가 아니면 업데이트되지 않습니다.
og:image:url	og:image URL입니다.
og:image:secure_url	이미지의 https:// URL입니다.
og:image:type	이미지의 MIME 유형입니다. image/jpeg, image/gif, image/png 중 하나입니다.
og:image:width	픽셀 단위의 이미지 너비입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.
og:image:height	픽셀 단위의 이미지 높이입니다. 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.

...