HTML5サイトでFacebookいいね!を実装するためのOGPメモ

Facebookのいいね!ボタンを設置するとき、必要な項目について。

先日ひさっびさに実装しようと思ったら、これが結構忘れているんです。 OGPの入力とか… なので、まとめてみました!

まず、OGPとはなにか。

Open Graph Protocolの略。そのページが何かを表し、「SNSを介して」伝えるためのもの。

metaタグで、内に記述します。 まずこれらを活かすために、(今回のようにHTML5でコーディングした場合)必要な記述があります。    (‘A`)メンドクセ


これがイマイチ、スクラッチで書けるようにならん…。

ちなみに、XHTMLでは違った記述が要ります。 では、OGP設定項目を説明していきます、というかメモしていきます!

og:site_name

シェアするサイトのなまえ。

og:title

シェアするサイトのタイトル。

og:url

シェアするサイトのURL

og:description

シェアするサイトの概要 だいたい150文字ぐらいがいいかと思います。それ以上行くと、下の方が詰まって読みにくいです。 (上部に表示されるog:titleの長さにもよりますが)

og:type

シェアするサイトの属性。

og:image

シェアしたときにタイムライン上に表示されるキャプチャ画像。

fb:app_id

サイトをシェアするためのFacebookアプリID 別途、作成が必要です。

fb:admins

自分のFacebookID Facebook 自分のFacebook IDを調べる方法 | ホームページ作成・Web制作・サイト構築 | MAXI design

ウェブサイトをシェアするために設置するのはこれぐらいでしょう。

気になる表示領域はこんな感じです。

OGPタグ実装イメージ

場合によって異なるかもしれません。 あくまで参考程度に…

さらに、ミソとなるポイントを少々。

og:titleはどっちでもいい。

おそらくなくてもイケるかと。ただ、“タイトルと名のつくものは大切”と、webクリエイターならば口酸っぱく教えられたことでしょう。 なので記述してます。

og:typeってなんやねん

これの指定ですが、通常のウェブサイトなら以下のどれかでいいでしょう。

ほかには、こんな種類があります

  • Activities
  •     activity
  •     sport
  • Businesses
  •     bar
  •     company
  •     cafe
  •     hotel
  •     restaurant
  • Groups
  •     cause
  •     sports_league
  •     sports_team
  • Organizations
  •     band
  •     government
  •     non_profit
  •     school
  •     university
  • People
  •     actor
  •     athlete
  •     author
  •     director
  •     musician
  •     politician
  •     profile
  •     public_figure
  • Places
  •     city
  •     country
  •     landmark
  •     state_province
  • Products and Entertainment
  •     album
  •     book
  •     drink
  •     food
  •     game
  •     movie
  •     product
  •     song
  •     tv_show
  • Websites
  •     article
  •     blog
  •     website

最後の項目にある、

  

上記の2項目どちらか指定する場合、そのページはサイト全体を表現しているものである 場合が適切らしいです。

Facebook OGP 勘違いに注意!og:typeをwebsiteやblogとして良いのはトップページのみ!

og:image

画像の大きさに注意しましょう!

ざっとまとめるとこんな感じです。

200px×200px以下は、画像が出ないので、それ以上で

推奨サイズは1200px×630px以上~1500px×1500pxぐらい。

正方形ではなく、1.91:1の横長がイイ

わけがわからん

とりあえず、ファビコンと一緒に使おうなんて汚いマネはできないということですね。

Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? | Web担当者Forum

ひととおり設定した後はデバッグツールでチェックしましょう

Facebookデバッガー

エラーがある場合は表示されます。

たとえばog:imageのファイルを変更した後などキャッシュが残っていて、いいね!しても反映されません。

その場合こちらで「デバッグ」ボタンをクリックすることで解消します。 でも結構しぶといです

今回はHTML5でコーディングした場合、そしてウェブサイトに設置する場合、という想定条件でブログ更新しました。

他にも音楽コンテンツや動画コンテンツをシェアした場合の特別な記述もありますがとりあえず絞ってこの辺で。

WordPressでサイトを構築してソーシャルボタンを設置する場合は、条件分岐で下層ページにも対応させたほうがいいですね。

その辺は、プラグインでサクっとやってみるのもいいかもしれません。
All in One SEO Pack

では

シェアする

  • このエントリーをはてなブックマークに追加

フォローする