1. 홈
  2. 질의 응답
  3. Facebook 공유 용 'og'(오픈 그래프) 메타 태그 사용 방법

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

2012-07-23 7 views

답변

36

Facebook은 Open Graph Protocol을 사용하여 링크를 공유 할 때 표시 할 항목을 결정합니다. OGP는 귀하의 페이지를보고 어떤 내용을 표시할지 결정하려고합니다. 우리는 실제로 손을 빌려 줄 수 있습니다. 페이스 북은 우리 페이지에서 취해야 할 것을 말합니다.

우리가하는 방식은 og:meta 태그입니다. 당신은 당신의 HTML 파일의 <head> 이러한 또는 유사한 메타 태그를 배치해야합니다

<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">

-

태그는 다음과 같이 보인다. 자신의 값으로 대체하는 것을 잊지 마십시오!

자세한 내용은 Facebook에서이 메타 태그를 사용하는 방법에 대한 자세한 내용을 참조하십시오. '당신은 페이스 북이 당신의 URL을 보는 방법을 볼 수 Debugger를 사용할 수 있고, - 페이스 북이 우리에게이 메타 태그를 처리 할 때 우리를 도와 수있는 좋은 작은 도구를 제공 https://developers.facebook.com/docs/opengraph/tutorial/

- 여기가에서 자습서 중 하나입니다 문제가 있는지 알려줄 것입니다.

메타 태그를 변경할 때마다 Debugger을 통해 URL을 다시 입력해야 페이스 북이 자신의 서버에 캐시 된 모든 데이터를 지울 수 있습니다. URL.

출처

2012-07-23 16:43:34 Lix

+0

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

330

사용 :

<!-- 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="" />

은 = 내용 채우기 "..."페이지의 내용에 따라.

자세한 내용은 18 Meta Tags Every Webpage Should Have in 2013을 참조하십시오.

출처

2013-05-29 20:03:26 CarlosPinedaT

+0

'author' 태그에 저자 이름 또는 프로필 URL에 대한 링크가 있어야하는지 알고 있습니까? – tobek

+0

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

+0

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

27

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

OG 태그 (Open Graph) 태그는 메타 태그와 유사하게 작동하며 배치해야합니다. HTML 파일의 HEAD 섹션에 있습니다. OG 태그를 효과적으로 사용하는 방법에 대한 자세한 내용은 Facebook's best practises을 참조하십시오.

출처

2014-10-02 10:26:46

+1

고마워요 @ 모그다드 그에 따라 내 대답을 확장했습니다. –

+0

링크가 깨졌습니다. 유감스럽게도! –

관련 문제

 관련 문제