電子書籍「こどものトリセツ」のランディングページを作りました
電子書籍「こどものトリセツ」のランディングページを、前から作ろうと思いつつ作りかけのまま放置してた。でも、完成させなきゃ意味がないので、昨日がんばってそれなりに形にしてみた。
が、OGPでimage設定してもFacebookに表示されない。
WordPressで作ったんだけど、とりあえず、ランディングページ1ページだけなので、テーマの index.php 内に以下のコードを書き足して ogp設定をしてみた。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="og:title" content="こどものトリセツ"> <meta property="og:description" content="こうすればこどもが動く！イライラを激減させる簡単テクニック集。"> <meta property="og:url" content="http://kodomonotorisetsu.satoshis.jp"> <meta property="og:image" content="http://kodomonotorisetsu.satoshis.jp/wp-content/uploads/2014/11/card-600x600.png">
これで指定した画像が表示されるはずだと思ってFacebookに投稿したんだけど、og:image で設定したはずの画像が表示されない。
いろいろと試行錯誤してたら、こちらのページに行き当たった。
≫【Web制作】FacebookのOGP設定をプラグインなしで設置する方法 - ゆめぴょんの知恵
Facebookデバッガーというサービスがあるらしい。
ここにアクセスしてみる。
テキストボックスにサイトのURLを入力して「Debug」をクリックすると、次のような表示になる。
この画像では og:image のところに既に指定した画像が表示されているけど、最初に試した時は指定した画像とは違う、電子書籍のページをキャプチャした画像が表示されていた。
どうやら、Facebookのサーバーに、表示されている内容がキャッシュされているっぽい。
URLを入力したテキストボックスのすぐ下にある「Fetch new scrape information」をクリックしたら、og:image のところが設定した画像に置き換わった。
改めて Facebook に投稿してみたら、期待通りに ogp:image で指定した画像がサムネイルで表示された。
