No.40
【Facebook】ホームページのサムネイル画像を変更する
Facebookで表示されるHPの画像を変えたい！
Facebookでホームページをシェアしたりリンクを貼り付けると、そのホームページのサムネイル画像が表示される。ところがこの画像がくせ者で、なかなか自分の望んだように表示されない。この記事を見ている人も、きっとトラブルが起きて調べているからこのページに辿り着いたのだと思う。 ：D
本来、このサムネイル画像に表示されるべき画像はOpen Graph protocolによって定められたogタグによって指定される。一般的なブログなどでは自動的に設定されるようだけど、特に気を使ってない個人のサイトなどではこのタグは未設置のことが多い。となると、サイト側では困ってしまうので何らかの手段で表示する画像を探してくる。
Facebookはこのあたりのロジックにクセがある。加えて処理高速化のためかFacebook自体が画像（情報）のキャッシュを持ったりするので、ホームページの変更が反映されないという悪さもしてくれる。
一応基本を説明しておくとおおざっぱに以下の順で画像が選ばれる。
- ogタグにより指定された「大きな」画像
- そのページ中の「大きな」画像
- Facebook神のお導きのまま
曖昧な書き方なのは勘弁して欲しい。しょっちゅう仕様変更がある上に、設定してもそれが確実に反映されるとは限らないからだ。
基本的に有効な手段としてはogタグで大きい画像を指定すること。高さは200pxがほぼ下限で、Facebookの推奨する縦横比は1:1.91なので、400×200pxくらいの画像が最低でも欲しい。
タグの書き方としては下記となる。画像のURLはFQDNでないと認識されないので注意。
<meta property="og:image" content="サムネイル画像のFQDN">
先に書いたように、Facebookはサムネイル画像をキャッシュする。そのため、ホームページ側で変更しても反映されない。そんなときは下記のデバッグツール画面で情報を更新することでキャッシュ情報を更新して画像の差し替えを試みることができる。
情報を更新したいページのURLを入力して「Debug」ボタンを押すとそのページのキャッシュ情報が表示される。情報を更新したい場合は続けて「Fetch new scrape information」を押そう。Facebookがページ内容を収集し直して情報を更新してくれる。
まあ、これでも反映されないことはしょっちゅうなので、その場合は酒でも飲んで寝てしまうか、新しいURLで登録し直そう。