SNSにブログのサムネイルが表示されなかった件

わたしは Facebook と ツイッター に、ブログを更新したことを投稿しています。
Facebook はこんな感じです↓

なんか、さみしいでしょ？
ブログのサムネイル画像が表示されないんですよ。

ツイッターは、ブログのURLを貼って、さらに画像を自分で貼っています。
こんな感じ↓

わたしの使っている「FC2ブログ」は、画像のリンクなど融通がきかないところがあるので、そのせいでサムネイル画像が表示されないのかなぁ・・・って思っていました。

ところが、「FC2ブログ」をＳＮＳにツイートしている他サイトは表示されています。なので、なにかすれば表示されるんだと思い調べてみました。

まずは、表示される他のブログのソースをのぞいてみました。それらのブログとは、使っているテンプレートが違います。

わたしのテンプレートはちょっと前のもので、さらに魔改造しています。結果、よくわかりませんでした。

つぎに、「FC2ブログ」の管理画面。
そのような設定はみつかりませんでした。（→ 実はあった！後術）

でぇ、素直に検索してみました。「SNSにサムネイルが表示されない」ってな感じで。
すると、「OGP (Open Graph Protocol)」なる設定が必要だとわかりました。

そこで、テンプレートに以下の meta タグを追加しました。

<meta property="og:title" content="<%topentry_enc_title>">
<meta property="og:type" content="article">
<meta property="og:description" content="<%topentry_description>">
<meta property="og:url" content="<%topentry_link>">
<meta property="og:image" content="<%topentry_image_url>">
<meta name="twitter:card" content="summary_large_image">

※「<%topentry_description>」らは、FC2ブログテンプレート用のタグです。

これでうまくいきました。

Facebook

ツイッター


その後、FC2ブログの設定をながめていたら「OGP」の設定項目を発見しました。
用語そのものをしらなかったのでスルーしていたのでした。
TOPページの画像はここで指定します。



まぁ、自動で上記のタグを挿入してくれるだけですけどね。
ツイッターで大きなサムネイルを表示するため、最後の「summary_large_image」だけはテンプレートに書き加えました。

テンプレートに meta タグを書くなんて、ワードプレスも同じなんでしょうね。
きっとこのブログのように設定できると思います。

サムネイルを表示できない人は、ぜひ試してみてください。

参考にしたページ

---

■ いまさら聞けない！OGPとは？
https://www.e-webseisaku.com/column/marketing/3947/

■ Twitterでリンクを貼った時にサムネイル画像や概要が表示されない問題を解決【Twitterカードの設定 twitter:card】
https://blog.remote-production.com/twitter-card-meta-tag/

■ FBデバッカー
https://developers.facebook.com/tools/debug/

■ ツイッター Card validator
https://cards-dev.twitter.com/validator

---

Dance Bar *Cute Grin*
https://maps.secondlife.com/secondlife/Tokyo%20Sea/28/107/2002