2018-05-05T01:44:49Z

BloggerでTwitter Cardを設定する

Bloggerに自作のソーシャルボタンを配置する」に続いて、BloggerのSNS対応の第2段目として、Twitter Cardに対応します。

Twitter Cardを追加

TwitterにコンテンツのURLを付けてツイートすると以下のようなカードを表示することがあります。カードを表示するためには、ウェブページ側にメタタグを設定する必要があります。メタタグを設定すれば、他人のツイートした投稿にもカードが挿入されます。
TwitterCard

OGP(Open Graph Protocol)は、Twitter以外でも使用されているプロトコルですが、本記事ではTwitterのみを対象にします。Facebookよくわからないです。

追加コード

以下のコードをBloggerの<head>タグに追加します。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<!-- OGP -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <meta property="og:type" content="blog" />
  <meta property='og:title' expr:content='data:blog.pageTitle'/>
  <b:else/>
  <meta property="og:type" content="article" />
  <meta property='og:title' expr:content='data:blog.pageName + " - " + data:blog.title'/>
  <!--meta property='og:image' expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url'/-->
</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'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<meta name='twitter:card' content='summary'/>
<meta name='twitter:site' content='@bugbugnow'/>
<meta name="twitter:creator" content='@bugbugnow'/>

...

</head>

確認

Card validatorに設定したBloggerのURL指定してカード確認することが出来ます。確認出来たら、実際にツイートしてみて確認ください。

参考

 コメントを書く