意味なくUriah Heep
Facebookの投稿にホームページのurlを貼りつけたときに、その画像(アイキャッチ画像/サムネイル)がきれいに表示されないことがありませんか?
私は自分のホームページをFacebookで投稿しようとしたときに、たいてい気に入らない画像が出てきたり、「画像が壊れたマーク」が出てきたりして困っていました。うまくいくときもあり、なんとなくFacebookが勝手に調整してくれるのだと思っていました。
現象についていろんなサイトを参考にし、やっと一段落ついたので、理解したことを記しておきます。参考サイトもリンクさせていただきます。(なお、ここではhtmlとcssで書いたホームページを対象としています。)
(詳しい方の目に留まったら大変恥ずかしいのですが、内容に誤りがあったらお知らせください。)
まずは、検索文言でバッチリ出てきたこの記事です。
【ここに書いてあること】
・『Facebookデバッガー』にて「スクレイピング」をすると、表示されるようになる。
・それでも表示されないときには、画像の大きさやファイル形式を確認しよう。
【疑問】
・Facebookデバッガーとは(。´・ω・)?
(→項番2)
・このとおりにやってもうまくいかなかった。(。´・ω・)?
(→項番3)
【ここに書いてあること】
Facebookのシェアデバッガーというページに行って、この記事の通りに実行すればよいです。
https://developers.facebook.com/tools/debug/ に
対象urlを入力し、実行するだけです。
ただし、
【疑問】
・一体何がどうなるの?
下になんだかわからないエラーやワーニングがでている。(。´・ω・)? (→項番3)
・このとおりにやってもうまくいかなかった。
(。´・ω・)?(→項番3)
ここに来るまで苦労しました。この記事は一番わかりやすく、信憑性が高いと思います。
【ここに書いてあること】
「OGPとは「Open Graph protocol」の略で、Facebookでページをシェアする際に重要になるタグ。」
私はFacebookでシェアしたいホームページをhtmlとcssで書いています。そもそもhtmlのソースに、Facebookのための「OGP タグ」を書き込まなければならなかったのです。
その上で、項番1のスクレイピングを行うべきでした。
【解決】
サムネイルは思い通りに表示されました。
いまさら感アリアリですよね、恥ずかしい。SEO対策勉強は、何となく後回しになっていましたが、こんなところで影響が出るとは知りませんでした。WordPressなどは、標準でこういう機能がついているのでしょうか。
一番目の記事は、多分OPG設定されているとの前提で書かれているのでしょう。利用させていただいているのに何ですが、章立てや文章など、なかなか難しいものですね。
Facebookと同様に、TwitterにもOGPが必要だそうです。
この記事の「カード」は、アイキャッチ画像をいかにTwitterに表示させるか、というタグです。
その他、他のSNSと共用できるタグもあります。(項番3のタグなど)
WordPressの例も載っています。
Facebookにサムネイルを思い通りに表示するには、
①fb:admins に記載する値(「OGP タグ」の一部)を取得する。(資料5)
②表示したいhtmlファイルに「OGP タグ」を書き込む。必要であれば、Twitter「カード」も追加。サーバにupload。(資料3、4、6)
③Facebookのシェアデバッガーにて、対象urlを検査する。これでOKのはず。(資料2)
④エラーがないのにうまくいかないときは、Facebookのシェアデバッガーにて、「スクレイピング」をする。画像ファイルの大きさなども確認する。(資料1)
という手順になるかと思います。
色々な無料技術系サイトがありますが、検索文言でヒットするからといって、すぐ解決できるとは限りませんね。「Facebookの投稿にサムネイルが表示されない」という現象から「OGPタグの設定がされていない、または間違っている」という原因にたどり着くのには結構時間がかかりました。
記事は、
・自分が今、必要としている情報でないことがある。
・記事が書かれた時期によって、その情報が当てはまらない場合がある。
・読み手がかなりわかっていることを前提に書かれている場合、はなから理解しにくいことがある。
それらに注意しつつ情報を紐解きながら悩みを解決していくのはストレスであり、(時間のある者にとっては)楽しみでもあります。記事を公開しておられる方々に感謝しています。(ご支援情報歓迎です。)
【ところが。】ホームページはよかったのですが、このブログサイトは「Googleサイト」で作成しています(へそ曲がりですね)。こちらhtml自動生成なので、「OGP タグ」を書くことができません。Googleヘルプで調べると、「PageMap データをサイトマップに追加する」とか何とか出てきましたが、難易度が高そうです。よって、しばらくこのブログサイトのサムネイルは変なままで行くことになりました。ガクッ。
先は長いなあ!
(2019/07/23)