OGPの設定で困った時に読む備忘録!

ogp
スポンサーリンク


OGPについての説明は他のブログでも記事になっているのでこちらでは割愛致します。

まずは設定の説明から始めます!

といってもただの受け売りになってしまいそうですので

下記に私が参考にしたブログを記載しておきます。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か

上記ブログでとても丁寧に説明されているのでこちらではサラっと書いておきます。

HTMLのソース~内にメタタグで記入します。

下記は私が製作したHealTheGardenのサイト内のソースです。

・og:type
タイプ、つまりブログならblog ホームページならwebsite

・og:title
htmlサイトのタイトルと同じ意味です。SNSで「いいね」や共有された時のページタイトルになります。

・og:image
SNSで「いいね」や共有された時のイメージ画像になります。

・og:url
そのページのURLを記述します。

・og:description
htmlサイトのタイトルと同じ意味です。SNSで「いいね」や共有された時の説明・紹介文になります。

あとは下記もありますが私は設定していません。
・og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名

・og:email, og:phone_number
連絡先

OGP推奨の画像サイズ

こちらは下記のブログが2013年5月現在一番新しい情報のようで詳しかったので参考にしました。
hirokona「facebook OGP画像の推奨サイズがまた変わりましたよっと」

上記ブログを読むとわかるのですが300×300px 1500×1500pxの画像で400Kb以内が良いようです。

OGPがうまく反映されなかった場合の対処法

これが一番困るんですよね。

上の2つは調べればすでにたくさんのブログで紹介されてますが、

これが中々みつからず困っていました。

localpocky’s reports「【OGP対応】 OGPタグが認識されない… →「URLリンター」でキャッシュさせよう!」

今はリンターではなくデバックというらしいですがそのデバックはこちら

後はデバッカーの窓に自分のブログやサイトのURLを入れるだけです。

ogp

ogp

そしてデバックを押すと下記のような画面になります。

ogp2

ogp2

これを行ってから自分のウォールで試すとちゃんと表示されるようになります。

デバックのエラーが気になったのでこれを直すにはどうしたら良いかを調べました。

「fb:app_id」とか「fb:admins」って何のために必要なの?(OGP的な意味で) | Sunday In The Park

こちらを読んだのですがまだ対応してませんw

たかだかSNSの共有設定なのに色々面倒くさいですね。

もっと楽にしてくれることを願っています♪

スポンサーリンク


Pocket