オウンドメディアを運用して流入率を上げるためには、SEO施策だけでなくTwitterやFacebookなどのSNSとの連携も重要な取り組みです。「OGP」は、WebページをSNSでシェアするための機能であり、有効に活用すればさらなるアクセスを獲得できます。
本稿では、そんなOGPの概要や設定方法を解説します。
OGP（Open Graph Protocol）とは？
OGPとは「Open Graph Protocol」の略で、Webサイト内の記事がFacebookやTwitterなどのSNSで拡散・シェアされた際に、各ページのタイトルやサムネイル画像といった情報を表示させるための機能です。
OGPはいわゆる「HTMLコード」の一種であり、各ページのソース部分に「metaタグ」を記載して設定します。metaタグとは、Webサイトの情報を検索エンジンに伝えるための役割を持ったコードです。
OGPを設定するべき理由
昨今は、BtoB企業においてもオウンドメディア・SNS運用などデジタルマーケティングの重要性が高まっています。
しかし、シェアされた際にOGPが設定されていないWebページは、SNSのシステム側が自動的に対象ページの概要説明やイメージ画像を設定してしまいます。そのため、SNSのシェア投稿がユーザーからしたら「何が書かれているか」が認識しづらい可能性があります。
そのような状況を避けるためにも、OGPの設定が必要です。OGPを設定することで、各ページの内容をSNSユーザーに対して届けることが可能です。結果的にクリック率が上昇し、より多くの訪問者を自社サイトに呼び込めます。
OGPの基本の設定方法
次項から「OGPの種類」「基本的な設定方法」をセットで解説します。前述のとおり、OGPはいくつかの種類に分けられます。設定方法について知る前に、それぞれのOGPが持つ役割について把握しておきましょう。
OGPの種類
OGPの設定項目は5種類存在します。それぞれの概要については以下のとおりです。
| og:url | WebページのURL情報 |
| og:type | ページの種類。各トップページなどは「website」、ブログページには「article」など、多くの種類が用意されている |
| og:title | Webページのタイトル |
| og:description | Webページの内容を示すディスクリプション（紹介文） |
| og:image | ページごとのサムネイル画像のURL |
上記のうち「og:url」におけるURLは「相対パス」ではなく「絶対パス」で記述しなければなりません。それぞれの違いについては、以下のとおりです。
- 相対パス…現在のページから目的のページまでの道順を記述するもの
- 絶対パス…ドメインも含め、目的のページまでの道順をすべて記述するもの
「og:type」については、一般的にはwebsiteかarticleしか使用しません。ほかのタイプを使用したい場合は、一覧で確認可能なThe Open Graph protocolを参照しましょう。
「og:title」で設定するページタイトルの文字数は一般的に30字までなのですが、シェアするSNSやユーザーの使用デバイスによって適切な文字数が若干の変動があるため、あくまでも目安として捉えましょう。
OGPの基本の設定方法
OGPは、前述のとおりmetaタグをHTMLソースコード内に記述することで設定できます。基本的な設定手順としては、次のとおりです。
- head要素への【 prefix=og: http://ogp.me/ns#】の追加
- headerタグ内のmetaタグで所定の要素を追加
まず当該ページでOGPを機能させるため、各ページにおけるソースコードのhead要素に以下のように【prefix属性】を追加しましょう。
そのうえで、headerタグ内に5種類のmetaタグで要素を追加し、必要情報を記述していきます。
なお、設定するOGPは各ページで異なる内容にしなければなりません。なぜなら、ユーザーの目に触れる画像が、異なるコンテンツ同士で同一であった場合、クリック率の低下が懸念されるためです。
たとえば、同じ内容のサムネイル画像の記事を目にした際に、ユーザーに「同じ内容の記事だ」と判断されしまうことは、想像に難くないでしょう。これはシステム的な問題ではなく、ユーザー視点での対策ですが、重要な取り組みです。
TwitterでOGPを設定する方法
©ymgerman/123RF.COM
TwitterでOGPを設定する際には、前述の基本的なOGPの設定に加えて、「Twitterカードの種類」「ユーザー名」を追記する必要があります。順番に、それぞれの設定方法を解説します。
カード種類の指定
Twitterでカードの種類を指定するために、まずはmeta要素に【name属性】を指定し、その属性値に【twitter:card】をマークアップします。そのうえで、meta要素に【content属性】を指定し、その属性値に【Twitterカードの種類】を記述すれば完了です。
記述例は以下をご覧ください。
なお、指定するTwitterカードの種類については、以下の4種類が存在します。
| summary | 「サマリーカード」とも呼ばれ、画像と記事のタイトル、説明文が表示される |
| ummary_large_image | 「大型画像付きサマリーカード」であり、サイズの大きな画像と記事タイトル、説明文が表示される |
| app | 「アプリカード」とも呼ばれ、アプリの配布ページにリンクさせる場合に使用する |
| player | Twitter上で動画や音楽を再生させる場合に使用するもので、「プレイヤーカード」と呼ばれる |
ユーザー名の指定
ユーザー名の指定では、meta要素に【name属性】を指定して、その属性値に【twitter:site 】を記述します。さらに、【content属性】を指定して、そこに「@アカウント名」の形で、Webサイト単位で使用しているTwitterアカウントのユーザー名を以下のように記述します。
なお、meta要素に【name属性】を指定して、その属性値に【twitter:creator】を記載する方法もあります。この場合、meta要素に【content属性】を指定して、その属性値に、コンテンツ作成者/著者単位で利用しているTwitterユーザー名を記述します。
FacebookでOGPを設定する方法
©vdovichenko/123RF.COM
FacebookでOGPを設定する場合、まずは、meta要素に【property属性】を指定して、その属性値に【fb:app_id】をマークアップします。そこから、meta要素に【content属性】を指定して、属性値に15桁のFacebookアプリIDを記述すれば設定完了です。
この記述を行えば、Facebookから自社サイトへのトラフィックデータを分析できる「Facebookインサイト」も利用できるようになります。
OGPの確認方法
OGPの確認方法については、SNSごとに異なるツールを使います。以下より、TwitterとFacebookでOGPを確認する手順を個別に解説します。
なお、OGPの設定が反映されていない場合は、それぞれの使用ツールに実装されている機能を使ってキャッシュをクリアすれば解消可能です。
Twitterの確認方法
TwitterのOGP設定を確認する場合は「Card Validator」と呼ばれる、Webブラウザ形式の表示検証ツールを使います。ツールサイトにアクセスし、【Card URL】の部分に、OGPを設定したWebページのURLを入力するのみです。
後は入力ボックスの下にある【Preview card】をクリックすれば、OGP情報を確認できます。
Facebookの確認方法
FacebookでシェアされたOGP設定を確認するためには「シェアデバッガー(Facebookデバッガー)」というツールを使うのが一般的です。シェアデバッガーとは、FacebookでシェアされるWebサイトのOGP設定を確認するための無料ツールです。
ユーザーにシェアされる前にOGPが正しく設定されているかどうかを確認することが可能です。これにより、「画像が表示されない」「異なる画像が表示される」といったバグが発生したとしても、未然に対応できます。
使い方は、連携するFacebookアカウントにログインした状態でツールのページを開き、シェアするページのURLを入力して【デバッグ】ボタンをクリックすれば完了です。
まとめ
SNSでのシェアによる認知拡大の重要性が増してている昨今において、記事コンテンツなどへのOGPの設定はBtoB企業にとって意義のある取り組みです。各ページのコンテンツ内容に即したOGPを設定すれば、拡散につなげ、認知度を高めることができます。
一見、複雑にみえるOGPの設定方法ですが、慣れてしまえば少ない負担で実施できます。自社のオウンドメディア運用で積極的に活用しましょう。
SEデザインでは、LP制作やオウンドメディアの構築、SEO記事制作サービスなどのコンテンツマーケティング支援サービスを行っております。集客やリード育成にお悩みの方は、お気軽にお問い合わせください。
