2026.07.24WebサイトのOGPとはTECH BLOG
WebサイトのOGPについて
WebサイトをSNSで共有したときに、ページのタイトルや画像が表示されることがあります。これらの表示を設定するために使われるのが「OGP」です。
OGPとは？
OGPとは「Open Graph Protocol」の略で、WebページがSNSなどでシェアされた際に、タイトルや説明文、画像などを表示するための仕組みです。
OGPを設定しておくことで、WebページのURLがSNSで共有された際に、ページの内容を分かりやすく伝えることができます。
企業サイトやブログなどでは、サイトのイメージに合った画像やタイトルを設定することで、SNS上でもデザインや情報を統一できます。
OGPで設定する主な項目
OGPでは、metaタグを使ってページのタイトルや説明文、画像などを設定します。
| 項目 | 内容 |
|---|---|
og:title |
SNSで共有されたときに表示するページのタイトル |
og:description |
ページの内容を説明する文章 |
og:image |
SNSで表示する画像 |
og:url |
ページのURL |
og:type |
ページの種類 |
og:site_name |
Webサイトの名前 |
OGPの設定方法
OGPは、HTMLの<head>内にmetaタグを記述して設定します。
<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="OGP画像のURL">
<meta property="og:url" content="ページのURL">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Webサイトの名前">
例えば、Webサイトのトップページであれば、以下のように設定できます。
<meta property="og:title" content="○○株式会社">
<meta property="og:description" content="○○株式会社の公式Webサイトです。">
<meta property="og:image" content="https://example.com/images/ogp.jpg">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="○○株式会社">
OGP画像を作るときのポイント
OGP画像は、SNS上でページの内容を伝える重要な要素です。
画像を作成するときは、以下の点を意識するとよいでしょう。
- 文字を詰め込みすぎない
- 小さく表示されても読みやすい文字サイズにする
- サイトのデザインやブランドイメージと統一する
- ページの内容が一目で分かる画像にする
OGP画像はSNS上で表示される際に、サービスによってトリミングや表示方法が異なる場合があります。そのため、重要な文字やロゴなどはできるだけ中央付近に配置すると安心です。
OGPが正しく表示されないとき
OGPを設定したのに、SNSで古い画像やタイトルが表示される場合があります。
主な原因として、以下のようなものがあります。
- SNS側に古い情報がキャッシュされている
og:imageに設定した画像URLが間違っている- OGP画像に外部からアクセスできない
- OGPタグの記述に間違いがある
OGPを変更した直後は、SNS側に以前の情報が残っていることがあります。設定を変更した場合は、SNSのキャッシュを更新するためのツールなどを利用して確認するとよいでしょう。
まとめ
OGPは、WebサイトのページをSNSなどで共有した際に、タイトルや説明文、画像などを表示するための設定です。
適切に設定しておくことで、SNS上でもページの内容を分かりやすく伝えることができます。
Webサイトを制作・公開する際は、ページの内容だけでなく、SNSでシェアされたときにどのように表示されるかも確認しておくとよいでしょう。
