2022年3月22日 WEBを勉強中の方や企業のWEB担当者の方必見！OGPの基本と設定方法

こんにちは。新人webデザイナーのHIROです。
今回は、OGPに関しての解説記事です。

・OGPとは
・OGP用の画像を作成する
・OGPの設定方法
・TwitterやFacebookで設定したはずのOGPが上手く表示されない時は

　

OGPとは

OGPとは「Open Graph Protcol」の略で、htmlのheadタグ内に記述される要素のひとつです。このOGP、なかなか聞き慣れない言葉かもしれませんが、実は普段SNSを利用している人であれば、日常的に目にしているものです。
　

上の画像は、Twitterに共有されたサイトのリンクを含むツイートですが、ここでのサイトの画像とその説明の部分がOGPに当たる部分です。他にも、FacebookやLINEなど、様々なSNSでサイトが共有された際に、設定している場合はそのページのOGPが表示されます。
　

特に、SNSでのマーケティングに力を入れているサイトや、SNSでの拡散を狙って広く集客を行いたいサイトでは、OGPの設定は必須になってくるでしょう。
ちなみに、OGPの設定をしなかった場合には、下のような表示になってしまいます。
　

これでは、どんなに魅力的な内容のサイトでもページのタイトルしかわからず、画像も表示されていないので、ユーザーの関心を引くことは難しいでしょう。
　

また、画像の準備をきちんとしていないと、せっかく設定したOGPの画像が上手く表示されない場合もあります。
　

では、しっかりとしたOGPを設定するにはどうすればいいのか、次から解説していきます。
　

OGP画像を準備する

まずは、OGPとして表示される画像の作成を行います。サイトのロゴだったり、メインビジュアルがあるサイトならその画像を使用してもいいですね。
　

OGP画像の作成を行う際に特に注意したいのはそのサイズです。画像のサイズを意識して作成すると、OGPとして表示された際に意図しない見え方になるのを防ぐことができます。
　

また、同じOGP画像を設定していても、Facebookだと長方形、LINEだと正方形にトリミングされて表示されるなど、SNSによってOGPとして設定した画像の表示領域が異なる場合があるので、それらに適応させる目的もあります。
　

では、一体どのサイズに合わせてOGP画像を作成すればいいのでしょうか。
基本的には「1200px*630px」の画像を1枚作成すればOKです。このサイズで作成すると、長方形の場合はそのまま全体が表示されます。正方形の場合は中心部分が表示されるので、表示したい要素に関しては中心の「630px*630px」の正方形の範囲内に収まるように作成します。
　

私は毎回測って作成するのが面倒なので、イラレで「1200px*630px」のカンバスを作成し、中心に「630px*630px」のガイドを引いたテンプレートを作り活用しています。
　

OGPに使用する画像が作成できたら、最後にその画像が実際にどのように表示されるのかの確認を行ってみましょう。確認にはネット上に公開されているシミュレータサイトが便利です。ドラッグ＆ドロップで作成した画像を配置すると、各サイズのOGPとして表示された際の見た目を確認することができます。
　

OGPの設定方法

では次に、作成したOGP画像とページの各種説明項目を記述し、OGPの設定を行いましょう。
　

なお、今回は直接htmlファイルをエディタで編集してOGPを設定する方法をご紹介します。
WordPressをご利用の方は管理画面のサイトの設定や、プラグインの「All in One SEO 」などを利用すると簡単に設定することができますので、そちらも検索してみてください。
　

まずは、OGPとして編集する内容を確認する

OGPの記述はhtmlのhead内に記述していきます。OGPに関する設定は複数記述することができるので、今回は基本的な役割を持つ項目に絞り、順を追って説明していきます。
　

<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページのタイプ" />
<meta property="og:description" content="ページに関する説明" />
<meta property="og:url" content="ページのurl" />
<meta property="og:site_name" content="サイトの名前" />
<meta property="og:image" content="OGP画像の絶対パス" />
<meta name="twitter:card" content="Twitterで共有された際に表示されるカードのサイズ"/>

①ページのタイトルを記述する”og:title”

<meta property="og:title" content="ページのタイトル" />

ここには、そのページのタイトルを入力します。
OGPの記述は基本的にサイト内の全てのページで行う必要があるので、ここにはそのページ毎のタイトルを記述していきます。
　

参考までに、弊社のトップページの”og:title”は

<meta property="og:title" content="東京・代々木のWeb企画制作 動画・コンテンツ制作会社｜株式会社アジンコート">

ブログ記事一覧のページの”og:title”は

<meta property="og:title" content="スタッフブログ | 株式会社アジンコート｜東京・代々木のWeb企画制作 動画・コンテンツ制作会社">

のように記述されています。
　

②ページのタイプを記述する”og:type”

指定可能なタイプは複数種類存在するのですが、基本的にトップページには

<meta property="og:type" content="website" />

を記述し、下層ページには

<meta property="og:type" content="article" />

を設定します。
　

③ページの説明を記述する”og:description”

<meta property="og:description" content="サイトに関する説明" />

ここではページの説明を簡単に記述しましょう。
　

④ページのURLを記述する”og:url”

<meta property="og:url" content="ページのurl" />

ページのURLを記述します。絶対パスで記述する必要があります。
　

⑤サイトの名前を記述する”og:site_name”

<meta property="og:site_name" content="サイトの名前" />

ここにはページではなく、サイトの名前を記述します。
　

⑥OGP画像を設定する”og:image”

<meta property="og:image" content="OGP画像の絶対パス"/ >

ここにはサイトのOGP画像のURLを絶対パスで記述します。ちなみに、ここでの絶対パスとはブラウザのアドレス欄に表示されているURL(=OGP画像が置かれている場所のURL)のことを指しています。
この部分に限らず、絶対パスで記述する必要のある箇所を相対パスで記述してしまうと上手く表示されないのでご注意ください。
　

⑦Twitterで共有された際に表示される画像のサイズを設定する”twitter:card”

<meta name="twitter:card" content="Twitterで共有された際に表示されるカードのサイズ"/>

meta name=”twitter:○○○”となっている箇所は、全てTwitter固有の設定になり、これから解説する”twitter:card”以外にも複数の設定が可能です。
“twitter:card”は、Twitterで表示される際の”og:image”と”og:description”のサイズに関わる部分になります。
　

ツイート上で大きく画像を表示したい際にはこのように記述し

<meta name="twitter:card" content="summary_large_image" />

小さく表示したい際には下のように記述します。

<meta name="twitter:card" content="summary" />

　　

以上が基本となるOGPの設定に関する記述になります。他にもより細かい設定や、Facebook専用の設定項目などもありますが、基本的には上記の記述を行えば問題なく各SNSで表示されるはずです。
　

ここまでのOGP設定を完了し、サイトの情報を更新することができたら、実際にどのようにOGPが表示されるのか確認を行ってみましょう。
　

試しにページをSNSで共有してみるのもありですが、これもWeb上で一括確認できる便利なツールが公開されています。
フォームに確認したいサイトのURLを入力後、「解析する」ボタンを押すことによって、実際に公開されているページのOGPの設定がどのようになっているか確認することができます。
　

　

TwitterやFacebookで設定したはずのOGPが上手く表示されない時は

サイトを一度公開した後にOGP情報を更新し、その後TwitterやFacebookで共有されたOGPを確認すると、更新したはずのOGP情報が上手く反映されていないことがあります。
　

これは、TwitterやFacebookで一度でもURLが共有されると、その時の情報がTwitterやFacebook側にしばらくはキャッシュとして残り続けるために起こってしまう現象です。
　

この現象を回避するには、一度公開したサイトのOGPを更新した際に、TwitterやFacebook側のキャッシュも一緒に更新してあげる必要があります。TwitterやFacebookに残っているキャッシュは、各サイトのディペロッパーページにて更新することができます。
　

■ Twitterのキャッシュを更新する「Card validator」

　

サイトにアクセスして「Card URL」にページのURLを入力し、「Preview card」を押すことで新たにキャッシュが取得されます。
　

■ Facebookのキャッシュを更新する「Meta for Developers シェアデバッガー」

　

サイトにアクセスしフォームにURLを入力後「デバッグ」を押します。

ちなみに、先程紹介したOGPの設定をそのまま記述していくと、結果画面で修正が必要な問題として「次のプロパティは必須です: fb:app_id」というエラーが出ますが、OGPの表示に関しては特に問題ありません。Meta for Developersに登録してこのアプリIDを取得すると、Facebookのアナリティクス機能が利用できるようになるようです。
　

まとめ

いかがでしたか？
　

今回はOGPについての解説記事でした。
次回もアジンコートブログをよろしくお願いします。

　
ではまた！