更新日:
関連タグ:

OGPとは?facebookいいねボタン設置時のOGP設定方法!

かずき
著者:
兵庫県神戸市在住、鹿児島生まれ。スマホ(android/iPhone)やガジェットが大好きで、親子で使い倒しています。格安SIM・格安スマホは6年以上、LINE・facebook・TwitterなどSNSは10年以上活用しています。
記事が参考になりましたら励みになりますので、ブックマークSNSでのシェアの程、宜しくお願いいたします。また、ご質問検証依頼体験されたこと等、YouTubeのように気軽にコメントいただければ幸いです。
  • はてなブックマーク
  • facebook
  • twitter
  • LINE
  • Pocket

ホームページやブログにfacebookの”いいね!ボタン”を設置しただけじゃ意味が無い!

何故ならば、いいねボタンを設置しただけじゃ友達のニュースフィード(ウォール)には表示されないからです!

これでは幾ら”いいねボタン”をクリックしても(して貰っても)友達には何にも伝わりません(爆)

そこで対処法としまして、htmlを知らない人には難しいことかも知れませんがOGPタグをhtmlのmeta部分に挿入する必要があります。

当記事では、OGPのこと、facebookいいねボタン設置時のOGP設定方法を紹介します。

スポンサーリンク


OGPとは?

OGPの正式名称は “Open Graph Protocol” と言い、ホームページやブログの記事をソーシャルグラフに流すための規格というべきものです。
OGPは、facebookだけの規格というわけではなく、twitter・instagramなどSNSでも使われています。

OGPのルール通りにhtmlを書かないとfacebookのシステムがホームページやブログの情報を上手く理解できず、いいねボタンをクリックされても記事が友達のニュースフィードに表示される事はありません。

OGP対応していないページ上のいいねボタンをクリックした時は、いいねボタンをクリックしてくれた人の”プロフィール”(個人のウォール)には表示されるのですが、”ニュースフィード”には表示されないという事です。
誰かが意図的にプロフィールページを見てくれない限り、いいねされた記事の内容には全く気が付きません。

せっかくいいねボタンをクリックして貰っても、他の人の目に触れる事が少ないので、拡散の確立はかなり少ないと言っていいでしょう。
しかし、OGPタグを挿入する事で、いいねボタンを押して貰った時にホームページやブログ記事がより多くの人の目に触れるようになります。

OGP設定方法

ホームページやブログのhtmlにOGPタグを挿入する事で対応できます。
先ずその前に、いいね!ボタンを設置して、且つアプリIDを取得する事をお忘れなく。
いいね!ボタン作成 – Facebook開発者
fb:app_id アプリ作成画面

1つは、<html>タグにxmlnsを追加します。

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

もう1つは、<head>~</head>内にOGPタグを追加します。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" /> //トップページはwebsite、個別ページはarticle
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />
<meta property="fb:admins" content="facebookのユーザーID" /> //できればfb:app_idを利用
<meta property="fb:app_id" content="facebookのアプリID" />

OGPタグについての詳細は、facebook developersページを参照にして下さい。
Open Graph protocol – Facebook開発者
”og:image”メタタグは複数指定できますし、意図的に外しても良いです(画像サイズは、180px(縦) × 180px(横)以上のjpg or png)。
※ facebookやgoogle+では、本文内やサイト内の画像を自動で取得する為

OGPタグの動作確認

以前は「URLリンター」というページがあったのですが、現在では「Debugger」というネーミングに変わり、OGPタグが正しく認識されているかを確認できます。
Debugger
もし、必須になっているOGPタグが挿入されていないと”Required Property Missing”と警告が表示されます。

まとめ(OGPタグを挿入するメリット)

♪ 友達のニュースフィード(ウォール)に表示される。
facebookのいいね!ボタンを設置するだけでは、いいねボタンを押しても友達のニュースフィードには表示されないので、ホームページやブログのhtmlにOGPタグを挿入する事により、友達のニュースフィード(ウォール)にもいいねボタンがクリックされた記事が表示がされ、記事の拡散率も向上します。

♪ ニュースフィードでの表示内容を指定できる。
OGPタグを挿入する事で、記事の内容にそった表示が可能。

♪ いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
OGPタグを挿入すれば、普通のfacebookページとは違う、いいねボタンをクリックした(された)”記事専用のfacebookページ”が生成されます。記事を更新すれば、この記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

いいねボタンを設置するだけでは勿体無い!

是非、OGPタグ挿入のひと手間をお忘れなく!

facebookは、スマホのSIMをラインモバイルに変更すると通信し放題(カウントフリー)で利用できます。月々のスマホ代を大幅節約できるので、気になる方は下記記事をご覧ください。

※ facebookの仕様はよく変わるので、タイミングによってはOGPが反映されなかったりとエラーやバグがある時がよくあるかも知れません。

記事が参考になりましたら励みになりますので、ブックマークSNSでのシェアの程、宜しくお願いいたします。また、ご質問検証依頼体験されたこと等、YouTubeのように気軽にコメントいただければ幸いです。
  • はてなブックマーク
  • facebook
  • twitter
  • LINE
  • Pocket
ご質問・体験レビュー等ありましたらコメントいただけると幸いです。
コメント利用規約
・誹謗中傷、過激かつ攻撃的なコメントはIPアドレスを明記して公開する場合があります。
・読者様の体験レビューも是非書き込みお願い致します。
コメント欄が無い記事はコメントを受け付けていません。
0 コメント
Inline Feedbacks
View all comments

  • ユーキューモバイル
    • キャッシュバックあり!
    • 3ギガ1,480円 (税込1,628円)
    • 15ギガ2,480円 (税込2,728円)
    • 余ったギガ翌月繰り越し!
    • 10分かけ放題770円 (税込847円)
    • 節約モードで通信し放題!
  • マイネオ
    • 3カ月間1,000円割引!
    • 10ギガ1,780円 (税込1,958円)
    • 20ギガ1,980円 (税込2,178円)
    • 10分かけ放題850円 (税込935円)
    • メールアドレス無料発行
  • 楽天モバイル
    • 1年無料キャンペーン中(4月7日まで)
    • 2台目用として最強!
    • 1ギガまで無料
    • 3ギガまで980円 (税込1,078円)
    • 20ギガまで1,980円 (税込2,178円)
    • 20ギガ以上2,980円 (税込3,278円)
    • 楽天リンク利用で通話無料
  • 日本通信SIM
    • ドコモ回線
    • 20ギガ1,980円 (税込2,178円)
    • 70分通話無料
  • ビッグローブモバイル
    • 月308円でYoutubeが通信し放題!
    • 6ギガ1,700円 (税込1,870円)
    • 10分かけ放題830円 (税込913円)
    • YouTubeを見てる方におすすめ!
  • ワイモバイル
    • 3ギガ1,980円 (税込2,178円)
    • 15ギガ2,980円 (税込3,278円)
    • 2回線目以降1,100円割引
    • 10分かけ放題700円 (税込770円)
  • IIJmio
    • eSIMプランが安い!
    • 4ギガ980円 (税込1,078円)
    • 8ギガ1,380円 (税込1,518円)
    • 20ギガ1,880円 (税込2,068円)
    • 10分かけ放題830円 (税込913円)
  • ポボとは?
    • auPay残高3,000円分付き
    • 20ギガ2,480円 (税込2,728円)
    • 5分かけ放題500円 (税込550円)
    • 24時間通信し放題220円/日
    • キャリ決済〇
  • アハモとは?
    • dポイント3,000円分付き
    • 20ギガ2,700円 (税込2,970円)
    • 5分かけ放題付き
    • 家族割引〇
    • キャリ決済×
  • ラインモとは?
    • PayPayボーナス3,000円分付き
    • 20ギガ2,480円 (税込2,728円)
    • 5分かけ放題500円 (税込550円)
    • LINEスタンプ使い放題
    • LINEデータフリー
  • ニューロモバイル
  • イオンモバイル
  • OCNモバイル
  • au回線の格安SIM
  • ドコモ回線の格安SIM
  • ワイマックス
  • ビッグローブワイマックス