웹 마스터용 공유 가이드

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

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

오픈 그래프 마크업
마크업 테스트
Facebook 사용자 에이전트가 제대로 처리되는지 테스트
미디어 콘텐츠 유형

오픈 그래프 마크업

대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다. 크롤러가 웹사이트를 올바르게 공유하려면 서버에서 gzip과 deflate 인코딩도 사용해야 합니다.

이러한 오픈 그래프 태그가 없으면 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에 오류가 있는 경우 디버거를 사용하여 콘텐츠를 업데이트할 수 있습니다. 자세한 내용은 개체 업데이트를 참조하세요.

Facebook 사용자 에이전트가 제대로 처리되는지 테스트

브라우저를 엽니다.
사용자 에이전트를 Facebook 사용자 에이전트와 일치하도록 변경합니다. 사용자 에이전트 변경에 대한 자세한 내용은 http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/를 참조하세요.
- 개발 메뉴 > 사용자 에이전트 > 기타
- 사용자 에이전트를 facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)로 설정합니다.
문제 URL을 읽어들입니다.
사용자 에이전트를 모바일 브라우저의 사용자 에이전트(예: Safari - iPhone)로 설정합니다.
개발 메뉴 > 사용자 에이전트 > Safari — iOS 10 — iPhone
문제 URL을 읽어들입니다.
이것이 사용자 에이전트 문제인 경우 페이지가 3단계가 아닌 5단계에서 올바로 읽어들여집니다.

미디어 콘텐츠 유형

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

동영상

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

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

메타 태그	설명
`og:video`	동영상의 URL입니다. 피드에서 즉시 동영상을 재생하려면 가능한 한 https:// URL을 사용해야 합니다.
`og:video:url`	`og:video`와 같습니다.
`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`와 같습니다.
`og:image:secure_url`	이미지의 https:// URL입니다.
`og:image:type`	이미지의 MIME 유형입니다. `image/jpeg`, `image/gif`, `image/png` 중 하나입니다.
`og:image:width`	이미지 너비입니다(단위: 픽셀). 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.
`og:image:height`	이미지 높이입니다(단위: 픽셀). 이미지를 처음 공유할 때 올바르게 읽어들일 수 있도록 이미지의 높이와 너비를 지정합니다.

3D 자산

3D 게시물 오픈 그래프 공유 문서를 참조하세요.