cryde's blog: [HTML] Blogger에 Open Graph 적용하기

Blogger에 Open Graph 적용방법에 대한 내용을 정리합니다.

1. 블로그 관리 페이지 [테마 ⇒ 사용중인 디자인 ⇒ HTML편집]을 선택

2. 소스코드 상단에 아래와 같은 코드를 찾습니다.

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

3. 위 코드 마지막 부분에 아래 코드를 추가합니다.

xmlns:og='http://ogp.me/ns#'

추가된 코드

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

4. <head>...</head>의 제일 아래쪽(</head> 바로위)에 아래 코드를 삽입합니다.

<!-- BEGIN: Open Graph Meta -->
<meta content='blog' property='og:type'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<!-- END: Open Graph Meta -->

5. 참고
https://goo.gl/vTbwg5
https://goo.gl/rck6i9
https://goo.gl/8PbePd

페이지

[HTML] Blogger에 Open Graph 적용하기

댓글 2개: