グーグルのブログ Blogger に Twitter カードを実装する

どのようにして Twitter カードを Blogger に加えるのか

ソーシャルメディア Google+ が来年4月に終了するので、ふと思いつき Twitter のアカウントを再取得して再開した。ブログ更新情報をツイートするのがひとつの目的で Twitter カードを利用することにした。Twitter カードとは Twitter 上での OGP 設定を指す。OGP とは Open Graph Protocol（オープン・グラフ・プロトコル）の略称で Facebook、Twitter、Google+ などのソーシャルメディアと連携し、シェアされたときに、ページのタイトル、概要、画像、動画などを正しく伝えるために HTML ソースに記述するタグ情報である。画像と動画が表示されるため、テキストのみより目立つという効果が期待される。使用しているグーグルのブログサービス Blogger には、Twitter に対してこの機能が備わっていないので実装することにした。導入方法はブログ運営情報サイト「Blogger101@ブロギングライフ」に詳しいので、そのまま援用させていただいた。ダッシュボードから「テーマ」「HTMLの編集」と進み </head> の上に以下のコードを追加した。

<!--START Twitter Card -->
<meta content='summary' name='twitter:card'/>
<meta content='@で始まるTwitter ID' name='twitter:site'/>
<meta content='@で始まるTwitter ID' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='デフォルト画像のURL' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!--END Twitter Card -->

コード内の「デフォルト画像の URL」は、記事に画像が含まれていない場合に使用する画像で、サマリーカードか、大きい画像付きサマリーカードにあったサイズの画像の URL を使用する。設定していないと URL をツイートに添付した時に画像が表示されないという。最後に Twitter Cards Validator で表示テストして問題がなかったので、実装が終了した。ブログ記事をツイートたところ、見映えが向上したのは言うまでもない。

  ツイート：さようなら 2018 年 安倍晋三が首相である不幸