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 を編集=Twitter カード用のコード記載


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


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


Twitter カード用のコード挿入位置



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


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


Twitter カード summary



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



<応用 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>



Twitter カード large image


上の画像が '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・概要・アイキャッチ画像が反映される(下写真参照)。

コメント