OGPの基本的な設定方法｜Facebook・Twitterの記述例

公開日:2022/06/03 更新日:2022/06/03

WebページをSNSで拡散させたい場合、OGPを設定することが推奨されます。OGPの設定方法はSNSによって異なるため、正しい記述方法を理解することが重要です。

この記事では、OGPの基礎知識やOGPを設定するメリット、基本的な設定方法、FacebookとTwitterにおける設定方法・確認方法を紹介します。OGPを正しく設定し、情報発信や集客、ブランドの認知拡大などに生かしましょう。

1. OGPとは？

OGPとはOpen Graph Protocolの略称で、Webページのタイトルや画像などをSNSで正しく表示させるためのHTML要素です。WebページのソースコードにOGPを記述することで、WebページがSNSでシェアされたときの見え方を適切に管理できます。

1-1. OGPを設定する3つのメリット

WebページにOGPを設定するメリットは次の3つです。

●伝えたいことがユーザーに明確に伝わる

OGPが設定されていないWebページがSNSでシェアされた場合、画像や説明文が適切に表示されない可能性があります。重要でない画像やテキストが抜粋されてしまうと、Webページの概要が正しく伝わりません。SNSで表示されるタイトルや説明文、画像などを調整することで、Webページの内容が明確に伝わるようになります。

●画面占有率が高くなり、訴求力が大きくなる

OGPを設定するとWebサイトのイメージ画像が表示されるため、SNSにおける画面占有率が高くなります。単にテキストリンクと説明文だけが表示された場合と比べて、訴求力が大きくなることがOGPを設定するメリットです。

●拡散力が高まり、CTRの向上につながる

OGPでユーザーの興味を引くような画像や説明文を設定すると、SNS上でのシェアやリツイートといった拡散力が高まります。例えば、FacebookでOGP設定済みのWebページがシェアされた場合、投稿を「いいね」したユーザーの友達にもリーチすることが可能です。また、Twitterではページ内容が一目で分かるようなWebサイトは興味を引きやすく、積極的なリツイートが期待できます。

2. OGPの基本的な設定方法・記述例

OGPはHTMLコード内のheadタグ内に記述します。OGPの基本的な設定手順は次の通りです。

●head要素でOGPの使用を宣言する

WebページにOGPを設定することを宣言するため、ソースコードのhead要素にprefix属性を追加しましょう。prefix属性の記述例は下記の通りです。

<head prefix=”og: http://ogp.me/ns#”>

●headタグ内にメタタグでOGPを記述する

次に、headタグ内にメタタグを追加し、OGPの各項目を設定します。メタタグの記述例は下記の通りです。

<meta property="og:title" content="Webページのタイトル" />
		 <meta property="og:type" content="Webページの種類" />
		 <meta property="og:description" content="Webページの説明文" />
		 <meta property="og:url" content="WebページのURL" />
		 <meta property="og:site_name" content="Webサイトのタイトル" />
		  <meta property="og:image" content="サムネイル画像のURL" />

●サムネイル用の画像を用意する

Webページの内容を表すサムネイル画像を作成し、サイト内の任意の場所にアップロードしましょう。

2-1. OGPの設定に使用するタグ

OGPの設定に使用するタグには、さまざまな種類があります。基本的な設定に使うタグの概要と記述例は次の通りです。

●og:title

Webページのタイトルを指定できます。タイトルが長すぎると最後まで表示されないため、20文字程度を目安に設定しましょう。

<meta property="og:title" content="ページタイトルをここに記述" />

●og:type

コンテンツの種類を指定できます。企業のWebサイトのトップページなどには「website」、ブログやニュースサイトの記事ページなどには「article」を使用しましょう。

<meta property="og:type" content="Webページの種類をここに記述" />

●og:description

Webページの内容を表す説明文を指定できます。80～90文字以内を目安として、Webページの内容を簡潔に表現した文章を設定しましょう。

<meta property="og:description" content="Webページの説明文をここに記述" />

●og:url

WebページのURLを指定できます。OGPを設定するWebページのURLを絶対パスで入力しましょう。

<meta property="og:url" content="WebページのURLを絶対パスで記述" />

●og:site_name

Webサイトの名前を指定できます。Webページの名前と間違えないように注意しましょう。

<meta property="og:site_name" content="Webサイトの名前をここに記述" />

●og:image

Webページのサムネイル画像を指定できます。画像のURLを絶対パスで入力しましょう。

<meta property="og:image" content="サムネイル画像のURLを絶対パスで記述" />

3. 【Facebook】OGPの設定方法・確認方法

Facebook向けのOGPを記述する場合、基本的な設定に加えて次のようにコードを追記する必要があります。

Facebookの開発者アカウントを発行する
OGPの設定を行うために、まずはFacebookの開発者アカウントを発行しましょう。通常のFacebookアカウントを作成後、Facebook for Developersにアクセスすると開発者アカウントを発行できます。
アプリIDを取得する
開発者アカウントを発行した後、Facebook for Developersで「マイアプリ」から「アプリの作成」を選択してください。アプリの表示名に分かりやすい名前を入力し、「アプリIDを作成してください」を選択します。ダッシュボード上に表示されたアプリIDをコピーしましょう。
Facebook向けのOGPを追記する
Facebook向けのOGPであるfb:app_idを追記します。HTMLのソースコードに以下のようなタグを追記し、アプリIDを入力してください。
```
<meta property="fb:app_id" content="アプリIDをここに入力" />
```
OGPを利用するためアプリを公開する
Facebook for Developersにアクセスし、「設定」から「ベーシック」を選択します。プライバシーポリシーのURLを入力し、「プラットフォームの追加」からWebサイトのURLを入力後、「変更を保存」をクリックしましょう。
ページ上部の「ステータス：開発中」と書かれたボタンをオンにし、アプリのカテゴリを選択してから「承認」をクリックします。ステータスがライブに変更されていれば、設定は完了です。

設定内容は、シェアデバッガーと呼ばれるツールで確認できます。シェアデバッガーのページにアクセスし、チェックしたいページのURLを入力後、デバッグと書かれたボタンをクリックしましょう。ページ下部に表示されるプレビューで、意図した通りの設定になっているか確認してください。

4. 【Twitter】OGPの設定方法・確認方法

Twitter向けのOGPを記述する場合、基本的な設定に加えて次のようにコードを追記する必要があります。

twitter:cardを設定する
WebサイトをTwitterでシェアしたときに表示される内容はカードと呼ばれます。カードの表示形式は4種類あり、ブログやWebサイト用は「summary」と「summary_large_image」の2種類です。summary_large_imageを指定すると、大きな画像が表示されます。
twitter:cardの記述例は次の通りです。
```
<meta name="twitter:card" content="カードの種類をここに記述" />
```
twitter:siteを設定する
ページの作成者や管理者のTwitterユーザーIDを設定します。twitter:siteの記述例は次の通りです。
```
<meta name="twitter:site" content="@で始まるTwitterユーザーIDをここに記述" />
```

これらの手順で設定したOGPの内容は、Card Validatorと呼ばれるツールで確認できます。Card Validatorのページにアクセスし、チェックしたいページのURLを入力後、Preview cardと書かれたボタンをクリックしましょう。画面に表示されるプレビューで、意図した通りに設定が反映されているか確認してください。