Bloggerの記事をTwitterで共有する時にサムネイルも表示されるようにする方法 ~ ケイの雑記

WebサイトのURLをツイートに貼って投稿すると、以下のように記事のサムネイル画像やタイトルが表示されると思います。このように、SNS等で記事を共有するときにサムネイル画像やタイトルを用いてリンク先を見やすくする手法を「OGP」（Open Graph Protocol）と言います。

テーマにもよるかもしれませんが、BloggerではこのOGPが設定されていないことがあります。Twitter上でサイトや記事のリンクが共有された際のクリック率を上げるためにも、OGPの設定はぜひしておいた方が良いです。

今回の記事ではBloggerでOGPを設定する手順について説明していきます。

■BloggerにOGP設定する方法

手順としては以下のことを行います。

1.　meta description の設定をする（検索向け説明を有効にする）

2.　サイト全体のOGP設定をする（ホーム用タグ）

3.　Twitterカードを設定する（個別記事用タグ）

1の meta description（検索向け説明）はWebサイトや記事の概要を説明するためのもので、検索結果の画面にてタイトルの下に表示されます。Bloggerではこの検索向け説明の設定が有効になっていない場合があるので、設定画面から有効にしておく必要があります。

検索向け設定を有効にするやり方は、Bloggerの管理画面で「設定」を開き、その中の「メタタグ」のところにある「検索向け説明を有効にする」をONにします。これにより検索向けの説明を自由に設定できるようになります。

検索向け説明を有効にできたら、2でサイト自体のOGP設定をして、3でTwitterカードが表示されるようにします。

OGPの設定としてはHTMLのhead内に以下のコードを記述します。なお、BloggerにてHTMLを編集するやり方はBloggerの管理画面で「テーマ」を開き、そこにある「HTMLの編集」（カスタムテーマを使用している場合は、「カスタマイズ」を押すと表示されるプルダウンメニューに「HTMLを編集」がある）を押すことでHTMLの編集画面が表示されます。

<!-- サイト全体のOGP設定 -->
<b:if cond='data:blog.pageType == "index"'>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content=' ここにサイトの説明を書く ' name='description'/>
<meta content=' ここにサイトの説明を書く ' property='og:description'/>
<meta content=' ここに画像(ファビコン等)のURLを貼る ' property='og:image'/>
</b:if>
  
<!-- Twitterカード -->
<meta content='summary' name='twitter:card'/>
<meta content=' ここに@から始まるTwitterアカウントのIDを書く ' name='twitter:site'/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
<!-- 投稿に画像があればその画像をサムネイル に設定、無い場合はデフォルト画像を表示 -->
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:elseif cond='!data:view.isHomepage'/>
<meta content=' 投稿内に画像がない時に代わりに表示させる画像のURLをここに貼る ' property='og:image'/>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

（Twitterカードにおける画像表示の記述に誤りがあったため修正しました：2022.08.27）

見辛くて申し訳ありませんが、コード内の下線が引かれている5カ所（サイトの説明やTwitterアカウントのID、画像のURLなど）は適宜書き換えてください。

画像のURLについて何を書けばいいか分からない場合は、適当に投稿を新規作成してそこにフリー画像などの好きな画像を載せ、記事の編集画面で「HTMLビュー」表示にするとその画像のURLが表示されるのでそれを書く、という手もあります。

このコードをBlogger自体のHTML編集画面のhead内に書くことでOGP設定をすることができます。

正しくOGPが設定されているかは Twitter developer を利用することで確認できます。

Twitter developer

にアクセスして自分のアカウントでログインし、自分のサイトや記事のURLをボックスに入力することで、ツイートにリンクを載せた時にどのように表示されるかを確認することができます。

以下のOGP確認ツールでも表示を確認できます。
https://ogp.buta3.net/

以上でBloggerのOGP設定は完了です（2021年5月時点での内容なので、将来的にBloggerの設定が変わった場合はこのやり方ではうまくいかない可能性もあります。また、もしかしたら一部不要な手順・コードもあるかもしれません）。

以下に参考にさせていただいたサイトを載せさせていただきます。

BloggerにOGPを設定する

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

BloggerにOGPを設定する方法