【Web】Bloggerのテーマに必要最低限の変更でTwitter Cardを追加する

投稿日:2020年8月3日
最終更新日:2020年8月3日

Bloggerのテーマにツイッターカードを表示したい

ひっそりと立ち上げた歴史スポットを巡るブログ「神社・仏閣・城ハンター」だが、使用しているBloggerのテーマはTwitterカードに対応していないことに気づく。Twitterカードとは、以下のようにブログ記事などのURLをツイートに含めた時に、サイトのアイキャッチ画像やタイトルなどが表示される機能。この画像をクリックするとWebサイトに飛ぶ仕組みになっている。

これがあるだけでぐっと見栄えが良くなるので、今回はBloggerのテーマにTwitterカードを表示させる最低限の手順をメモしておく。特に難しいことは無く、テーマのhtmlに1行コードを入れるだけなので、10分くらいでできるはず。

 

テーマのhtmlを変更

まず、Bloggerの管理画面を開き、テーマから以下のボタンをクリックする。

すると以下のようなメニューが表示されるので「HTMLを表示」をクリックする。テーマのhtmlをいじるのが不安な人は「バックアップ」をクリックして、現在のテーマを保存しておけば後で復旧できる。

これでテーマのhtmlを編集できるようになるので、<head></head>の間のどこかに、以下のコードを1行追加するだけ。

<meta name='twitter:card' content='summary_large_image'/>

私は<title>の上のあたりに追加した。ちなみに、summary_large_imageをsummaryに変えると、ツイートしたときのTwitterカードのレイアウトが変わり、画像が少し小さめになる。あとは、右上の「保存」ボタンをクリックしてテーマを保存する。

これでブログがTwitterカードに対応した。

 

Twitterカードの表示を確認する

ツイートする前に、Twitterカードの表示を確認したい…という場合は、Twitterが公式に提供しているCard Validatorというツールを使う。

使い方は簡単で、Card URLに表示したいブログ記事などのURLを入力して「Preview card」をクリックすると、Card previewの部分に、実際に投稿した際にどのような表示になるか確認できる。無事にTwitterカードが表示されていることが確認できた。

そのうち、表示を変えるオプションも試してみてブログに書こうかなと思う。

 

参考サイト

以下のツイッターの公式ページに説明が載っています。より詳しいオプションなど知りたい方は参照してみてください。

https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started


投稿者: wakky

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください