今日の役に立たない一言 － Today’s Trifle! －

古い記事ではさまざまなテーマを書いていますが、2007年以降はプログラミング関連の話がほとんどです。

電子書籍「こどものトリセツ」のランディングページを作りました

Web

電子書籍「こどものトリセツ」のランディングページを、前から作ろうと思いつつ作りかけのまま放置してた。でも、完成させなきゃ意味がないので、昨日がんばってそれなりに形にしてみた。

が、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デバッガーというサービスがあるらしい。

≫デバッガー - 開発者向けFacebook

ここにアクセスしてみる。

テキストボックスにサイトのURLを入力して「Debug」をクリックすると、次のような表示になる。

この画像では og:image のところに既に指定した画像が表示されているけど、最初に試した時は指定した画像とは違う、電子書籍のページをキャプチャした画像が表示されていた。

どうやら、Facebookのサーバーに、表示されている内容がキャッシュされているっぽい。

URLを入力したテキストボックスのすぐ下にある「Fetch new scrape information」をクリックしたら、og:image のところが設定した画像に置き換わった。

改めて Facebook に投稿してみたら、期待通りに ogp:image で指定した画像がサムネイルで表示された。