ここは僕の冷蔵庫。後はあれして食べるだけ。

I love the frozen FOOD.

facebookネタです。
以前「facebookの投稿でURL指定するとサムネイルが出るが、その画像はどっからくるのん?」という記事をのせました。その続編です。

2話ぐらい書いてますので、是非下記をどうぞ。

参考 : facebookの投稿でURL指定するとサムネイルが出るが、その画像はどっからくるのん?

参考 : facebook投稿に入れるURL先情報確認

前回までのおさらい

html上にfacebook用のタグを書く

facebookでは、OGPのタグをみとるという話でした。
og:urlとか、og:imageなんかを拾ってくるよと。

参考 : facebookの投稿でURL指定するとサムネイルが出るが、その画像はどっからくるのん?

入れた後の確認方法

上記タグを入れた後、
https://developers.facebook.com/tools/debug/
で内容を確認しましょうというお話でした。
恐らく、ちゃんと出てない場合が多いので、しっかりみましょう。

うまくいかない時

先ほどのURL上でちゃんと確認したけれど、まったくでない時、どうしたらいいかを1つ2つ紹介です。

metaタグの位置をかえる

og:urlなどのタグを書いているところを変えましょう。
headタグ内で書くのがベストです。
経験的な話ですが、headタグに近ければいいってわけでもないです。過去記事等、色々ブログで拝見しますが、とりあえずhead内に書くようにしましょう。bodyの中だと、先ほどの確認サイトでエラーでかえってきますよ。

もう少し深い確認

https://developers.facebook.com/tools/debug/のサイトでやっても、イメージやタイトルが出てこない状態が発生したら、まずは、サイトの一番下にある

「Scraped URL See exactly what our scraper sees for your URL」

と書いてあるURLをクリックです。
そうすると、htmlタグがテキストファイルとして出てきます。
facebook上で、こんなHTMLを受信し、こっからogタグを抜きましたよっていう話です。

<html>~コンテンツ~</html>

さて、ここでもう1つ確認です。今、ogタグなどをいれたサイトのソースをみてみてください。
この2つをくらべてみてください。
なにかずれてるところありませんか?
たとえば、htmlタグの開始場所が違うとか。
htmlタグの場所が違う方は、本来あるhtmlタグ周辺をよくみてみてください(元のサイト側)。文字化けしているものがあるとか、タグが閉じていないとか、DOCTYPEの前にへんな空白があるとか。
結構手がかりがでてきます。
是非おためしあれ!

参考

参考記事