Facebook 공유에 'og'(오픈 그래프) 메타 태그를 사용하는 방법


118

Facebook은 내 사이트에서 모든 사진을 가져옵니다.

그 페이지에있는 한 장의 사진 만 공유하고 싶습니다.

og메타 태그 에 대해 들었는데 어떻게 넣을지 모르겠어요.

답변:


355

사용하다:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

페이지의 내용에 따라 내용 = "..."을 채우십시오.

자세한 내용은 모든 웹 페이지가 2013 년에 가져야하는 18 개의 메타 태그 를 참조하십시오 .


author태그에 작성자 이름이 있어야 하는지 아니면 프로필 URL에 대한 링크가 있어야 하는지 알고 계십니까?
tobek

둘 다 가능하다고 생각합니다. Google 검색 페이지에서 게시물의 왼쪽에 프로필 이미지를 표시하려면 Google+ 프로필 링크를 제공해야합니다.
jurihandl

메타 태그 author는 웹 사이트의 작성자 또는 현재 기사의 작성자를 의미합니까 (블로그 기사에서의 사용 예)?
LuiGi

이것은 좋은 실행입니까? Google / Facebook / Twitter에서 오류를 찾지 못합니까?
Jeromie Devera 2014

2
1) Facebook은 <meta name = "author"> 태그를 읽고 누군가 페이지를 공유 할 때 미리보기에 표시합니다. 2) Facebook은 이제 <meta property = "article : author">를 지원합니다 (자세한 내용은 giannopoulos.net/ 2015 / 06 / 20 /… ) Facebook 프로필에 대한 링크를 표시합니다 (실제로 article : author에 링크를 넣은 경우). 3) 이제 Google은 "Rich Snippets"형식의 풍부한 데이터를 찾습니다. ( developers.google.com/structured-data )
MarkG

41

Facebook은 Open Graph Protocol 을 사용하여 링크를 공유 할 때 표시 할 항목을 결정합니다. OGP는 페이지를보고 어떤 콘텐츠를 표시할지 결정합니다. 우리는 손을 빌려주고 실제로 페이스 북에 우리 페이지에서 무엇을 가져갈 지 말할 수 있습니다.

우리가하는 방법은 og:meta태그를 사용하는 것입니다.

태그는 다음과 같습니다.

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

이러한 또는 유사한 메타 태그를 <head>HTML 파일 에 배치해야 합니다. 자신의 값으로 대체하는 것을 잊지 마십시오!

자세한 내용은 Facebook이 문서에서 이러한 메타 태그를 사용하는 방법에 대한 모든 것을 읽을 수 있습니다. 여기 튜토리얼 중 하나가 있습니다-https: //developers.facebook.com/docs/opengraph/tutorial/


Facebook은 이러한 메타 태그를 다룰 때 도움이되는 아주 작은 도구를 제공합니다. 디버거 를 사용하여 Facebook이 URL을 어떻게 보는지 확인할 수 있으며 문제가 있는지 알려줄 수도 있습니다.

여기서 주목해야 할 점은 메타 태그를 변경할 때마다 디버거를 통해 URL을 다시 공급해야 Facebook이 서버에 저장된 URL에 대한 모든 데이터를 지워야한다는 것입니다.


설명에 html 태그가 있습니다.이 문제를 해결하는 방법을 알고 있습니까?
Neil

28

메타 생성을위한 도구를 만들었습니다. Facebook, Google+ 및 Twitter에 대한 항목을 사전 구성하며 여기에서 무료로 사용할 수 있습니다. http://www.groovymeta.com

질문에 조금 더 대답하려면 OG태그 (오픈 그래프) 태그는 메타 태그와 유사하게 작동하며 HTML 파일의 HEAD 섹션에 배치해야합니다. OG 태그를 효과적으로 사용하는 방법에 대한 자세한 내용 은 Facebook의 모범 사례 를 참조하십시오.


1
감사합니다 @Mogsdad 나는 그에 따라 내 대답을 확장했습니다.
Louis Otto

1
안타깝게도 링크가 끊어졌습니다!
Vincent Sels 2017-08-12
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.