Blogger で Twitter カードを使用する方法＝コピペで OK

Blogger で Twitter カードを使用するためのコード

Google が提供している Blogger はデフォルトのままだと、Twitter カードに対応していないため、ユーザ自身でカードを表示させるためのマークアップを実装しなければならない（Facebook の投稿にはデフォルトで対応している）。

コードの記述が絡むため難しく感じる人も多いだろうが、基本的には、以下のコードをコピペするだけで対応可能だ。

なお、'@あなたのアカウント' 部分（2か所）には、自身の Twitter アカウントを入れる必要があるので注意されたい（ '@your_account' など、半角英数字）。



<meta content='summary' name='twitter:card'/>
<meta content='@あなたのアカウント' name='twitter:site'/>
<meta content='@あなたのアカウント' name='twitter:creator'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>



このコードを、「テーマ」＞「HTML を編集」で開いた画面で、指定箇所（</head>の直前が無難）に挿入して保存するという手順になる。

ただ、この作業する前に、まずは「バックアップ」の項目から、コードデータをダウンロードして保存しておこう。こうすることで、「不測の事態」に備えることができる。
ちょっとしたミスでサイト自体が開かなくなったり、レイアウトが崩れる原因にもなるため、今回の作業は単純なコピペではあるが慎重を期されたい。


バックアップ完了後、「HTML を編集」からコード・エディタ画面を開いて、</head> の直前にコードをコピペしよう。

上イメージのようにペーストしたら、右下の「保存」ボタンを押して、作業はあっという間に完了だ（時として、「保存」がうまく完了しないというエラーが出るようだが、問題ない模様）。


これで、実際にツイートすると、下の画像のように表示される。

記事内にイメージ画像がある場合、左側にサムネイル表示され、また、記事の「タイトル」が太字で表記されて、その下に「検索向け説明」が続く形式になる。

＜応用 1 ＝ 大きな画像を使いたい場合＞

バリエーションとして、'summary' の部分を 'summary_large_image' に置き換えることで、イメージ画像をより大きく表示させるカードタイプに変更することができる。


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@あなたのアカウント' name='twitter:site'/>
<meta content='@あなたのアカウント' name='twitter:creator'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta content='800' property='twitter:image:width'/>
<meta content='418' property='twitter:image:height'/>
</b:if>

上の画像が 'summary_large_image' を使用した場合の一例。イメージが際立って、よりキャッチ―にアピールできる。
画像を使った記事が多い場合、large_image にした方が訴求力が高いだろう。

＜応用 2 ＝ ホーム専用の画像を用意する＞

ホームページ（スタートページ）向けに専用の画像を用意しておくと、ホームにリンクされた時に指定の画像を表示させることも可能だ。


<meta content='summary_large_image' name='twitter:card'/>
<meta content='@あなたのアカウント' name='twitter:site'/>
<meta content='@あなたのアカウント' name='twitter:creator'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.url' name='twitter:url'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='https://2.bp.blogspot.com/example/s1600/ホーム専用画像.png' name='twitter:image'/>
</b:if>
<meta content='800' property='twitter:image:width'/>
<meta content='418' property='twitter:image:height'/>



上記の <meta content='https://2.bp.blogspot.com/example/s1600/ホーム専用画像.png' name='twitter:image'/>（この URL は例なので参照しないように！） が、指定画像へのリンクになっている。
「ホーム専用の画像」を任意の記事にあげておいて、リンクさせると良いだろう。
画像サイズは、横 800ピクセル、縦 418ピクセルで作成すると、キレイに収まるはずだ。

この作業をしなくても、ホームへのリンク時には任意の画像が表示されるが、意図しない画像が選択されるため、できればホームへのリンク用に画像を用意しておくことが望ましい。

また、投稿内に画像が無い時にも、このホーム用イメージが表示されるようになる。



＜確認作業＞

最後に、Twitter がオフィシャルで提供している「Card validator」で、表示のテストをして終了となる。

このバリデータで、ホームや記事サイトなどいくつかのページ URL を入力して、エラーが起きないか確認できる。

また、プレビュー画面では、実際にどのように Twitter 上で表示されるかを見ることも可能だ。

＜最後に＞

繰り返しになるが、上記コード内、「@あなたのアカウント」には、自身の Twitter アカウントを入れておこう。また、ホーム専用の画像を使いたい場合は、自身でアップロードして URL を間違えずにリンクさせる必要がある。
この2点にさえ留意すれば、基本的にコピペで乗り切れるはずだ。なお、入力文字はすべて半角になるので注意されたい。


加えて、いざという時に備えてバックアップは必ず取るようにしたい。バックアップはデジタル作業の基本なので、常に心掛けたいものだ。ちなみに、私は常に複数のバックアップデータを保存するようにしている。


3通りの方法（3種類のコード）を記載したが、作業するのは一回だけ。
どのコードもうまく機能すると思うが、予期せぬエラーなどあればコメント欄で教えていただきたい。
この記事が皆さまのお役に立てれば幸いだ。


ちなみに、Facebook については、デフォルトで最低限の OGP 対応がなされており（og:url、og:title、og:description、og:image が自動的に記述される）、投稿においてタイトル・URL・概要・アイキャッチ画像が反映される（下写真参照）。

＜参考サイト＞
・Twitter デベロッパー向けサイト（ツイートをカードで最適化する）
・GitHub

＜スポンサードリンク＞
・スマートフォン 売れ筋ランキング