Facebookのいいね！ボタンを設置するとき、必要な項目について。
先日ひさっびさに実装しようと思ったら、これが結構忘れているんです。 OGPの入力とか… なので、まとめてみました！
まず、OGPとはなにか。
Open Graph Protocolの略。そのページが何かを表し、「SNSを介して」伝えるためのもの。
metaタグで、
内に記述します。 まずこれらを活かすために、(今回のようにHTML5でコーディングした場合)必要な記述があります。 (‘A`)ﾒﾝﾄﾞｸｾ1 | <head prefix=“og: http;//ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#” /> |
これがイマイチ、スクラッチで書けるようにならん…。
ちなみに、XHTMLでは違った記述が要ります。 では、OGP設定項目を説明していきます、というかメモしていきます！
og:site_name
シェアするサイトのなまえ。
1 | <meta property=“og:site_name” congtent=“ここに記述” /> |
og:title
シェアするサイトのタイトル。
1 | <meta property=“og:title” content=“ここに記述” /> |
og:url
シェアするサイトのURL
1 | <meta property=“og:url” content=“ここに記述” /> |
og:description
シェアするサイトの概要 だいたい150文字ぐらいがいいかと思います。それ以上行くと、下の方が詰まって読みにくいです。 (上部に表示されるog:titleの長さにもよりますが)
1 | <meta property=“og:description” content=“ここに記述” /> |
og:type
シェアするサイトの属性。
1 | <meta property=“og:type” content=“article” /> |
og:image
シェアしたときにタイムライン上に表示されるキャプチャ画像。
1 | <meta property=“og:image” content=“ここに記述” /> |
fb:app_id
サイトをシェアするためのFacebookアプリID 別途、作成が必要です。
1 | <meta property=“fb:app_id” content=“ここに記述” /> |
fb:admins
自分のFacebookID Facebook 自分のFacebook IDを調べる方法 | ホームページ作成・Web制作・サイト構築 | MAXI design
1 | <meta property=“fb:admins” content=“ここに記述” /> |
ウェブサイトをシェアするために設置するのはこれぐらいでしょう。
気になる表示領域はこんな感じです。
場合によって異なるかもしれません。 あくまで参考程度に…
さらに、ミソとなるポイントを少々。
og:titleはどっちでもいい。
おそらくなくてもイケるかと。ただ、“タイトルと名のつくものは大切”と、webクリエイターならば口酸っぱく教えられたことでしょう。 なので記述してます。
og:typeってなんやねん
これの指定ですが、通常のウェブサイトなら以下のどれかでいいでしょう。
1 | <meta propety=“og:type” content=“website” /> |
1 | <meta propety=“og:type” content=“article” /> |
1 | <meta propety=“og:type” content=“article” /> |
ほかには、こんな種類があります
- 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
最後の項目にある、
1 2 | <meta property=“og:type” content=“website” > <meta property=“og:type” content=“blog” > |
上記の2項目どちらか指定する場合、そのページはサイト全体を表現しているものである 場合が適切らしいです。
Facebook OGP 勘違いに注意！og:typeをwebsiteやblogとして良いのはトップページのみ！
og:image
画像の大きさに注意しましょう！
ざっとまとめるとこんな感じです。
200px×200px以下は、画像が出ないので、それ以上で
推奨サイズは1200px×630px以上～1500px×1500pxぐらい。
正方形ではなく、1.91：1の横長がイイ
わけがわからん
とりあえず、ファビコンと一緒に使おうなんて汚いマネはできないということですね。
Facebook「OGPの画像は1200px幅で」えぇ? 大きすぎない? しかも横長推奨? | Web担当者Forum
ひととおり設定した後はデバッグツールでチェックしましょう
エラーがある場合は表示されます。
たとえばog:imageのファイルを変更した後などキャッシュが残っていて、いいね！しても反映されません。
その場合こちらで「デバッグ」ボタンをクリックすることで解消します。 でも結構しぶといです
今回はHTML5でコーディングした場合、そしてウェブサイトに設置する場合、という想定条件でブログ更新しました。
他にも音楽コンテンツや動画コンテンツをシェアした場合の特別な記述もありますがとりあえず絞ってこの辺で。
WordPressでサイトを構築してソーシャルボタンを設置する場合は、条件分岐で下層ページにも対応させたほうがいいですね。
その辺は、プラグインでサクっとやってみるのもいいかもしれません。
All in One SEO Pack
では