※2026年10月更新：OGP画像の推奨サイズ、X（Twitter）用の設定、WordPressでの設定方法、確認ツールの最新情報を追記しました

OGP設定とは？

OGP（Open Graph Protocol）設定とは、X（Twitter）やLINE、FacebookなどのSNSでシェアした際に、Webページのtitleやdescription、イメージ画像、URL含めた詳細情報を正しく伝えるための設定です。

OGPをきちんと設定することにより、SNS等でシェアされた時にユーザーへの訴求力が高まります。

OGPを設定していない場合は、SNS側で自動的に抽出した内容が表示されるため、意図していない画像や情報が表示されるおそれがあります。

こんな状態になっていたら、OGPがうまく設定されていないサインです。

OGPを適切に設定するのはサイト運営には欠かせない要素になるため、できるだけ設定しておきましょう。

※OGPを設定しても、検索順位が直接上がるわけではありません。SNSで目に留まりやすくなり、クリックされやすくなる、という効果です。

OGPの設定方法

OGP設定の記述例ですが、下記のようになります。HTMLの<head>の中に書きます。

OGPの記述例

<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />

※og:typeは、トップページなら「website」、記事ページなら「article」にするのが一般的です。
※og:imageの画像のURLは、「https://」から始まる形で書きます。

OGP画像のおすすめサイズ

OGP画像は、横1200px × 縦630px（横長、比率はおよそ1.91：1）で作るのが一般的です。このサイズで作っておけば、多くのSNSできれいに表示されます。

へっぽこポイント

LINEでは、OGP画像が正方形に切り取られて表示されることがあります。
文字やロゴなどの大事な要素は、画像の真ん中あたりにまとめておくと、どのSNSでも切れずに表示されて安心です。

X（Twitter）用の設定

X（Twitter）は基本的にOGPの情報を読み取ってくれますが、画像の大きさなどは、X用のタグで指定します。

X（Twitter）用の記述例

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

「summary_large_image」にすると、大きな画像付きで表示されます。「summary」にすると、小さな正方形の画像の横にタイトルが並ぶ表示になります。

WordPressの場合はプラグインで設定できる

WordPressを使っている場合は、コードを書かなくても、SEOプラグインでOGPを設定できることがほとんどです。

こうしたプラグインでは、サイト全体の共通画像を設定したうえで、記事ごとに画像やタイトルを変えることもできます。

※テーマにOGPの機能が入っている場合もあります。テーマとプラグインの両方でOGPを出すと、タグが重複してしまうので、どちらか1つにしましょう。

設定方法の種類

OGP設定では、下記の2つの設定ができます。

①全ページを同じ内容で設定
②ページによって表示させる内容を変更する設定

あそびラボのサイトでは、トップページや料金ページなどは同じ画像を表示するように設定していますが、「へっぽこWEB講座」などの記事ページは、記事ページの1枚目の画像を表示するように設定しています。

↓へっぽこWEB講座をSNSでシェアした時のイメージ

OGP設定の確認方法

各SNSに実際にリンクを貼って確認する方法だと手間がかかるため、OGP設定の確認ツールを使うと便利です！

確認ツールはいろいろありますが、ラッコさんのツールが使いやすいと思います。

ラッコさんのOGP確認ツール ▶

下記の感じで、各SNSで表示されるイメージを確認できます。

※以前はX（Twitter）公式の「Card Validator」で表示を確認できましたが、現在はプレビュー機能がなくなっています。Xでの見え方は、ラッコさんのツールのような外部の確認ツールで確認しましょう。

設定を変えたのに、古い画像のまま…という場合

SNSは、一度読み込んだOGPの情報をしばらく覚えておく（キャッシュする）ため、設定を直してもすぐには反映されないことがあります。

Facebookの場合は、「シェアデバッガー」にURLを入れて「もう一度スクレイピング」をクリックすると、最新の情報を読み込み直してくれます。

ほかのSNSは、時間がたつと自然に更新されるので、少し待ってから確認してみてください。

site_nameと検索結果のサイト名

因みに「og:site_name」の設定は、Googleの検索結果に表示されるサイト名（下記の箇所）を決めるときの、参考情報のひとつにもなっています。

ただし、Googleがサイト名を決めるときに一番重視しているのは、構造化データ（WebSite）です。
検索結果に店舗名やサービス名を正しく表示させたい場合は、og:site_nameとあわせて、構造化データも設定しておくのがおすすめです。

※構造化データについては「構造化マークアップとは？SEOへの効果とリッチリザルトの仕組みを解説」で解説しています。

OGP画像とは？設定方法からデザインのコツ・成功事例まで解説

「SNSでシェアすると画像がうまく出ない」「OGP画像の作成から設定まで任せたい」という場合は、あそびラボで設定とOGP画像の制作を代行できます。
→ OGP・SNSでの表示のご相談はこちら（お問い合わせ）

サイトの更新やトラブル対応をまとめて任せたい方は「HPの保守管理」もご覧ください。