BloggerでTwitter Cardを設定する

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

Twitter Card

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

TwitterCard

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

追加コード

OGP対応<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#";>

...

<!-- OGP -->
<b:if cond='data:view.isSingleItem'>
  <meta content='article' property='og:type'/>
<b:else/>
  <meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ja_JP' property='og:locale'/>
<meta content='summary' name='twitter:card'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>

...

</head>

<head>タグ内に追加する(<head>にprefixも追加する)

確認

下記サイトでBloggerのURLを指定してカード確認することができます。

確認できたら、実際にツイートして確認してみてください。

補足

種別タグ説明備考
og:url-URL※1
og:title-ページタイトル※1
og:description-説明※1
og:image-ページのメイン画像※1
og:image:width-メイン画像の幅未指定
og:image:height-メイン画像の高さ未指定
og:typewebsite article profileページ種類※2 ※3
og:site_namedata:blog.titleサイト名(ブログ名)
og:localeja_JPロケール日本語
twitter:cardsummary summary_large_imageカード種類他にも種類あり
twitter:site@usernameサイトのユーザ名@bugbugnow
twitter:creator@username執筆者のユーザ名@bugbugnow

※1:all-head-content内のopenGraphMetaDataで定義済みです
  変更を加えたい場合、all-head-content全体を直接記述する
※2:プロフィールページがある場合、個別に分岐して指定する
※3:blogの指定でFacebookでエラーが出力される
  websiteの方が無難?
※FacebookのOGP設定する場合、アプリID必要のため、Facebookアカウントと紐づく

参考