こんにちは、ジーピーオンラインのケンです！
Webサイト運営では、検索エンジン以外にもSNSからの集客も狙っていくことになります。そんなときに重要になるのがOGP（Open Graph Protocol）です。OGPとは、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。
適切にOGPを設定すると、Webページがシェアされたときの要素を指定でき、訴求力が上がります。本記事では、企業のWeb担当者さまへ向けて、OGPの基本からSNSまでの基本設定方法を解説します。
下記のようなことでお困りの方はぜひお読みください。
- OGPとは何か知りたい
- OGPの設定方法が知りたい
- OGPが表示されない
もくじ
OGPとは？
OGP（Open Graph Protocol）は、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。
OGPでは、表示する要素を指定できるので、ユーザーに対してシェアされたWebページの内容を詳細に伝えることができます。
OGPを設定するべき理由
OGPを設定していない場合、SNSのクローラーが自動的にWebページの情報を抽出してしまいます。仮に、意図していない不適切な画像などの要素が抽出されると、画像を通してWebページの内容がユーザーに伝わらず、閲覧・拡散が期待できません。
したがって、SNSでタイムラインに共有する時に、リンク先の内容を的確に伝え、効果的に訴求するためには、OGPを設定すべきといえます。
OGPの設定方法【基本設定】
OGPの基本設定方法を見ていきましょう。
「Twitter」「Facebook」など、各SNSのOGPを設定するときは下記の基本設定が必要です。
まずは、head要素内に「prefix」属性を追加します。
記述する内容は下記の通りです。
<head prefix="og:http://ogp.me/ns# fb:http://ogp.me/ns/fb# website:http://ogp.me/ns/website#">
次に、headerタグ内のmetaタグに各項目の要素を追加します。
記述内容は下記の通りです。
■共通するOGP
<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="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>
| 項目 | 詳細 |
|---|---|
| og:url | ページのURLを絶対パスで指定 |
| og:type | Website,blog,article,productなど、ページの種類 |
| og:title | ページのタイトル |
| og:description | ページの説明文。80~90文字程度 |
| site_name | サイト名 |
| og:image | SNSでシェアされたときに表示する画像 |
TwitterのOGPを設定する方法
Twitterでは、冒頭で紹介した基本設定の他に「twitter:card」と「twitter:site」の設定が必要です。
記述する項目は下記の通りです。
<meta name="twitter:card" content="カードの種類"/>
<meta name="twitter:site" content="@ユーザー名"/>
| 項目 | 詳細 |
|---|---|
| twitter:card | summary_large_image（Webページ/推奨）,app（アプリ）,player（動画）などの表示形式 |
| twitter:site | Twitterアカウントのユーザー名を記述 |
TwitterのOGP設定イメージは下記の通りです。
■Webページの場合のイメージ
<html lang="ja" prefix="og:http://ogp.me/ns#">
<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="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>
<meta name="twitter:card" content="カードの種類"/>
<meta name="twitter:site" content="@ユーザー名"/>
OGPの確認方法
TwitterのOGP設定が完了したら「Twitter Card Validator」で動作確認を実施しましょう。「Twitter Card Validator」では、WebページのURLを入力するだけで、Twitterカードの表示をプレビューで確認することができます。
Twitterカードが表示されない場合は、後述する「OGPが表示されないときの対処方法」を参考にしてください。
FacebookのOGPを設定する方法
Facebookでは、冒頭で紹介した基本設定の他にFacebookアカウントとの連携が必要です。
記述する項目は下記の通りです。
<meta property="fb:app_id" content="FacebookID"/>
この記述がなくてもOGPは表示されますが、アカウントを連携させることでFacebookインサイトを利用できます。Facebookインサイトとは「Facebookページの解析」「いいね！をしたユーザーの属性情報」などが分析できるツールです。
FacebookのOGP設定イメージは下記の通りです。
■Webページの場合のイメージ
<html lang="ja" prefix="og:http://ogp.me/ns#">
<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="Webサイト名"/>
<meta property="og:image" content="表示したいサムネイル画像のURL"/>
<meta property="fb:app_id" content="FacebookID"/>
OGPの確認方法
FacebookのOGP設定が完了したら「Facebookシェアデバッカー」で動作確認を実施しましょう。「Facebookシェアデバッカー」にアクセス後、URLを入力し「デバッグ」をクリックするだけで確認できます。
エラー内容も表示されるので、OGPの表示が上手くいかない場合は、内容を確認して修正しましょう。
OGPの最適な画像サイズ
「Twitter」と「Facebook」のOGPの最適な画像サイズを紹介します。
Twitterの画像サイズ
Twitterの最適な画像サイズは下記の通りです。
| カードの種類 | 最適なサイズ | サイズ比 |
|---|---|---|
| Summary Card（正方形） | 144px×144px~4096px×4096px | 1:1 |
| Summary Card with Large Image（長方形） | 300px×157px~4096px×4096px | 1.91:1 |
どちらも容量は最大5MBまでとなっています。
Facebookの画像サイズ
FacebookのOGPの最適な画像サイズは下記の通りです。
| 画像の種類 | 最適なサイズ |
|---|---|
| 長方形で大きく表示したい場合 | 600px×315px以上 |
| 正方形で小さく表示したい場合 | 200px×200px以上 |
なお、高解像度で表示されるデバイスでもきれいに表示させるためには、1200x630px以上の画像が推奨されています。どちらも容量は最大8MBまでとなっています。
＜参照サイト： Meta | リンクシェアの中の画像指定＞
OGPが表示されないときの対処方法
最後に、OGPが表示されないときの対処方法を紹介します。
OGPの画像が表示されないときはファイル形式を確認
OGPの画像が表示されないときはファイル形式を確認しましょう。基本的にOGPの画像で利用できるのは「.jpg」「.png」「.webp」「.gif」の形式です。SVG形式などには対応していないので注意が必要です。
WordPressの場合はテーマにOGP設定が内蔵していないか確認
WebサイトをWordPressで構築している場合は、採用しているテーマを確認しましょう。テーマによっては、OGP設定が内蔵しているものがあるため、設定の重複により、OGPが表示されない可能性があります。
OGPを設定してコンテンツを拡散しよう
OGPの基本設定について解説しました。OGPとは、SNSでWebページがシェアされたときに「タイトル」「画像」「URL」「説明文」が表示される仕組みのことです。
自社で指定した要素をSNS上に表示できるので、SNSからの流入を増加させたい場合は、OGPを設定してコンテンツを拡散させましょう。
ジーピーオンラインでは、OGPをはじめとして、訴求力の高い高品質なWebサイト制作が可能です。Webマーケティングを強化されたい企業さまはぜひお気軽にご相談ください。
WRITERケン ライター
大手採用メディア運営企業にてWebコンテンツ制作に約10年携わった経験をもつコンテンツディレクター兼ライター。これまでの経験を活かし、有益なWebマーケティングに関する情報を発信していきます。
