BloggerのTwitterカードの手早い表示方法

TwitterにサイトのURLを投稿した場合にタイトルや説明文や画像などが自動的に追加されるTwitterカードはサイトの設定が必要で、以前、一般的な方法とBlogger用の方法を取り上げたんだ。Bloggerについては公式テーマならば初期値のOPG設定（FacebookでのURL投稿のカード表示）と結び付けるのがTwitterカードを表示するための簡単な仕方なんだけれども最近はブログのソースコードに一行を追加するだけでも大丈夫に変わったから改めて取り上げておきたい。以前は画像なしのページがエラーで止まってしまうために一行を追加するだけという手早い表示方法は可能でもちょっと使い辛かったんだ。BloggerのTwitterカードの一行追加の手順

ブログのソースコードの編集

Twitterカードの実装の検証

ブログのソースコードの編集

テーマ｜Blogger

Bloggerのウェブの管理画面の「テーマ」を開いてブログのテンプレートのソースコードを編集する。右上のメニュー（︙）の「HTMLを編集」を使ってオンラインか「バックアップ」と「元に戻す」（テンプレートのXMLファイルのダウンロードとアップロード）を使ってデバイスのHTMLエディターなどのアプリでオフラインで行える。旧ヴァージョンの管理画面は「テーマ」の「HTMLの編集」か「バックアップ/復元」を使うことになる。通常の画像サイズの場合<head> 中略 <b:include data='blog' name='all-head-content'/> <meta content='summary' name='twitter:card'/> 中略 </head>※太字は追加するソースコード、帯文字はカードタイプを示す。大型の画像サイズの場合<head> 中略 <b:include data='blog' name='all-head-content'/> <meta content='summary_large_image' name='twitter:card'/> 中略 </head>※太字は追加するソースコード、帯文字はカードタイプを示す。テンプレートのソースコードの冒頭のhead内を書き換える。Twitterカードに使用する画像サイズの大小によって二つのカードタイプに分かれるけれども追加する方法は同じだ。OPG設定のソースコードを出力するBloggerの独自タグのall-head-contentのnameのincludeタグがあってTwitterカードと共用できる。そこからブログの各ページのタイトルと説明文とURLと画像のデータが自動的に記載されるようになるので、直後にでもTwitterカードを設定するためのソースコードを置いておくと分かり易いと思う。テンプレートのソースコードを書き換えたら「HTML」は保存（下段のメニューの右端のフロッピーディスクの四角いアイコン）、「バックアップ」ならば「元に戻す」から編集済みのXMLファイルでサーバーのものを更新する。Twitterカードのソースコードにもう少し手を加えることもできる。ページタイプを指定する場合<head> 中略 <b:include data='blog' name='all-head-content'/> <b:if cond='data:view.isMultipleItems'> <meta content='website' property='og:type'/> <b:else/> <meta content='article' property='og:type'/> </b:if> 中略 </head> ※太字は追加するソースコード、帯文字はページタイプを示す。Twitterカードの画像サイズは通常しか選べないけれどもBloggerの振り分けの独自タグのifを使ってトップページなどの記事の抜粋が並ぶインデックスページは「website」（ウェブサイト）として、記事と追加ページは「article」（アーティクル／記事）として扱うようにOPG設定のページタイプのデータを追加することによってもTwitterカードは表示できる。ブログの表示には影響しないかも知れないけれどもOGP設定のページタイプは検索エンジンなどの機械向けにブログの情報を詳しく与えてサイト内容を把握し易くする。

参考サイト

Cards Markup Tag Reference

画像なしのページに固定の画像を追加するソースコード<b:if cond='!data:view.featuredImage'/> <meta content='固定の画像のURL' property='og:image'/> </b:if>※太字は追加するソースコード、帯文字は画像なしページのTwitterカードやFacebookのカード表示に使いたい画像URLを示す。Twitterカードを表示するソースコードは一行追加だけだとブログの画像なしページにはTwitterで用意された空の画像が付いてしまう。Bloggerの場合、トップページなどの記事の抜粋が並ぶインデックスページの全てと画像なしの記事と追加ページのカード画像は初期値で設定されてない。それを避けるためには固定の画像を自分で設定しておく必要がある。ソースコードはBloggerの振り分けの独自タグのifで画像なしページに限定して出力するようにする。そして固定の画像をブログのどこかのページかウィジェットに掲載するか、またはImgurなどの画像URLを提供するWebサービスに投稿するかしてから当該の画像のURLを取得して使う。所定のソースコードをTwitterカードを設定する一行か数行追加のソースコードと共に記載しておく。Twitterカードの実装の検証

Card validator｜Developer｜Twitter

ブログのTwitterカードの実装が上手く行ってツイートに反映するかどうかをTwitterのCard Validatorで確かめる。左側の空欄にブログのどこかのページのURLを入手して「Preview card」（カードを見てみる）のボタンを押すと右側に「Card preview」（試しのカード）と「Log」（記録）が出る。もしも上手く行かないと「Card preview」に太字で「Unable to render Card preview」（試しのカードは生成不可）とか「Log」に赤字で「ERROR」（失敗）なんて出て来るので、最初のブログのソースコードの編集が間違ってないかどうかを確かめながらやり直さなくてはならない。