OGPとは？設定するメリットや初心者でもわかる設定方法を解説

OGPとはWebサイトの内容をFacebookやTwitterなどのSNS上でシェアするための仕組みのこと。タグを設定することでタイトルやサムネイル画像、簡単な概要など、リンク先記事の情報がSNS上で表示できるようになり、アクセス数アップの効果も期待できます。

「OGPを設定して集客効果を改善したい」というあなたのために、OGPの基本的な情報から具体的な設定方法まで、わかりやすく解説します。

OGPとは

OGPとはWebサイト内の記事がFacebookやTwitterなどの各種SNSで拡散・シェアされた際に、サイトの名称やサムネイル画像、記事のタイトル、説明文などを表示させるための要素のことです。

OGPはいわゆるHTML要素のひとつで、ソースコード内にタイトルやURL情報を含んだmetaタグを記載して設定します。

企業のオウンドメディアの記事やビジネスブログでは欠かせない存在となっており、OGPが設定されていないWebページはSNS側で何が書かれているのかわかりづらく、シェアはなかなか進みません。

たとえばOGPを設定した記事をFacebookでシェアすると、次の画像の緑枠部分のように記事内容が表示されます。ここでサムネイルとして表示される画像を「OGP画像」と呼び、ユーザーの目を引く役割を果たします。

設定するメリット

OGPを正しく設定すれば、リンク先のWebページの内容をユーザーにわかりやすく伝えられます。その結果、リンクのクリック率が上がり、多くの訪問者を呼び込めるようになるでしょう。

特に、ユーザーの興味を惹くサムネイル画像や、魅力的なタイトルを表示させることで、SNS内で拡散される可能性も高まります。SNSのユーザーがついクリックしてしまうような画像や、ページの説明文などを表示させると効果的です。

OGPの設定方法【基本設定】

OGPはWebサイトのHTMLソースコード内にmetaタグを記述して設定を行います。HTMLのある程度の知識は求められますが、専門的な知識は必要ありません。設定する場所と記述する内容さえわかれば、簡単に設定することができます。

【OGPの設定手順】

【OGPの設定イメージ】

head要素内に「prefix」属性を追加する

はじめに、ページでOGPを使用する宣言を行います。head要素内に「prefix」属性を追加しましょう。

トップページの場合

サイトのトップページにOGPを設定する場合は属性値の「website」を入力して「prefix」属性を追加します。

記事ページの場合

サイトトップ以外の記事ページにOGPを設定するときは「article」の属性値を使います。

Facebook以外でシェアする場合

これまでの「prefix」属性の記載方法はFacebook用の設定に用いられる方法です。Twitterなど他のSNSなどでシェアする場合は以下の記述でかまいません。

metaタグで所定の要素を追加する

OGPの使用宣言を行ったら<meta>タグを使って、OGPで表示させるWebサイトのURLやタイトル、ページの種類などを設定していきます。

【使用するmetaタグ一覧】

og:url【対象ページのURL】

対象となるページのURLを指定します。このとき、URLは絶対パスで記述しましょう。相対パスを使って設定してはいけません。

たとえば「https://example.com/images」というURLを持つページをOGPの対象としたい場合は、以下のように「og:url」タグを記載します。

【絶対パス】(OK)

【相対パス】(NG)

【絶対パスと相対パス】

サイトのURLやファイルをリンクで結ぶ際に使用する道順のことを「パス」と呼びます。パスは目的地の指定方法によって「絶対パス」と「相対パス」の2つに分かれます。URLの書き方によって呼び方が変わると考えるとわかりやすいです。

OGPを設定する際には絶対パスを使ってURLの記述を行う必要があるため「http://」や「https://」から始まるURLを記載してください。

og:type【Webページの種類】

Webページの種類を指定します。「og:type」タグを設定することで、SNS上での表示形式が変化します。

トップページの場合は「website」、記事ページなどトップページ以外の場合は「article」の属性値を使ってください。

たとえば記事ページにOGPを設定する場合は、以下の例にならって「og:type」タグを記載します。

og:title【対象ページのタイトル】

対象ページのタイトルを指定します。ページに設定したタイトルと同じものを基本的に設定しますが「og:title」に設定した方が優先的に表示されます。タイトル表示の観点からも文字数は20文字以内が適切です。

og:image【表示したいサムネイル画像のURL】

SNS上で表示したいサムネイル画像のURLを指定します。「og:url」タグを記述するときと同様に、画像のURLを絶対パスで記載してください。相対パスでURLを指定すると画像がうまく表示されないので注意しましょう。

なおFacebookにおける設定の場合、画像サイズを「1200×630p」にすると表示が最適化されます。また画像のフォーマットは「PNG」が推奨されています。

og:site_name【Webサイトの名前】

Webサイトの名前を指定します。サイト名やブランド情報は「og:title」ではなく「og:site_name」に記載してください。

og:description【対象ページの説明文】

対象ページの説明文を指定します。表示文字数の観点からも80～90文字を目安に、ページの概要を説明する内容を記載しましょう。

ぴったりのCMSを無料で診断する

FacebookのOGP設定方法

Facebookでは基本設定にあわせて個別のOGP設定が可能です。設定は必須ではありませんが、Facebookインサイトを利用したい場合は設定しておきましょう。

fb:app id【FacebookのアプリID】

アプリIDを指定して、サイトの管理者情報をFacebookに伝えることができるタグです。設定しなくても動作しますが、できるだけ設定しておくとよいでしょう。

いいねの数や閲覧者の人数、ユーザーの目に止まりやすい時間帯などを確認できる「Facebookインサイト」が利用可能になります。またFacebookのアプリIDは「Facebook for developers」から取得できます。

TwitterのOGP設定方法

Twitterにも個別のOGP設定が存在しており、共通設定にあわせて表示形式やユーザー名を指定します。

twitter:card【カードの種類】

Twitter上における記事の表示形式を指定するタグです。

カードの種類とはTwitter上で表示される形式のことで、次の4種類があります。

シェアするページの用途にあわせて、適切なカードの種類を指定しましょう。

twitter:site【@Twitterのユーザー名】

Twitterのアカウントを指定するタグです。@から始まるユーザー名を指定値として記載しましょう。このとき「@」マークも忘れずに記載してください。

OGP設定を確認する方法

設定したOGPを確認する方法を説明します。Facebookの場合はシェアデバッガーを使用し、Twitterの場合はCard Validatorを使って正しく表示されているか確認します。どちらも無料で簡単に使えるので、シェアされる前に必ずチェックしておきましょう。

Facebookの確認方法

FacebookでシェアされたWebページのOGPを確認するには「シェアデバッガー (Facebookデバッガー)」を使うのが一般的です。

シェアされた記事のOGP設定が確認できる無料のツールで、記事がユーザーにシェアされる前に確認することで、画像が表示されなかったり、違った画像が表示されたりするなどのバグを未然に修正できます。

Facebookにログインした状態でデバッガーのページを開き、対象記事のURLを入力して「デバッグ」ボタンをクリックするだけなので、誰でも簡単に利用できます。

Twitterの確認方法

Twitterの場合は「Card Validator」と呼ばれる表示検証ツールを使って、OGPの設定を確認します。

使い方は簡単で、Card Validatorのサイトにアクセスし、「Card URL」の部分に、OGPを設定したWebページのURLを入力するだけです。

後は入力ボックスの下にある「Preview card」をクリックすれば、OGPの表示が確認できます。何度かクリックして、正しく表示されるかチェックしましょう。

OGP画像の適切なサイズ

OGPは設定する画像の大きさによって、実際に表示される画像サイズが大きく変わります。魅力的なWebサイトに見えるように、適切な画像サイズを設定しましょう。

FacebookのOGP画像サイズ

Facebookで表示されるOGPの画像は、タイトルの上に大きな横長画像が表示されるパターンと、タイトルの左側に小さめの画像が表示されるパターンの2種類があります。

大きい横長画像で表示させたい場合は「1200×630px」以上が推奨されており、最低でも「600×315px」の画像が必要とされています。それよりも小さい画像の場合、タイトルの左側に小さなサイズで表示されるので注意が必要です。大きな画像の方が目立つため、拡散されやすいでしょう。

TwitterのOGP画像サイズ

TwitterのOGP画像は、「Summary」カードと「Summary Card with Large Image」のどちらを選択するかによって、表示されるサイズが変わります。

Summary は「144×144px」が最小の画像サイズで、比率「1:1」で表示されます。それに対して、 Summary Card with Large Imageは最小サイズが「600×314px」で、「1.91:1(約1:2)」の比率で画像が大きく表示される仕様です。OGPの画像を大きくして記事を目立たせたい場合は、 Summary Card with Large Imageに設定します。

なお、画像はFacebookのOGPと併用も可能なので、両方で使いたい場合は、Facebook上で大きく表示される「1200×630px」にしておくとよいでしょう。

OGP画像の更新方法

OGP画像を新しく指定したにも関わらずうまく反映されない場合、SNS上にキャッシュがそのまま残っていることがほとんどの原因です。

そのためキャッシュをクリア(削除)してしまえば、更新内容が反映されて新しいものが表示されるようになります。

OGP画像の更新方法【Facebook】

Facebookの場合、「シェアデバッガー (Facebookデバッガー)」を使ってキャッシュ削除を行います。

【操作の手順】

更新後の画像が画面に表示されたら、新しいOGP画像に更新されたこととなります。

OGP画像の更新方法【Twitter】

TwitterのOGP画像の更新は「Card validator」を使って実施します。

【操作の手順】

設定画像の入力確認時に自動でキャッシュ削除を実行し、新しい画像への更新が反映されます。

ぴったりのCMSを無料で診断する

おすすめのOGP画像シュミレーター

作成したOGP画像がどのように表示されるのかを確認できるシュミレーションツールを紹介します。いずれも無料で利用できるうえにアカウント登録なども不要なので、OGP画像のデザインやサイズ変更を行う際にぜひ活用してみてください。

OGP画像シュミレータ

「OGP画像シュミレータ」は画像ファイルを画面上にドラッグ&ドロップするだけで、Facebookのタイムライン上にどのような表示がされるのかを確認できるツールです。

推奨されている「1200×630px」の画像サイズに基づいた大きなレイアウトや、小さなサイズでの配置も一括で確認できるため、画像のデザインがしやすくなります。

Facebookでのシェアを想定した画像設定を行う際におすすめのシュミレーターです。

ラッコツールズ

「ラッコツールズ」は見出しタグの抽出や画像のリサイズを行えるWeb総合ツールです。OGP確認のツールも提供しており、URLを入力して設定ごと確認したり、画像をアップデートして画像のレイアウトを確認したりすることができます。

Facebookでのレイアウトはもちろん、Twitterやはてなブックマーク、LINEにおける表示情報も確認可能。またPCとスマホのデバイス別でレイアウトを表示することもできます。

Facebookだけでなく、複数のSNS上でシェアすることを想定した場合におすすめのシュミレーターです。

OGP設定でアクセス数をアップさせよう

OGPの概要と具体的な設定方法を解説しました。OGPを設定することで、Webページの内容を魅力的かつ分かりやすく伝えられるため、SNS上での拡散を狙っているなら必須の要素です。

設定場所と記述内容さえ理解しておけば他のHTMLの知識は不要なので、誰でも簡単に設定ができます。OGPの有無でリンクのクリック率が大きく変わってくるため、オウンドメディアを運営している企業は必ず設定するようにしましょう。

クリック率が向上するということは、それだけアクセス数アップの効果も期待できるということです。OGPを設定して、集客効果の改善を図ってみてはいかがでしょうか。

ぴったりのCMSを無料で診断する