OGPとは？タグや画像サイズの設定方法と
確認ツールや注意点・表示されないときのチェック事項
今のサイト制作において、必須と言っても過言ではなくなりつつある「OGP」について今回は取り上げてみたいと思います。WordPressなどで作る場合、知らなくても勝手に設定してくれるテーマなども増えたことで知らないままという方もいたりするかもしれません。
特に静的なHTMLやLPなどを制作する際には自分たちで設定しなければならないので、どういう項目で何を設定していくのかなど、基本的な使い方や設定方法など解説していきますので、おさらいがてら振り返ってみましょう。
そもそもOGPとは？
OGPとは、Open Graph Protocolという文字の頭文字を取った言葉になります。
どういうものかと言えば、X（旧Twitter）やFacebookなど各種SNSや、ChatworkやLINEなどチャット系ツールなどでサイトの各ページや記事、商品ページなどが紹介された際にどういう表示をさせるかといったことを設定する事ができる仕組みになっています。
OGPをきちんと正しく設定していれば、SNSで自分たちのサイトやページが紹介された時にそのページにあった画像、内容で紹介されることで、よりクリックされやすくユーザーをサイトに導きやすくなります。
一方、正しく設定されていないと、画像が表示無かったりページの中身と関連の無い内容で紹介されてしまうこともあったりするため、正しく設定する事が必要となります。
OGPを設定すべき理由とSEOのメリットについて
OGPを設定する理由としては、XやFacebookなどSNSで紹介された時に画像やテキストを正しく表示するためというのが主な理由です。
今やSNS時代と言っても良いほどにSNSを活用する時代です。
SNSで紹介された自分たちのサイトが、OGPを設定していない場合は表示が崩れたり微妙な見え方になったりしてしまう可能性が出てきます。
適切にOGPを設定しておくことで、ほとんどのSNSで紹介される画像とタイトルを正常に表示する事ができ、どういったサイト・ページなのかを正しく伝える事ができ、結果的にクリック率も上がります。
直接的にSEOへの影響度は少ない
OGPとSEOをよく一緒に語られるケースがありますが、正直なところOGPを設定したからといって検索上位に出るような直接的な影響というのは、ほぼ皆無と言えます。
OGPを設定しただけで上位に出るなら簡単です。
もっと言うならSEOはそんな1つ何かしたからといって劇的に効果が出るようなものでもありません。
ただOGPとSEOがセットで語られるのは、今の時代はシェアの時代でもあります。
X（旧Twitter）やFacebookなど色々なSNSでシェアされ、その紹介されたリンクを辿ってサイトに来て回遊してもらって、、、という流れが出来つつあります。
今ではアクセスの大半がSNSからのアクセスというサイトも多くあるかと思いますが、そういったOGPを適切に設定することで、SNSでシェアされた時に正しく表示された結果、アクセス増につながり、結果としてSEOに効果が出る。といったニュアンスが強いです。
SEOに効果がある・ない関係なく、今の時代ではOGPの設定は必須と言っても過言ではないので、下記に解説する書き方などを見て、しっかり設定するようにしましょう。
OGPのコードについて
OGPを実際に設定しようと思うと、HTMLのコードを書かなければなりません。
とはいえ、実際にはテンプレートというか書く内容というのがほとんどが固定で決まっており、一部分だけを自分たちのサイト用に書き換えれば良いので楽チンです。
特にWordPressの制作などであれば、テンプレートに多くの場合組み込まれていたりするため、それを少し変更していくだけで対処ができるようにもなります。
ただ一方で、静的HTMLサイトなどの場合は全てのページに自分たちでコードを埋め込んでいく必要があるので、コピペしてそのまま変更しないまま使ってしまったり、埋め込みを忘れてしまったりといった人的ミスはよく起こりうるので注意しましょう。
特に、OGPに関してはページの見た目上にはなんら影響を与えないため、チェック時などソースコードを見て確認しないとチェック漏れになったりもするため注意が必要です。
実際に実務で使う際には静的サイトのHTML用と、WordPressサイト用などに自分用の雛形を1つ用意しておけば、あとはそれをコピペなどで使い回しつつ、必要箇所だけを書き換えれば良いので、しっかりと用意しておきましょう。
ということで、実際のOGPのコードをそれぞれ見ていきましょう。
実際のOGPのコード（head編）
OGPを設定する際には、まずheadタグ内に使う宣言をする必要があります。
実際問題としては、この宣言を書かなかったとしてもほとんど問題なく動作してはいるのですが、きっちり宣言しておきましょう。
<head prefix="og: https://ogp.me/ns#">これはどんなサイトやページであっても共通です。
コーポレートサイトだろうと、ランディングページだろうと通販サイトだろうとこの宣言文のコードは変わりません。
昔の解説などでは、http:の非SSLで書かれたり解説されていることもあるかもしれませんが、今の時代というか今のサイト制作でhttps:のSSL化せず作ることはほぼ無いかと思いますので、https:のURLで書いておくのが無難です。
実際のOGPのコード（meta編）
上記の宣言を書けば、あとは1つ1つ設定をしていくだけです。
実際のOGPの設定は、下記のようにhead内のmetaタグで記載していく形になります。
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文（抜粋）">
<meta property="og:image" content="画像のURL">
<meta property="og:site_name" content="サイト名">
<meta property="og:local" content="言語">これら以外にもproperty項目はありますが、基本使うのはこの7項目となります。
また、書き方も決まった形となっているため、この中のcontent=""をサイトやページに合わせて変更していけば問題ありません。
og:type（ページの種類）
これはページの種類を指定するものになります。
色々な値が用意されてはいますが、実際に使うものとしては多くのケースで下記の4パターンになります。
website（トップページなど）blog（ブログトップなど）article（記事・コンテンツページなど）product（商品ページなど）
これら以外に特定のページなどに使うものとしては、profile（プロフィールページ）などもありますが、実際に色々なサイトを調べてみてもそういったページでも、profileを使わず、articleなどに設定して使っているケースが多いのかなと思います。
一般的な制作であれば、上記の4つのタイプでほぼ事足りるのでは無いかと思います。
<meta property="og:type" content="article">og:url（ページのURL）
見て分かる通りにページのURLを指定するものになります。
ここで指定したURLがOGPで表示されるリンク先のURLとなりますので、誤ったURLを記載してしまうと、当然リンク先にアクセスした際に404などのエラーページになってしまうので注意しましょう。
また、URLの記載は相対パスでの記載ではなく、必ず絶対パスでURLを記載するようにしましょう。
<meta property="og:url" content="https://urakata.me">og:title（ページのタイトル）
その名の通り、タイトルを指定するものになります。
一般的には<title></title>と同じものを指定することになるのかなと思います。
タイトルタグの場合、最後にサイト名を入れる事も多いかと思いますので、タイトルタグからサイト名を取り除いたそのページのタイトル部分のみを入れるのが正しいかもしれませんが、実際にシェアされた時、サイト名が入った方が良いとうことで個人的に入れたままにする事もあります。
<meta property="og:title" content="ogpについての解説">og:description（ページの説明文・抜粋）
こちらもその名の通りページの説明文になります。
いわゆる、タグでいうdescriptionのOGP版と考えればわかりやすいかと思います。
ただ説明文まで表示されるかどうかは、それぞれのSNSや媒体・ツールなど次第になってきますので、入れたからといって必ずしも表示されるとは限らない点に注意しましょう。
<meta property="og:description" content="ogpについての説明です。">og:image（画像のURL）
こちらはSNSやチャット系ツールなどでシェアされた時に表示する画像を設定します。
注意点としては、URLの時と同じく相対パスではなく絶対パスでURLを記載するという点です。
サイズは特に決まりはないものの、Facebookで画像の推奨サイズが設定されており、それが「1.91:1」のサイズになるため600px × 315px以上が推奨されていますが、実際は高解像度デバイス向けに1200px × 630pxで作るのが一般的となっています。
1200px × 630pxで作っておけば、他のSNSなどでも使う事ができますので、このサイズで作る事が多くの場合推奨されていますし、そのサイズで作っておきましょう。
<meta property="og:image" content="https://urakata.me/img/ogp.jpg">og:site_name（サイト名）
これもその名の通りでサイト名を指定します。
特に注意事項などもなくサイト名をそのまま指定すれば問題ありません。
<meta property="og:sitem_name" content="裏方ワークス">og:locale（言語）
こちらもその名の通り使用言語を指定します。
海外向けなどでない限り、日本語になるかと思いますので日本語を指定する事が多いはずです。
省略可能にはなっているのですが、デフォルトが「en_US」という事らしいので、日本語を指定しておくのが無難です。
<meta property="og:locale" content="ja_JP">複数言語の場合は「og:locale:alternate」を使う
サイトによっては多言語対応というケースもあるかも知れません。
そういった場合は、og:locale:alternateを使い、該当する言語を全て記載していきます。
<meta property="og:locale:alternate" content="ja_JP">
<meta property="og:locale:alternate" content="en_US"> Facebookを使っている場合の設定
Facebookを活用している場合は、上記の6項目だけでなく下記のFacebook用のfb:app_idも設定しておきましょう。
<meta property="fb:app_id" content="Facebook ID（15文字の半角数字）">fb:app_idについて
簡単に言えばサイトの管理者をFacebookに伝えるタグになります。
この項目自体は必須ではなく任意項目になりますが、Facebookを使っていれば分析ツールでもあるインサイトを使えたりもするので、Facebookを活用しているサイトなら入れておくのがオススメです。
Facebookを活用しているサイトでなければ特に入れる必要はありません。
X（旧Twitter）を使っている場合の設定
X（旧Twitter）を活用している場合も、上記の6項目だけではなくX専用の「twitter:site」と「twitter:card」の2項目を設定する必要があります。
twitter:cardについて
OGPを表示する際に、X上でどう表示するかを指定するタグになります。
カードの種類はブログ用、WEBサイト用、アプリ用、動画サイト用といった形で4種類用意されており、それぞれで見せ方・見え方が変わってきます。
summary
タイトル・説明文・サムネイル画像の一般的な形式になります。
summary_large_image
形式的にはsummaryと同じ形にはなりますが、画像サイズが大きいものを指定します。
Facebookのカードに近い形となり、多くのサイトではこのカード形式が指定されています。
app
アプリ配布用のカード形式です。
アプリ名、紹介文、アプリアイコンなどだけでなく、アプリの評価や価格などの表示も行えます。
player
ビデオやオーディオといった、メディアを表示するときに使われます。
実際にはカードとして4種類が用意されてはいますが、通常のWebサイトにおいては、ほとんど「summary_large_image」を指定することになりますし、実際にこれがほとんどのサイトで使われています。
twitter:siteについて
@から始まるアカウントのIDを入れます。
コンテンツの作成者や管理者のTwitterユーザーIDを入力します。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@urakata_me">OGPの設定における注意点など
ではOGPを設定していくにあたっての注意点などを軽く紹介しておきます。
意識的にコードチェックする癖を
OGPは最初の方にも述べた通り、Webサイトの閲覧という部分においては一切関与しないものになります。OGPのURLや画像のパスの設定が間違っていてもサイトの閲覧に関しては問題となることはありません。
そのため意識的にチェックしなければ、コピペしたままになっていたり、そもそもタグが入っていなかったりとケアレスミス的なものが起こりやすくなってしまいます。
クライアント側からしてもWeb関連に強いクライアントであればチェックされますが、そうでなければソースコードをチェックなどまでされないため、納品後に「あ、間違ってた…」なんて事が起こりえます。
定期的にチェックするのか何かしらのルールを設けるのかは人次第かと思いますが、チェックする癖などを付けておかないと、ほとんど放置したままになってしまいがちなため注意しましょう。
設定した後は、正常に表示されているかなどをチェックするように心がけておきましょう。
同じOGPは設定しない
OGPはいわばそのページの情報を伝えるものになります。
当然ながら、サイトにおいて同じページというのは基本的には存在しないはずです。（システム的に作られたなど例外的なものを除いて）
WordPressなど動的に生成されるものであれば自動反映ができますが、静的なHTMLサイトの場合、1つ1つ設定しなければならずページ数分だけ設定をしなければならず作業も多くなってしまいます。
ただ設定をしないと、折角SNSやチャットツールなどで紹介されたときに上手く表示されないといった事になってしまい機会損失へと繋がる可能性もあります。
手間で面倒ではあったとしても、同じOGPを使い回したりせず、1つ1つしっかり個別のOGPの表示ができるようにしっかい設定をしておきましょう。
URLは全て絶対パスで指定
各項目のところでも書いていますが、URLは絶対パスを指定しなければなりません。
サイト制作をする場合、多くは相対パスを使って記載する事が多いかと思いますので、つい癖で相対パスで書いてしまいそうになるかもしれませんが注意しましょう。
画像のURLもページのURLも、全て必ず「絶対パス」で指定するようにしましょう。
WordPressの場合プラグインを使わない設定で
このあたりは賛否両論かもしれませんが、制作に携わるのであれば、OGPの設定くらいはテーマで設定できるようにして、プラグインを使って設定するのは避けた方が無難と言えます。
この辺りは個人的な見解になるかもしれませんが、プラグインはできるなら減らせるだけ減らした方が色々な面から良いと言えるので、そこまで難しくないOGPの設定をあえてプラグインを使って設定するのは勿体ないとも言えます。
プラグインが使えなくなったりしたり、何かしらの不具合が出た時にOGP全てが未設定という状況になってしまうため、出来ればWordPressで作られるサイトの場合はテーマ内で設定するようにしておきましょう。
OGPにはキャッシュが反映されることも
OGPを設定したのに、うまく反映されないという悩み？ぼやき？をよく見かけますが、そういう時はだいたい以前に設定しているキャッシュを見られているというケースが多いです。
通常のサイトで画像が古いなどの場合、キャッシュをクリアをすれば最新の情報に更新されますが、OGPの場合は自分たちの環境ではなくSNS側にキャッシュされる事も多いため、SNSなどによっては待つ以外に手はない場合があります。
Xなどでは1週間毎にクローラーがきてキャッシュされるといった情報が公式サイトに記載されているため、OGPの更新後に一度ポストしたURLをbitlyを使って再度取得し再ポストすると良いと書かれています。
とはいえ待てば1週間ほどで再クロールされて更新されるのでよほどのケースでない限りはそのまま待てば問題ありません。
緊急の場合はパラメータを付与すると良い
どうしても緊急で更新したいという場合は、画像のURLを変更するようにしましょう。
とはいえ、画像のパスなどを変えてしまうと色々大変ですので、その時に使えるのが画像の末尾にパラメータを付与する方法です。
<meta name="twitter:image" content="http://urakata.me/img/ogp.jpg?2024">パラメータは何でも構いませんが、一般的にはわかりやすいように年や年月日などを入れる事が多いです。
- 画像やCSS・JSをF5でキャッシュクリアせずパラメータで更新する方法
- クライアントから仕事をいただき、テストアップなどをしてそれを確認してもらい、修正や微調整をして再確認をしてもらう時に、誰しも1度くらいは、「更新されて...
OGPを設定後に確認したいときに活用するツール
OGPを設定したら実際にきちんと動作しているか、設定が間違っていないかをチェックする事は大切ですが、そんな時に活用したいツールを下記に紹介しておきます。
ラッコツールズ
様々なツールを提供してくれていて、特にキーワード関連でお世話になっているという人も多いであろうラッコツールズ。そんなラッコツールズの中に、「OGP確認」というツールが用意されています。
ラッコツールズ：OGP確認ツール
https://rakko.tools/tools/9/
Facebook、X（旧Twitter）、はてなブックマーク、LINEでどういう見え方になるかのサンプルが確認できるようになっています。
Facebook公式ツール「シェアデバッガー」
FacebookでもOGPの確認用の公式ツールが用意されています。
シェアデバッガー
https://developers.facebook.com/tools/debug/
Facebookでシェアされたときにどういう見え方になるかをチェックができます。
ただ先ほどのラッコツールズでも確認ができるため、そこまで仕様頻度はないかなと思います。
各ツールで自分向けに投稿することでも確認可能
OGPを設定した後は、XであればURLを貼り付ければ実際のイメージが投稿前のプレビューで表示がされますし、他のチャットツールなどでも、自分用のルームなどに投稿すれば実際にどういう風に見えるかなどのチェックが可能な場合もあります。
実際に設定をした後はきっちり確認・チェックをしてシェアされた際に正常に表示されアクセスが来るような流れを作っておけるようにしましょう。
まとめ
OGPについてをまとめてみましたが、書き始めた当初のイメージより2倍～3倍も長くなってしまいました。
昨今のサイト制作などにおいて、OGPの設定はもはやデフォルトと言うか、サーチコンソールやGA4、タグマネージャーの設定のように、そもそも設定するのが普通でしょというくらいに自分の中では言われるまでもなく設定するものになっています。
とはいえWordPressであれば最初の設定さえすれば半自動なので楽ですが、静的サイトの場合は1つ1つ自分たちで設定をしなければならず、コピペしたまま違う情報といった事も起こりやすいものです。
SNSでシェアされた時などに不具合が起こらないように確認体制をしっかり作りつつ、自分の中でのテンプレート的なOGP用のデフォルト設定など持っておき、使い回し＋書き換えができるようになれば楽に設定できると思いますので、数をこなして慣れてささっと設定できるようになっておきましょう。
記事のシェアにご協力お願いします
