OGP情報ヘッダに入れてますか?

要は、Facebook likeとかmixiチェックとかをWEBサイトに導入するとき、Open Graph Protocolに従い、HTMLヘッダのmetaタグ書きましょう、と言う事です。

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

当ブログはwordpressのプラグインに全てお任せで入れてませんけど、他でmixiチェック、GREEイイね、Facebook likeで色々実験してみました。

さっとググッてさっと実験しただけなんで、誤りを含んでいる可能性が大いにあります。鵜呑みにしないでください。

誤りを見つけた方はご指摘ください。

 

  • * *HTMLタグは、こんな感じに。

裏取り無し、純粋コピペだけでつくりました。

まぁ動いたんで大きくは間違ってないんでしょう。

 


<meta property="og:type" content="blog">

コレ、何を入れたらイイのか良く判りません。ググってみると、サンプルコードは”blog”となっている事が多いです。

調べてみました。

Use article for any URL that represents transient content – such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

Object types / Open Graph protocol – Facebook developpers

どうやら、ブログやSNSとかCMSとかの個々の記事には、”article”を使うのが正解の様です。

“website”や”blog”は、そのサイトのトップやDocumentRootのページに設定して、そのサイトそのものを表現する時に使うのが正しい作法の様です。

多分。

 


これは各社共通で、イイね的な投稿の本文的なものになります。

コレを入れとかないと、サイト名になったり、ブラウザタイトルが入ったりと、マチマチの様です。

誤解を恐れずにいうと、ココをイイ感じに引きのあるタイトルにする事がOGPを導入する最大のメリットなんで、がんばって設定しましょう。

 


これはOGPの必須項目になっているんで最初はWEBサイトのロゴ画像を設定してたんですが、mixiチェックでこの画像が自動で挿入されてしまいます。

個々の記事のチェックなのにサイトのロゴが入るのはうまくないですね。

入れないでも、一応mixiとGREEとfacebookはちゃんとイイね的な事ができました。

因みにmixiは、その記事のページをクロールして画像を探し出し、mixiチェックボタンを押下した時に選択させる、と言う仕様になっています。

それが嫌な場合は、こう書けばやめてくれました。

<meta name="mixi-check-robots" CONTENT="noimage">

Open Graph protocolの画像クロールについて – web探検隊

 

  • * *Facebookのlikeの場合、

<meta property="fb:admins" content="FacebookアカウントのID" />

の様なんが必要です。

このやり方でいくと、個々のページをイイねされる度にファンサイトが増えていくんです。

こう書いた方がいいです。

<meta property="fb:app_id" content="FaceookアプリのID" />

それには、Facebookアプリを作る必要があります。

*** fb:admins の代わりに fb:app_id を使う

fb:admins を使って、手動でお知らせを流すことが出来るのは良い機能なのですが、一つのサイトにたくさんのウェブページがあって、たくさんの「いいね!」があった場合は一個一個のページに対して管理していくのは大変ですね。

そんな場合は、 fb:admins の代わりに fb:app_id を使うことで、プログラムからそれらの作業を自動化することが出来ます。

やり方としては、以下のページからお知らせ専用のフェイスブックアプリを作ります。

[http://www.facebook.com/developers/createapp.php:title

アプリといっても、要は自分のFacebookアカウントの様に、Facebook上に基本データとウォールを持ったオブジェクトをもう一つ登録するイメージです。アプリの実体はあなたのサイトと言う理屈です。

とりあえず作るのは簡単でした。

色々と良く判らない部分がまだありますけど、Facebookでイイねは出来てました。

その他参考にさせて頂いた記事たち

ライブドアブログ( @livedoorblog )にOGP (Open Graph Protocol) を組み込んでFacebookで体験してみた件とライブドアブログへの要望

【Facebook】Open Graph Protocol 説明:プロジェクトマネジメント10.0:ITmedia オルタナティブ・ブログ