ブログを書いた後、みなさんはどのようにシェアしてますか？
私は記事のリンクをコピーしてFacebookページ、Facebook、Google+、Twitterでシェアというか、更新しましたのお知らせをしています。
そこで、いつも気になっていたのが、Facebookにシェアしたときのサムネイル表示。
アイキャッチを設定しているのに、どうしていつも途中の画像とか意図しない画像が表示されてしまうのか？？と、人知れず悩んでおりました。
この記事にサラッと目を通す
OGPとかいう設定をしないといけないらしかった
まずは検証ということで、同じ記事のリンクを2、3度貼付け直してみると、そのつど画像がちがったり同じだったりすることに気がつきました。
これは何か解決法があるはず！と、「Facebook サムネイル」とかで検索しました。
そしたら、なんか見たことある…「OGP設定」の文字がちらほら。もしかして、これのこと？
プロブロガー本でもう一度復習
そうそう、そういえばプロブロガー本にそんなページがあったはず。と帰ってすぐに目次を開いてみました。(赤い方は紙の方で買ったから）
案の定、144ページにありました♪
ものすごくおおざっぱにまとめると、OGPを設定すれば自分が書いた記事にあったサムネイルや概要を設定できるようになるということです。
- OGPはOpen Graph Protocol（オープングラフィックプロトコル）の略。
- 要するにWebページの情報を正確に伝えるための記述です。
- header.phpを編集して、metaタグを書き込む！
これこれ、私がしたかったのたぶんこれ。
OGPをしなくても、適切な情報が出てくることもあるけど、「設定した方がより確実」なのだそうです。SEOの設定みたい。
SEOについてはこないだあかめちゃんに教えてもらって直したのがあるので気になった方はこちらをどうぞ。
実際に書き込むコード
でもプロブロガー本の144ページを見ただけだと、正直疑問が残りました。
「これって、記事ごとにいちいち設定するの！？みんなそんなめんどくさいこと毎回やってるの？？しかも記事ごとの情報をヘッダーに書き込むってことは、ヘッダーって毎回同じものを表示する訳だから、毎回同じ記事になっちゃうんじゃないの？？」
っていう長い疑問です。
はてなだらけ。
でもそんな疑問をなくしてくれたのが、やっぱりあかめちゃんでした！！あなたが女王といわれる所以が日に日に自然に思えてきてなりません。（内線）
この記事を読めばすぐわかる！
すごくわかりやすかったのですが、なぜか私の環境だと、動くけど一行エラーが表示されてしまいました。
ということで、さらに紹介されていたこちらの方法を使わせていただきました。
html宣言を修正する
まずはこの一行を追加します。
「header.php」の中にあるhtml~から始まっている部分を修正します。
これでOK.
metaタグを記述する。
同じく「header.php」の中にある「＜/head＞」の直前に、以下のコードを記述します。
長いけどがんばろう！
こうなります。
これで疑問解決しました。どのページを開かれたかによって表示される内容をif分で切ってるんですね。
これなら、そのページごとに表示を切り替えてくれることがわかるので納得です。
FacebookのIDは、Facebookにログイン＞プロフィール＞プロフィール画像を表示した、うしろのほうにある15桁の文字列です。
FacebookIDの取り方も念のため書いておきます。
FacebookIDの取得方法
▼プロフィール欄を選択
▼プロフィール画像を選択
▼15桁の文字列がFacebookのID
私の場合は以下のようになりました。
2行目と２６行目を、自分用に編集しました。
Facebookデバッガーで確認してみる
ここまできたらあと少し。
Facebookデバッガーで表示の確認をしてみましょう。
ここで設定するものってなんだろう？私は最初さっきのFacebookのIDかと思ってなんどもエラーになりました。
ここで設定するのは、自分のブログ記事です！！
たとえば私のブログ記事であれば、「http://sumirexxx.com/2014/02/25/dailysumirepo1/」と入力して、デバッガーさんにデバックしてもらいます。
OKだとこんな感じで表示されます。
いざ！実践！
さて、設定も終わりましたので実際にどう見えるかやってみましょう。
OGPを設定する前の見え方
すごいやだー。な感じ。
OGP設定後
まとめ
ふー！！！やっとできました。
これは時間があるときにやった方がいいかも。
私はうっかりはじめてしまったので明日早いのにハマってしまいました。
でも今日解決できてよかった♪♪
ディスクリプションがちょっと…だけど、ここはまた時間ができたときに直したいと思います。
同じように「なんで変なサムネイルが出るんだよ〜〜〜〜！」と思っている方は、たぶんOGPの設定が原因です。
気になっていた方は、試してみてくださいね☆
…余談ですが、OGPって頭の中で読んで、両手の親ゆびどうしと人差しゆびどうしをあわせた、あの三角形のやつ…思い浮かんだの、私だけじゃないよね。
