更新日：2020.12.26

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

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

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

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

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

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

この記事でわかること（目次）

OGPとは？
OGP設定方法
OGPタグの動作確認
まとめ（OGPタグを挿入するメリット）

OGPとは？

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

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

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

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

OGP設定方法

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

１つは、<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">

もう１つは、<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をラインモバイルに変更すると通信し放題（カウントフリー）で利用できます。月々のスマホ代を大幅節約できるので、気になる方は下記記事をご覧ください。