OGPの設定はWebサイトのページをSNS上に表示するときに、ページの「タイトル」「説明文」「画像」を表示することができ、SNS上でのページ情報を視覚的に理解しやすく表示変更できる設定です。
OGPの読み方は「おーじーぴー」
「Open Graph Protocol」が正式名称で頭文字を略語にしてOGPと読みます。
OGPの設定方法を手順にしてまとめました。HTMLファイルに記述するOGPの設定は数行追加するだけなので覚えるのが簡単なのも利点です。
OGPの設定をする手順
WebサイトにOGPの設定をする手順は2ステップです。
- OGPを使用するための宣言をHTMLファイルに記述
- OGPで表示するページ情報をheadに設定
OGPの設定をする手順はとてもシンプルです。HTMLファイルに記述する具体的な書き方を説明します。
OGPの使用をHTMLファイルで宣言
WebサイトのページにOGPの設定をする場合はOGPを使用するページのHTMLファイルにOGPの使用を宣言してから設定をします。
<html lang="ja" prefix="og: http://ogp.me/ns#">
HTMLファイルでOGPの使用を宣言する記述場所は<html>開始タグです。
<html>開始タグにprefix属性を記述して値にはog: http://ogp.me/ns#を記述します。
HTMLファイルでOGPの使用を宣言する記述はこれで完了です。
ちなみにproperty属性をHTMLの属性だと思っていましたがHTMLの属性ではなくてRDFaの仕様のようです。
OGPの設定をメタデータで記述する
次にOGPの設定です。実際にWebサイトのページがSNSでシェアされたときに表示するページの「URL」「タイトル」「Webサイトのタイプ」「画像」などをメタデータで記述して設定します。
メタデータの記述はHTMLのmetaタグを使用してHTMLファイルのhead要素に記述します。
<head>
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:type" content="Webページのタイプ">
<meta property="og:image" content="サムネイルとして表示したい画像パス">
</head>
「URL」「タイトル」「Webサイトのタイプ」「画像」のOGP設定にはHTMLファイルのhead要素に記述したmetaタグにproperty属性とcontent属性をセットで記述したメタデータにして設定します。
property属性の値のog:に続くurlやtitle、typeのプロパティに続くcontent属性の値にOGPで表示される内容を設定しますが、今回紹介しているOGPプロパティの設定は、OGPの設定をするHTMLファイルのページに対しての内容をメタデータとして設定します。
| プロパティ | 内容 |
|---|---|
og:title | ウェブページのタイトル |
og:description | ウェブページの説明 |
og:url | ウェブページの正規URL |
og:image | ページの画像として使用する画像URL |
og:type | ウェブページのタイプを示す文字列 |
OGPプロパティの設定で間違えやすそうなのが「og:type」と「og:image」です。
og:typeのcontentの値にはOGP設定するページの種類を設定するのですが、例えばWebサイトのトップページにOGPの設定をする場合には、og:typeのcontentの値に「website」を設定します。
トップページ以外のブログの投稿ページには「article」を記述して設定します。
OGPのプロパティの種類の詳細がThe Open Graph protocolのページの「Object Types」の章で紹介されています。サイトに適した設定をご確認ください。
The Open Graph protocol – Object Types
HTMLファイルのメタデータのOGP設定で画像を設定する場合の記述も間違えやすいかもしれません。
OGPの設定で画像は絶対パスで指定します。
メタデータのOGPの画像設定を相対パスで記述してしまうと画像が表示できないので絶対パスをproperty=”og:image”のcontentの値に記述するようにします。
OGPの設定で「Twitter」と「Facebook」は独自の設定項目があります。ここまで説明してきたOGPのメタデータの設定に追加でTwitterとFacebookのメタデータを拡張して設定します。
TwitterのOGP設定
<meta name="twitter:card" content="summaryまたはsummary_large_image" />
<meta name="twitter:site" content="＠ユーザー名" />
ツイッターのOGPの設定をメタデータで記述する場合はHTMLファイルのhead要素にmetaタグを記述してmetaタグの属性にname属性とcontent属性のセットを記述して設定します。
メタデータはTwitterカードの種類とTwitterのユーザー名を設定します。
Twitterカードの種類は2つです。
- summary
- summary_large_image
summaryで設定すると小さめのTwitterカードで左に画像、右にはページタイトルと説明文が表示されます。
summary_large_imageで設定すると大きいTwitterカードで上に画像、下にページタイトルと説明文が表示されます。
Twitterのユーザー名はご自身のTwitterアカウントの@から始まるユーザー名を設定します。
FacebookのOGP設定
FacebookのOGP設定はしなくても表示はできます。
Facebookインサイト(Facebookからサイトへのトラフィック分析)を利用する場合はmetaタグのメタデータにapp_idを設定する必要があるので少し説明しておきます。
<meta property="fb:app_id" content="[app_id]">
FacebookのOGP設定をメタデータで記述するときには、アプリID（app_id）をmetaタグで設定しHTMLファイルのheadに記述します。
プロパティの値をfb:app_idに、contentの値にFacebookで取得したapp_idを設定します。
app_idの取得は「Facebook for Developers」を登録することで取得ができます。
詳しく説明したいとこですが、久しぶりにFacebook開いたら何故か停止されていたのでFacebookのOGP設定をする多少のヒントにしてください…
設定したOGPの表示を確認する
OGPの設定をHTMLファイルに記述してから、設定したOGPの表示を確認する方法を説明します。
「Facebook」「Twitter」「はてなブックマーク」「LINE」のOGPの表示を一括で確認する場合にはラッコツールの「OGP確認」のページが便利です。
ラッコツールのOGP確認ページで、設定したOGPの表示を確認するやり方は簡単で、HTMLファイルにOGPの設定をしたWebサイトのURLを入力するかコピペをして確認ボタンをクリックします。
すると「Facebook」「Twitter」「はてなブックマーク」「LINE」でのOGPの表示確認ができます。
TwitterでOGPの表示を確認
Twitterの公式ページでOGPの表示を確認することもできます。
Card validatorのページで確認したいURLを入力して「Preview card」ボタンを押します。
するとOGPの設定をHTMLファイルに記述したOGPプロパティの画像やページタイトル、説明文が問題なく表示できているか確認できます。
FacebookでOGPの表示を確認
Facebookの場合は..「シェアデバッガー」というページでOGPの設定を確認することができます。
FacebookのシェアデバッガーでOGPの設定を確認する場合にはFacebookにログインしてから、確認したいURLを入力して「デバッグ」ボタンクリックします。
まとめ
OGPの設定をHTMLファイルに記述するのは記述量が少ないので簡単に設定できますが、OGPの設定方法を覚えたての頃は少し悩むかもしれません。
HTMLファイルに記述するOGPの設定に悩んだときには、有名なサイトYahooやAppleのページのhead要素を検証ツールで確認してみるのも参考になると思います。またOGPを設定するWebサイトのタイプに似たサイトのメタデータを確認して参考にしても理解は深まるかと思います。
