BloggerでTwitterカードを使用する方法

2017年からBloggerブログにはOGP設定の基本項目／URLとサイト名と説明文と画像の全てが自動で挿入されるように変わった。なのでTwitterカードのサイトへの一般的な導入と同じように、最低限、カードタイプをHTML編集のhead内に記載してTwitterの検証ツールに合格すればTwitterカードを使用できる。

<meta content='カードタイプ' name='twitter:card'/>

最も簡単な方法ではTwitterのカードタイプのソースコードを追加するだけで済んでしまう。追記：Twitterカードの仕様が変わり、簡単でもっと便利な方法が取れるようになった。基本項目を表示する場合のカードタイプは「summary」（サムネイル付き）か、「summary_large_image」（大きな画像付き）かのどちらかだろう。

<meta content='@Twitterユーザー名' name='twitter:site'/>

どちらの場合でもmetaタグに「twitter:site」でTwitterユーザー名（アカウント）を記載するとサイトとTwitterのアカウントが結び付けられるから推奨される。

<meta content='@Twitterユーザー名' name='twitter:creator'/>

カードタイプで「summary_large_image」の場合に限ってmetaタグに「twitter:creator」でTwitterユーザー名を記載するとサイトのコンテンツの作成者が示されるから推奨される。

Twitterカードのsummary_large_image（大きな画像付き）を使用した結城永人のTwitter

投稿｜結城永人

BloggerのOGP設定の基本項目は独自タグで出力されていてテーマ／テンプレートによって違うかも知れないけれども公式のものならばそのままで大丈夫だし、さもなければ他のサイトと同じように一般的な導入として細かく行わなくてはならないと思う。

<b:include data='blog' name='all-head-content'/>

BloggerのOGP設定の基本項目の独自タグは他にも幾つかのサイト情報を含んでいて、ファビコンやRSSやURLの正規化など、外すとそのままでは機能しなくなるからカスタマイズする際には注意しなくてはならない。Twitterカードはどのように表示されるか四つのサイト内容はページに合わせて出て来るけれども画像が特徴的になっていてトップページは最近の記事の全ての画像が配信される。Twitterカードで確認すると最後の記事（ブログの記事の並び方では最下部）の画像が取得されるので、HTMLの最初から順番に読み込まれて残ったものがツイートに反映するようだ。そして記事のページでは画像が付いていれば配信されるけれども付いてないと何も出て来ない。僕としては両方とも修正するようにカスタマイズしたいと感じた。トップページと画像なしの記事ページに固定の画像を付けておく。後者は一つ追加して新しく表示するけど、前者はブログが更新される度に切り替えられて最近の記事の最後の画像が出て来るから一つに止める。トップページに固定の画像を付ける方法BloggerブログのOGP設定の独自タグの下に固定の画像のソースコードを記載する。上だとツイートには反映しなくて最近の記事の最後の画像が取得されてしまうし、最初から順番に読み込まれて上書きされるためではないかと思う。OGP設定の独自タグの下に固定の画像を記載すると最近の記事の最後の画像からさらに優先されてツイートに反映するんだ。

<b:if cond='data:view.isHomepage'>
<meta content='画像URL' property='og:image'/>
</b:if>

トップページだけにソースコードを出力するBloggerの独自タグを使うとTwitterカードに固定の画像を配信するようにカスタマイズできた。画像なしの記事ページに画像を付ける方法固定の画像が出て来るようにするけれども画像ありの場合には除外されなければならない。さもないと全ての記事ページで固定の画像が出て来て同じになってしまう。画像ありの記事ページでは画像が自動で配信されるままにTwitterカードに読み込まれるように固定の画像のソースコードを振り分けて記載すると良い。

<b:if cond='data:blog.postImageUrl'>
<b:elseif cond='!data:view.isHomepage'/>
<meta content='画像URL' property='og:image'/>
</b:if>

※画像なしの記事ページはトップページ以外のページとして指定しているので、他の追加ページやアーカイブページなどでも同じように動作する。Bloggerの条件文の<b:if></b:if>を使ってOGP設定の画像がない場合にトップページ以外の指定で記事ページに固定の画像を配信するようにカスタマイズできた。同時に追加ページでも動作するし、画像が付いてなければ画像なしの記事ページと同じように固定の画像がツイートに反映する。トップページ以外で、しかも画像ありの記事ページを除外しているから記載する場所はOGP設定の独自タグの上でも下でもどちらでも構わないだろう。Twitterカードに画像を二つ追加したサンプル

<meta content='カードタイプ' name='twitter:card'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:view.isHomepage'>
<meta content='画像URL' property='og:image'/>
<b:elseif cond='data:blog.postImageUrl'/>
<b:else/>
<meta content='画像URL' property='og:image'/>
</b:if>

画像なしの記事ページの固定の画像のソースコードをBloggerのOGP設定の独自タグの下に記載したけれどもなぜかは上にGoogle+（サービス終了）のためのソースコードを追加しておきたくて区別するためだ。Google+での共有はTwitterとはトップページの複数の画像の読み込みの順番が反対で、最近の記事の最初が優先される。何もしなくてもOGP設定とサイトの表示から取り込まれて複数の画像は選択可能なので、最後に置いても全く反映しないわけではないけどもトップページに固定の画像を付けるならば折角だから最初に出て来て欲しいと思う。気持ちとしてはGoogle+はTwitterと違って画像がサーバーに長く保存されるからBloggerブログのトップページに関しては最近の記事が更新されても変わらなくなるし、すると古い記事の画像のままのリンクからトップページに入って新しい記事の画像を目にした訪問者が期待外れだと落胆しないともかぎらないので、トップページの共有での固定の画像そのものはTwitterよりも必要性が高かった。Google+も加味したTwitterカードのサンプル

<meta content='カードタイプ' name='twitter:card'/>
<b:if cond='data:view.isHomepage'>
<meta content='画像URL' property='og:image'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:view.isHomepage'>
<meta content='画像URL' property='og:image'/>
<b:elseif cond='data:blog.postImageUrl'/>
<b:else/>
<meta content='画像URL' property='og:image'/>
</b:if>

トップページの固定の画像をGoogle+のためにOGP設定の独自タグの上にも記載した。Twitterカードのために下に記載した分と重複するけれども二つを一つに纏めることができないから苦肉の策だ。Google+でのBloggerブログのトップページの共有画面で真っ先に表示されるので、最後に表示されるよりも選択し易くなるはずだ。Twitterカードには何の影響もないし、Google+での共有も複数の画像は選択可能だから固定の画像は一つ付いていれば機能は変わらないけれどもトップページの最近の記事の後から更新されれば消えてしまうしかない画像をGoogle+でなるべく使用されないようにしておきたくて固定の画像が共有画面で真っ先に表示される形を取っている。