OGP画像を更新したのに古い画像が表示され続ける

SNSのクローラーはOGP情報を一定期間キャッシュするため、画像を差し替えてもしばらく古いものが表示されることがあります。Facebookの場合は「シェアデバッガー」でURLを再クロールするリクエストを送れます。X（Twitter）はキャッシュのリフレッシュ機能が限られているため、URLにクエリパラメータ（例：?v=2）を追加して別URLとして認識させる方法もあります。

og:typeにはどんな種類がありますか？

主なものは website（通常のWebページ）、article（ブログ記事やニュース記事）、product（商品ページ）、video.movie（動画コンテンツ）などです。ブログ記事には article を使うと、公開日などの追加メタデータも設定できます。迷ったときは website を使っておけば問題ありません。

Next.jsやWordPressでOGPを設定するには？

Next.js（App Router）では metadata オブジェクト、Pages Routerでは next/head 内に直接 <meta> タグを書くか、next-seo ライブラリを使う方法が一般的です。WordPressでは「Yoast SEO」や「All in One SEO」などのプラグインを導入すると管理画面からOGP設定ができます。

SEO2026-03-19

OGPタグとは？SNSシェア時の画像・タイトルを自分で設定する方法

OGP（Open Graph Protocol）の必須タグと設定方法を解説。SNSシェア時のサムネイル・タイトル・説明文の制御方法、Twitter Cardとの違い、og:imageの推奨サイズも紹介します。

TwitterやSlackでURLを貼ったとき、サイトのサムネイルが大きく表示されることがありますよね。逆に、URLのテキストしか出なくてリンクが目立たないケースも見かけます。この違いを決めているのがOGPタグです。OGPを正しく設定するだけで、SNSやチャットでのリンクの見え方が一変します。

OGPとは？

OGP（Open Graph Protocol）は、Webページのメタデータを定義するための規格です。2010年にFacebookが提唱し、現在はTwitter・Slack・LINEなど多くのプラットフォームが対応するWeb標準として普及しています。

OGPタグはHTMLの<head>内に書く<meta property="og:...">タグで、SNSのクローラーがページを読み込んだときにこのタグを参照してプレビューカードを生成します。OGPを設定していないページは、プラットフォームが独自に情報を取得するため、意図しない見え方になることがあります。

OGPの必須タグと仕組み

最低限必要な4つのタグ

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

タグ	役割	推奨設定
og:title	カードに表示されるタイトル	40〜60文字以内
og:description	カードの説明文	80〜120文字以内
og:image	サムネイル画像のURL	1200×630px、絶対URL
og:url	ページの正規URL	絶対URLで記述
og:type	コンテンツの種類	website / article / product

Twitter Card（X）との違い

X（旧Twitter）は独自のTwitter Cardという仕組みも持っており、twitter:cardやtwitter:imageなどの専用タグが存在します。ただし、多くの場合OGPタグを設定しておけばTwitter CardのフォールバックとしてOGPが使われます。確実に制御したい場合は両方記述することを推奨します。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ページタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="https://example.com/og-image.png">

OGPの設定方法と確認手順

og:imageの推奨サイズ

OGP画像は1200×630pxが業界標準のサイズです。アスペクト比1.91:1を保つとほとんどのSNSで正しく表示されます。最低でも600×315pxは必要で、それより小さいと無視されるプラットフォームもあります。ファイルサイズは5MB以内に抑えるのが安全です。

設定の確認方法

Facebookシェアデバッガー（developers.facebook.com/tools/debug）：URLを入力するとプレビューを確認できる
X（Twitter）カードバリデーター：Twitter Cardの表示確認に使う
このサイトのOGPチェッカー：URLを入力するだけでOGPタグとプレビューを確認できる

Next.jsでの設定例

Next.js（App Router）では、metadataオブジェクトを使ってOGPを設定できます。

// app/page.tsx
export const metadata = {
  title: "ページタイトル",
  openGraph: {
    title: "ページタイトル",
    description: "ページの説明文",
    images: [{ url: "https://example.com/og-image.png" }],
    url: "https://example.com/page",
    type: "website",
  },
};

よくある質問（FAQ）

OGP画像を更新したのに古い画像が表示され続ける: SNSのクローラーはOGP情報を一定期間キャッシュするため、画像を差し替えてもしばらく古いものが表示されることがあります。Facebookの場合は「シェアデバッガー」でURLを再クロールするリクエストを送れます。X（Twitter）はキャッシュのリフレッシュ機能が限られているため、URLにクエリパラメータ（例：?v=2）を追加して別URLとして認識させる方法もあります。
og:typeにはどんな種類がありますか？: 主なものは website（通常のWebページ）、article（ブログ記事やニュース記事）、product（商品ページ）、video.movie（動画コンテンツ）などです。ブログ記事には article を使うと、公開日などの追加メタデータも設定できます。迷ったときは website を使っておけば問題ありません。
Next.jsやWordPressでOGPを設定するには？: Next.js（App Router）では metadata オブジェクト、Pages Routerでは next/head 内に直接 <meta> タグを書くか、next-seo ライブラリを使う方法が一般的です。WordPressでは「Yoast SEO」や「All in One SEO」などのプラグインを導入すると管理画面からOGP設定ができます。