BloggerでTwitter Cardを設定する
Bloggerに自作のソーシャルボタンを配置するに続いて、BloggerのSNS対応の第２段として、Twitter Cardに対応します。
Twitter Card
TwitterにコンテンツのURLを付けてツイートすると以下のようなカードを表示することがあります。カードを表示するためには、ウェブページ側にメタタグを設定する必要があります。メタタグを設定すれば、他人のツイートした投稿にもカードが挿入されます。
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を指定してカード確認することができます。
- Twitter: Card validator
- Facebook: デバッガー - 開発者向けFacebook
確認できたら、実際にツイートして確認してみてください。
補足
| 種別 | タグ | 説明 | 備考 |
|---|---|---|---|
| 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アカウントと紐づく