OGPタグを使って「いいね！ボタン」を有効活用
最終更新日：2023/11/16
こんにちは。
スターティアラボ ブログ編集部です。
FacebookやTwitterなどのSNSは、今や使って当たり前の時代になってきました。
とりわけ、スマートフォンの普及により、1日1回はSNSを利用する方も多くなっているのではないでしょうか。
SNSといえば「個人ユーザーが自身の情報発信のために使うもの」という認識があると思いますが、昨今では、企業がFacebookページを持ち、キャンペーンやお役立ち情報などの情報発信にも活用されています。
これ自体は今さら珍しい事ではありませんが、例えばWebサイトとFacebookを連動させるなど、SNSの力を最大限活用できているかと言うと…単にページをシェアしているだけという方もいらっしゃるのでは？
そこで今回は、「OGPタグを使ったSNS活用方法」についてまとめてみました。
Webサイトをより多くの人に見てもらうための施策でもありますので、ぜひご一読ください！
1.OGP（Open Graph Protocol）とは
OGPとは、Webページの内容をSNS上へ伝えるために必要な記述のこと。
例えば、FacebookなどでWebページがシェアされると、そのWebページのタイトルやURL、概要、使われている画像などを利用して、各種SNSのウォールや、それぞれのニュースフィードに「シェアされたWebページはこんなサイトですよ」と表示してくれます。
OGP設定なしの場合
Facebookで「〇〇さんがリンクについていいね！と言ってます」と、自分のウォールには投稿されますが、ニュースフィードには反映されません。また、シェアされたWebページに関する情報はなく、単にシェアされた事実だけが表示されます。
OGP設定ありの場合
「いいね！」を押すと、OGPタグで指定したURL、タイトル、サムネイル画像などが友達のニュースフィードにも表示されます。
さらにその友達がニュースフィードを「いいね！」すると、記事情報が次から次へと広がっていくようになります。
ちなみに、Facebookの「いいね！ボタン」の設置だけではOGPは設定されません。
2.OGPタグの種類
OGPタグは、Facebook開発者（Product Docs）のページでもわかるように、たくさんあります。
▼Facebook開発者ページ
https://developers.facebook.com
その中でも、最低限設置しておきたいOGPは以下の4つです。この4つは必須のプロパティですので、必ず含めましょう。
"og:title" ＝ ページのタイトル
"og:type" ＝ なんのページなのか（website・article・blog など）
"og:image" ＝ サムネイル画像のURL
"og:url" ＝ ページのURL
これらだけ設置しておけば、自分が「いいね！」をしたそのページがニュースフィードに表示されるだけでなく、最低限のWebページの情報が組み込まれる事になります。
3.OGPタグの設定方法
OGPタグの設置には、HTMLの知識が多少必要になります（基本はコピー&ペーストで済むのですが）。
まず、対象となるWebページ内に下記の記述を追記します。WebページのHTMLを自社で触れる環境がない、もしくは自分で見てもよくわからないという方は、Webサイトを管理している会社や、社内の詳しい方にご相談いただくのがよいでしょう。
▼OGPタグの設置方法
<head>～</head>の間に、各種タグを追記します。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="なんのページなのか" /> website・article・blog など
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:url" content="ページのURL" />
HTML上の表示では、具体的にこのようになります。
補足ですが、og:image”のメタタグは複数指定可能です。また、FacebookやGoogle+では、Webページ内で使われている画像を自動で取得してきてくれるため、こちらは外しても大丈夫です。どうしても指定の画像を使いたい場合は記述しましょう。
4.OGPタグの動作確認
OGPタグがきちんと認識されているかの確認は、以下のページでできます。
▼Open Graph Debbuger
https://developers.facebook.com
問題なく設置されている場合は、「Debug」ボタンを押した後、メタタグで設定されている情報が参照されます。もし、必須になっているOGPタグがないときは「Missing Required Property」のメッセージがでてきます。
5.まとめ
OGPを設定するのとしないとでは、Facebook上での見え方が大きく違います。これがわかると、設定しないと損している気がしますよね。
そこまで難しくもなく、取り掛かってしまえば簡単にできる作業なので、せっかく情報発信しているのであれば拡散しやすい土台を作りましょう。
というわけで、「いいね！」や「チェック」などのボタンを設置だけで満足せずに、OGPも忘れずに設定し、より多くの人に貴社のWebサイトを見てもらえるようにしていきましょう！
