いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
OZPA sutusugataiine500

Facebookでシェアされた時の表示は、ちゃんとなってるのか気になりますね。

ブログ記事がFacebookでシェアされた際、しっかりOGPの値を設定しておかないと、Facebookでの表示が残念なことになります…
以前までちゃんと理解しないで設定していたため、当ブログのFacebookページも残念な表示となってしまっていました。

OGPの設定はしっかり行っておきたいのですが、OGPの設定の前にOGPの宣言についての記事を発見したので、コーディング内容と合わせてシェアしたいと思います。

OGPの宣言は、XMLとHTMLで異なる?

Facebookなどで参照されるOGPの値は、headタグ内のmetaタグで設定します。
しかしその前にOGPの設定を行いますよという、OGPの宣言を行っておく必要があります。

ぼくは以前から使用していた、以下コードを使用しようとしたのですが…

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">

いろいろ調べていると、以下記事にたどり着き、上の書き方はXMLで記述している時のものではないかとの内容。

HTML5でOGPの設定をする時にhtmlタグにxmlnsは不要

当ブログも一応、HTML5で記述しているため、上記記事の内容を参考にOGP宣言部を見直しました。

トップページの場合:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#  blog: http://ogp.me/ns/blog#">
記事ページ等の場合:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

ブログのトップページとその他(記事とか固定ページとか)で、内容が異なるので、出力を分けましょう。
最終的に「いるみお」で採用したコードは以下の通り。

<?php if(is_home()){ ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
<?php } else { ?>
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<?php } ?>

これでトップページと、それ以外のページでの宣言部が変更されるはずです。

OGPの設定について

今回OGPの設定は、割愛しますX(書いている時間が無くなったので。また別途書くかも?

OGPの設定って、単純なようで難しい…
設定を行った後は、Facebook開発者 デバッガーで各項目が期待通りになっているか確認しておきましょう。
Facebookの投稿もキレイになって、アクセルアップに繋がる!…かも知れません:)

当ブログが気になったら…是非RSSにご登録ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です