ブログやWEBサイトのURLをSNSに投稿すると、「タイトル」「画像」などが自動的に表示されます。
ところが、個々のブログやサイトによっては画像をうまく読み取ってくれないことがあります。
今回はこの問題の解消についてです。
SNS投稿でアイキャッチが表示されない
ブログの記事をSNSに投稿すると、
Facebookの場合
◇タイトル
◇URL
◇画像
◇記事概要
この4要素を自動取得してくれます。
Google+の場合
◇タイトル
◇URL
◇画像
この3つです。
ところが設定がうまくいってないと、SNS側でうまく情報を取得してくれません。
特に画像です。
ブログ側がアイキャッチに指定した画像をスルーして、勝手にブログ主のプロフ画像や記事内の別な画像を取得してしまうことがあります。
これは何が原因かというと、そのブログやWEBサイトにOGP（Open Graph Protocol）を設定してないからです。
OGP設定で情報を正しく表示
OGP（Open Graph Protocol）。
「オープン・グラフ・プロトコル」と読みます。
SNSに投稿したときに、ページのタイトル・URL・概要・画像を正しく伝えるためにHTMLに記述するコードです。
既存のブログサービスだと、たとえば「はてなブログ」はデフォルトでOGPが設定されてるようです。
他のブログはよく分かりません。
WordPressの場合は、選んだテーマによって異なります。
たとえばブロガーに人気のある「Simplicity」や、アフィリエイター御用達の「賢威」などはデフォルトでOGPに対応しています。
通常のHTML&CSSで自作したWEBサイトは、自分でheadタグ内にOGPコードを入れる必要があります。
ご自身のブログやサイトがOGPに対応しているか否かの確認方法は、
◇ブラウザ上で右クリックし、「ページのソースを表示」をクリック
◇HTMLのコードが表示されるので、headeタグ内に以下のような記述があるか否か？
<meta property="og:title" content="＊＊＊" /> <meta property="og:type" content="＊＊＊" /> <meta property="og:url" content="＊＊＊" /> <meta property="og:description" content="＊＊＊" /> <meta property="og:site_name" content="＊＊＊" /> <meta property="og:image" content="＊＊＊" />
これが有れば大丈夫です。
WordPressはプラグインで対応
当ブログはWordpressで作られていて、ハミングバードというテーマを使ってます。
このテーマの場合、デフォルトでOGPの設定がなされてません。
なので、FacebookやGoogle+に記事を投稿すると、画像はアイキャッチを拾ってくれなくて、今まで手動で設定してきました。
いい加減に面倒くさくなってきたので、OGPのコードをheader.phpに記述しようかと思いましたが、WordPressにはこの設定を自動で行ってくれる便利なプラグインがありました。
＊WP SiteManager
https://ja.wordpress.org/plugins/wp-sitemanager/
これは多機能なプラグインで、「サイトマップ表示」やら「パンくずナビ表示」やらの機能がありますが、とりあえずOGP設定の機能だけ使えば十分です。
プラグイン入れるだけでOGPは自動で設定済となります。
当ブログは先ほどこれをインストールして、無事OGPも設定済となりました。
Facebook投稿時の画像非表示
ただ、Facebookへの投稿に関しては厄介な問題があります。
以下、Facebook公式ヘルプから
https://developers.facebook.com/docs/sharing/best-practices/#precaching
コンテンツが初めてシェアされる際、Facebookクローラーがシェア対象のURLからメタデータをスクレイピングし、キャッシュします。クローラーは、画像を少なくとも1回確認してからでなければ、レンダリングできません。つまり、コンテンツを最初にシェアする人は、表示される画像を確認できません。
意訳すると
「一回目の投稿時はあれこれ問題があって、画像は自動表示されないよ」
「二回目の投稿から表示されるよ」
ということです。
なんじゃそれはという感じですが、これがFacebook様の仕様だからしょうがないです。
これをクリアする手段はいろいろありますが、一番簡単なのはFB公式の「Open Graph Debugger」を使うことです。
＊Open Graph Debugger – Facebook Developers
＊Facebookのアカウントとパスワードが必要になります。
https://developers.facebook.com/tools/debug/
ここに行って、該当ページのURLを入れて「デバッグ」をクリックします。
仮にエラー表示が出ても、慌てず騒がず「Fetch new information」をクリックします。
すると記事からFacebook側が取得したデータが表示されます。
やっぱり画像は載ってませんね。
ここで「Scarpe Again」をクリックします。
意訳すると「もう一度読み込んでよ」というボタンです
やっと画像も読み込んでくれました。
これでOKです。
あとは普通にFacebookに投稿してください。
これを投稿前に毎回やるのは面倒くさいですが、これで画像がキッチリ表示されると思います。
