SNSでSEO対策！SNSでのシェアを有利にする「OGP」とは
2019.12.02
FacebookやTwitterでコンテンツを拡散、共有したときに、自動で画像や概要文が挿入されるサイトと、カードのような画像が表示されるサイトの二つのパターンがあることにお気づきでしょうか。実はこの画像や概要文は、OGPというHTMLを使って設定されています。表示される概要文や画像も、あらかじめ設定しておけばすきなレイアウトのものに変更できるのです。今回は、SNSでコンテンツがシェアされたときのために設定しておきたいOGPタグと、その設定の仕方について解説します。
「OGP」とは
OGPとは「Open Graph Protocol」（オープングラフプロトコル）の頭文字を取った略称です。サイト内のコンテンツページの情報を各種SNS（FacebookやTwitter、mixiなど）と連携させ、このようなSNSでコンテンツが共有、拡散されたときにあらかじめ指定した通りの形式の画像や文章を表示させることができます。
もう少し詳しく解説すると、OGPはWebページを構成しているHTMLの中の「metaタグ」と呼ばれる要素の一つです。このmetaタグでは文字の表示形式や、サイトが検索で出てきたときの概要文の指定など様々なことが設定できるのですが、その機能のうちの一つとしてこのOGPタグという機能も利用することができます。
metaタグについては弊社の過去コラムで詳しく解説していますので、より詳しく知りたいという方は是非以下の記事もご覧ください。
▼関連記事
SNSでシェアされる際のアイキャッチ画像や概要を指定できる
OGPタグの役目は、前述した通りSNSでシェアされた際の画像や概要文の内容、形式をこまかく指定することです。しかし、最近はOGPが設定されていないページでも、URL先の画像や概要を自動で拾って出してくれる機能があるSNSもあります。FacebookやTwitterはこの機能を搭載しているので、OGPを設定しなくても何も出てこないということはありません。
では、このタグをわざわざ設定しておくことでどのようなメリットがあるのでしょうか。OGPタグを設定しておくことで得られる一番のメリットは、「情報がわかりやすくなる」という点です。
OGPタグを設定しておくことで、「読んでもらえない」という機会損失を防ぎ、拡散による流入を狙えるというメリットがあります。
SNSはとにかく情報の流れる量が多く、「ぱっと見てわかりやすいか」という点がより重視される傾向があります。情報の更新の早いTwitterがその最たる例でしょう。
SNS側が自動でURL元の内容や画像を拾ってくれるとしても、わかりやすい画像や文章を拾ってくれるとは限りません。せっかくの自信作のコンテンツも、SNSでの伝え方が悪くなってしまうと読んでもらえずにスルーされてしまう可能性があります。
SNSでの拡散による流入には、非常に大きな宣伝効果があります。その流入を得るには、充実したコンテンツとOGPタグの設定の両方が必要となります。
OGPの設定方法
SNSでのコンテンツ情報を分かりやすく表示してくれるOGPタグ。便利なタグですが、どのように設定すれば良いのでしょうか。確認しておきたい基本設定からサイトへの設置方法までを一通り解説します。
では早速、OGPをHTMLに記述していきましょう。
まず、サイト内のHTMLのhead部分に以下の記述を追加します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#〇〇〇〇: http://ogp.me/ns/〇〇〇〇#">
この記述は「このページ内でOGPタグを使用します」という内容の記述です。〇〇の部分には、トップページの設定なら「website」それ以外のページなら「article」と記述しておきましょう。
続いて、metaタグの部分を記述します。
<meta property="og:url" content=" コンテンツURL" />
<meta property="og:type" content=" コンテンツの種類" />
<meta property="og:title" content=" コンテンツのタイトル" />
<meta property="og:description" content=" ディスクリプション" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" 画像URL" />
これがOGPの基本の設定部分になります。「content=」の後ろにそれぞれのサイトごとのURLや概要文を記述していくことで、SNSでシェアされたときにその内容が反映されるようになります。
<meta property="og:url" content=" コンテンツURL" />
指定したいコンテンツのページURLを記述します。必ずURLはすべて書いて、絶対パスになるようにしてください。相対パスでの記述はうまく反映されません。
<meta property="og:type" content=" コンテンツの種類" />
基本的には最初に記述したprefixタグに書いた内容と同じ記述で大丈夫です。トップページなら“website”、それ以外なら“article”と記述します。
<meta property="og:title" content=" コンテンツのタイトル" />
コンテンツのタイトルを記述します。例えば、簡単なレシピを集めたサイトの中で肉じゃがの作り方を解説しているページにこのタグを設置する場合は、“肉じゃがの簡単で美味しいレシピ”といった感じで記述してください。
サイトのタイトルはまた後で記述するタグがありますので、ここに記述しないようにしましょう。
<meta property="og:description" content=" ディスクリプション" />
ディスクリプションとは、簡単に言うと概要文のことです。コンテンツの内容を表す概要文を記述してください。あまり長すぎると切れてしまうので、80～90字前後が良いでしょう。
<meta property="og:site_name" content="サイト名" />
このコンテンツが掲載されているサイトの名前を記述します。副題もきちんと入れて正式名称で記述しましょう。
<meta property="og:image" content=" 画像URL" />
シェア時に表示させたい画像のURLを記述します。こちらも画像が載っているURLを全て記述して絶対パスになるようにしましょう。
SNSごとのタグもきちんと設定しておく
基本設定が終わったら、次はSNSごとのタグの設定です。
<meta property="fb:app_id" content="FacebookのアプリID " />
このタグを設置しておくことで、Facebookを経由したいいねの数や訪問者数などの分析ができる「Facebookインサイト」が利用できるようになります。インサイトの機能や内容についてもっと詳しく知りたい方はこちらをご覧ください。
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@ツイッターユーザー名" />
Twitterでは表示される形式（カード種類）を選ぶことが可能です。
・画像と概要文をバランスよく表示したいなら“summary”
・画像を大きく表示したいなら“summary_large_image”
・アプリを配布するページへのリンクは“app”
・ビデオやオーディオを表示したいなら“player”
用途別に四種類のカードから選択できるので、用途に合ったものを選択して記述しましょう。
ユーザー名の記述は@を含めて記述します。@sample01というユーザー名を使用している場合は“@sample01”と記述しましょう。
ちゃんと設定されているかはツールで確認
記述が終わったら、最後に問題なく反映されているかどうかの確認です。OGPタグがきちんと設定されているかどうかは、以下のサイトから確認することができます。
Facebook用のツールです。確認したいURLを入力すると、プレビューを閲覧することができます。
Twitter用のツールです。確認したいURLを入力すると、ツイートの結果を表示してくれます。
どちらも利用にはログインが必要なので、SNSのアカウントにログインしてからアクセスするとスムーズに利用できます。OGPタグを設定したら、きちんと表示されるかを一度確認しておきましょう。
OGPを設定する際の注意点
OGPを設定したのにうまく反映されない場合は、以下の注意点に該当する原因があるかもしれません。
OGPを設定する際に注意したい点についてまとめました。
ページごとに設定を行う必要がある
OGPタグは、一度設定すればすべてのコンテンツに反映される、というタグではありません。
全てのページごとに一つずつ個別で設定をする必要があります。OGPタグを設置したのにうまくシェアに反映されない！という場合は、シェアしたいページのコンテンツにきちんとOGPが設置されているかを一度確認してみましょう。
全てのサイトで設定できるとは限らない
サイトでWordPressのテンプレートを使用している場合、テンプレートの形式によってはOGPタグを使用できないことがあります。
その場合は追加でプラグインを入れることで解決できる場合があります。OGPタグを設定してもうまく反映されないという場合は、テンプレートに原因がないか調べてみましょう。
まとめ
OGPタグを設定しておくと、リンク先の情報がわかりやすくなり、SNSでの拡散がより使いやすいものになります。特にブログやコラムなどのコンテンツの更新情報をSNSで流している場合は是非設定しておきたいタグです。
ページごとに設定するという手間はありますが、SNSからの流入や拡散による宣伝効果は目を見張るものがあります。SNSを活用した宣伝を狙う場合は、是非OGPタグを導入してコンテンツの知名度向上に役立ててください。
関連
Webサイト制作サイト制作
Webデザイン
SEO対策コンテンツSEO
SEO基礎SEO対策SEO解析
