BloggerでTwitter Cardを設定する

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

Twitter Card

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

TwitterCard

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

追加コード

<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:type website article profile ページ種類 ※2 ※3
og:site_name data:blog.title サイト名(ブログ名)
og:locale ja_JP ロケール 日本語
twitter:card summary 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アカウントと紐づく

参考

コメント: 0

コメントを書く