WEBZINNE

website-buildingのサムネイル

ウェブサイト構築

OGP（Open Graph Protocol）とは？メリットや設定方法まとめ

WEBZINNEトピックス編集部のアイコンWEBZINNEトピックス編集部

公開日：2019年11月15日

Webサイト・ページをソーシャル上見栄え良くするための必須設定「OGP（Open Graph Protocol）」。そのメリットやデメリット、OGP設定の基本や、FacebookやTwitter向けの設定方法をまとめました。

OGPとは

OGP（Open Graph Protocol）は、Facebookが提唱したプロトコルの一種で、SNSでシェアされる情報をサイト運営者が指定できる方法です。

OGP（Open Graph Protocol）

Googleのクローラーボットと違って、SNSでページリンクをシェアする際に、FacebookやTwitterなどのSNS側が取得するのはHTMLのtitleタグとmeta descriptionぐらいで、画像サムネイルなど他のページ情報は取得してくれません。

そうした問題に対処できるのがOGPという方法です。

OGPはFacebookが提唱するプロトコルですが、Facebook以外のサービスでも取り入れられていて、OGPに対応している主なサービスには、

  • Facebook
  • Twitter
  • はてなブックマーク
  • LINE

などで、入力されたURLを解析する際に使われています。

OGPを設定するメリット・デメリット

メリット

OGPは、「SNSなどでシェアされる時に表示させたい情報」をあらかじめこちらから用意しておくことによって、SNS側が取得してくれない情報をSNSに表示させるための設定です。

つまり、OGPを設定しておくことで、SNS上での見え方をこちらが指定できるというメリットがあります。

SNSでの情報は瞬時に流れていってしまうため、いかにきちんとページの良さを伝えるのが非常に重要です。そのためにも、ページのサイネイルやキャッチコピーをOGPでしっかり設定して、SNSでシェア・拡散されやすいようにできるのがOGPの最大のメリットです。

デメリット

OGPを設定することでページやサイトが被るマイナス要因は特にありません。あえてデメリットをあげるとしたら、HTMLのヘッダーがタグが長くなることでしょうか。

かつてはHTMLヘッダーが長いとSEOで不利と言われていましたが、最近はそんなことはないと言われているので、実質デメリットはありません。

OGPを設定する

ここからは、サイト上にOGPを設定する方法を見ていきます。

OGP設定の基本

OGPは、特別な設定というわけでなく、「ただのHTMLヘッダーのmeta情報」です。やることは、HTMLの「<head>」タグの中に必要な情報を記述するだけです。

下記は、OGP公式サイトに掲載されている例です。

<meta property="og:title" content="Example title of article">
<meta property="og:site_name" content="example.com website">
<meta property="og:type" content="article">
<meta property="og:url" content="http://example.com/example-title-of-article">
<meta property="og:image" content="http://example.com/article_thumbnail.jpg">
<meta property="og:image" content="http://example.com/website_logo.png">
<meta property="og:description" content="This example article is an example of OpenGraph protocol.">

書き方は、

<meta property="項目" content="中身">

というフォーマットで、SNS側によって受け取る情報が異なるため、propertyの部分で渡す情報をコントロールします。

必ず設定しておきたいOGP項目

どのサイトでも使われるのは、

  • og:title (タイトル)
  • og:description (説明文)
  • og:url (ページのURL)
  • og:image (サムネイルのURL)

で、最低でもこの4つは設定しておきましょう。

タイトルを指定するOGP title(og:title)

表示される際のタイトルです。ここは特に説明は不要かと思いますが、サイトによっては、HTMLのタイトルをパンくず構造にしているケースもあると思いますので、SNSなどでのクリック率を考えると、「短くてクリックされやすいタイトル」を別途用意する方が良いでしょう。

導入文を指定するOGP description(og:description)

こちらもmeta descriptionなどと同じで基本問題ありません。

ただし、120文字程度まで表示される検索エンジンと違って、少ないスペースで表示するOGPの場合70文字程度に収めるのがコツです。ただし、文字数が多い場合でも、三点リーダーで省略されるため特に神経質になる必要はありません。

リンク先を指定するOGP URL(og:url)

こちらも基本はページのURLで問題ありません。ただし、広告のランディングページやAMPページなどURLが希望するものと違うケースもあるので、きちんと正規化されたURLを指定するようにしましょう。

SNSからのリンクシグナルはSEOには関係ないと言われていますが、どこかで引用されたりする時にリンクパワー集約するという意味でも、正規化されたURLが好ましいです。

アイキャッチを指定するOGP image(og:image)と画像サイズ

OGP imageは、リンクを取得する際にアイキャッチとして表示してほしい画像のURLを指定する項目です。

指定する画像に制限ありませんが、

  • 最低でも 600 x 315 px
  • 1200 x 630 px 以上
  • 縦横比をなるべく1.91:1に近づける

というのが、OGPの推奨スペックです。

この推奨条件から、OGP imageには1200 x 630 px画像をしているサイトを多く見かけます。

og:typeの使い分け

og:typeについては、

  • Website (サイトトップページ)
  • Article (記事ページ)

を指定することができます。ページの種類によって使い分けするのがベストです。

Facebook向けのOGP設定

Facebookで推奨されているOGP項目は下記の通りです。

わかりやすくするために、content部分は本記事の内容を例にしています。

項目 property content例
ページURL og:url https\://www.webzinne.com/topics/p1bn0wihqf/
ページタイプ og:type website
ページタイトル og:title OGP（Open Graph Protocol）とは？メリットや設定方法まとめ
ページの画像 og:image https\://www.webzinne.com/amp-thumb.png
ページの画像のalt og:image:alt WEBZINNEのロゴ
ページの説明文 og:description Webサイトをソーシャルシェアしてもらうために必須の設定「OGP（Open Graph Protocol）」。そのメリットや設定方法をまとめました。
サイト名 og:site_name WEBZINNE
ページ更新日 og:updated_time 1573796876
Facebook アプリID fb:app_id 0
インスタント記事のマークアップURL ia:markup_url
インスタント記事のマークアップURL(開発) ia:markup_url_dev
インスタント記事のルールURL ia:rules_url
インスタント記事のルールURL(開発) ia:rules_url_dev

Facebookインスタント記事やFacebookアプリ（propertyにiaが付いている）の項目は必要でない場合は不要なので、propertyに「og」があるものが必須と考えればOKです。

Twitter向けのOGP設定

Twitterで推奨されているOGP項目は下記の通りです。Facebookと基本は同じですが、一部Twitter独自の項目もあります。

項目 property content例
ページURL og:url https\://www.webzinne.com/topics/p1bn0wihqf/
ページタイトル og:title OGP（Open Graph Protocol）とは？メリットや設定方法まとめ
ページの画像 og:image https\://www.webzinne.com/amp-thumb.png
ページの説明文 og:description Webサイトをソーシャルシェアしてもらうために必須の設定「OGP（Open Graph Protocol）」。そのメリットや設定方法をまとめました。
Twitterカードタイプ twitter:card summary
サイトのTwitterユーザーアカウント twitter:site @ユーザー名
作成者のTwitterユーザーアカウント twitter:creator @ユーザー名

Twitter独自の部分は、propertyが「twitter:」となっている部分で、主にTwitterで上での表示方法やTwitterアカウントとの紐付けに使われます。

重要なのは、twitter:cardで、Twitterでページがシェアされた際に、どのようなデザインにするかを指定できます。

twitter:cardで指定できる値は下記の通りです。

  • summary
  • summary_large_image
  • app
  • player

OGPの確認方法（デバッガー）

OGPの設定がきちんとできているかは、FacebookやTwitterの公式デバッガーでテストできます。

FacebookのOGPデバッグ

Facebookには公式デバッガー「Facebook シェアデバッガー」があり、Facebookでどのように表示されるかをテストできます。

Facebook シェアデバッガー

FacebookのOGP項目は特殊なものが多いので、サイトでOGP設定を作成・変更した際は、一度はテストすることをオススメします。

なお、「Facebook シェアデバッガー」を使うには、Facebookアカウントが必要です。

TwitterのOGPデバッグ

TwitterにはCard validatorというOGPデバッガーがあります。

Card validator | Twitter

Twitterの専用項目であるsummary_large_imageなどの反映状況など項目の数値の確認や、実施にTwitterでの表示され方も確認できます。

Facebook シェアデバッガーとは違い、Twitterアカウントがなくても誰でも自由に使えます。

OGPのメリット・デメリット、設定方法を見てきました。

一度覚えてしまえば使いこなすのは非常に簡単で、しかもSNSでの見栄えもよくなるので、ぜひ使ってみてください。

「ウェブサイト構築」の記事