BloggerでのOGP設定

BloggerでもOGP設定したいという要望に応えたときのメモです。

BloggerでのOGP設定

OGPの設定

次のプロパティは必須です: og:url, og:type, og:title, og:image, og:description, fb:app_id

<!-- OGP 共通 -->
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/'>
<b:else/'>
<meta property='og:title' expr:content='data:blog.title'/'>
<meta property='og:type' content='website'/'>
</b:if'>
 
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
 
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>
 
<!-- og:image -->
<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<meta property='og:image' expr:content='&quot;http://blogger-entry-image.appspot.com/?s=s900&amp;u=&quot; + data:blog.url'/>
<b:else/>

</b:if>
<!-- Facebook用設定 -->
<meta property='fb:app_id' content='15桁の数字'/>

 
fb:app_idの取得方法
 

Twitterカードの設定

<meta name='twitter:card' content='summary_large_image'/>
<meta name='twitter:domain' expr:content='data:blog.homepageUrl'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<meta name='twitter:image:src' expr:content='data:blog.postImageUrl'/>
<b:else/>
<meta name='twitter:url' expr:content='data:blog.homepageUrl'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:image:src' content='Image URL'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
</b:if>