OGPの設定は4つのタグから｜og画像のサイズと確かめ方、キャッシュの更新

公開した記事の URL を Facebook や Slack に貼ると、記事のタイトルや画像ではなく、ページの中の別の画像や文が表示されることがあります。画像を差し替えたのに、共有したときの画像だけが前のまま変わらないこともあります。

共有したときの見え方を決めるのは、ページの head に書く OGP のタグと、共有先のサービスが覚えている写し(キャッシュ)です。この記事では、OGP の設定で書くタグと画像のサイズ・確かめ方・キャッシュの更新の仕方を解説します。株式会社メリルが運営する6つのサイトで、OGP の画像をどう用意しているかも例として示しました。

記事を読めば、自社の記事を共有したときの見え方を、自分で確かめて整えられます。og:title・og:type・og:image・og:url の4つのタグを書き、幅1080px以上の画像を https から始まる URL で指定して、共有する前にクローラーの読み取りを確かめるのが基本です。

OGPの設定は4つの必須タグをheadに書くことから始める

OGP(Open Graph protocol)は、ページのタイトルや画像を SNS などに伝えるための決まりで、もとは Facebook で作られました。ページに OGP のタグが無いと、Facebook のクローラーはページの中身から推し量って、タイトル・説明・画像を選びます。

OGP の設定で書くタグと、タグの置き方は以下の4つです。

• og:title・og:type・og:image・og:urlの4つを書く
• og:descriptionとog:site_nameで説明とサイト名を足す
• og:imageの付属のタグで画像の大きさと説明を伝える
• OGPのタグはheadの中のページの先頭近くに書く

og:title・og:type・og:image・og:urlの4つを書く

OGP の仕様で、すべてのページに必要とされているタグは og:title・og:type・og:image・og:url の4つです。4つのタグに書く内容は、以下の表のとおりです。

タグ	書く内容	値の例
og:title	共有したときに出るタイトル	記事のタイトル
og:type	ページの種類	記事は article、トップなどは website
og:image	共有したときに出る画像の URL	https://example.com/images/ogp.jpg
og:url	ページの正規の URL	https://example.com/article/

4つのタグは、ページの head の中に meta タグとして書きます。記事のページなら、次のような4行です。

<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://example.com/images/ogp.jpg" />
<meta property="og:url" content="https://example.com/article/" />

og:title には、サイト名などを付けない記事のタイトルだけを書くのが、Facebook に合わせた書き方です。og:title は、Google 検索が検索結果のタイトルリンクを決めるときの材料の1つにもなります。

og:type を書かないページは、website と同じ扱いです。記事やブログの投稿のページは、og:type を article にします。

og:url に書くのは、canonical タグと同じ正規の URL です。セッションの値や利用者を見分けるパラメータ、計測用の値を付けない URL にすると、Facebook のいいね！やシェアの数が1つの URL にまとまります。

og:descriptionとog:site_nameで説明とサイト名を足す

必須の4つに加えて書いておきたいのが、説明文の og:description と、サイト名の og:site_name です。Facebook では、og:description の文が投稿のタイトルの下に表示されます。

og:locale を含めた3つのタグに書く内容は、以下のとおりです。

• og:description: ページの内容を短く説明する文
• og:site_name: ページが属するサイト全体の名前
• og:locale: ページの言語と地域(日本語なら ja_JP)

og:locale は、書かないと en_US(アメリカ英語)として扱われます。日本語のページで書く値は ja_JP です。

<meta property="og:description" content="ページの内容を短く説明する文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />

og:title に記事のタイトルだけを書く場合でも、og:site_name にサイト名を書いておけば、どのサイトの記事かを別に伝えられます。

og:imageの付属のタグで画像の大きさと説明を伝える

og:image の後ろには、画像の大きさや説明を伝える付属のタグを続けて書けます。主な付属のタグは、以下の表のとおりです。

タグ	書く内容
og:image:width	画像の幅(ピクセル)
og:image:height	画像の高さ(ピクセル)
og:image:alt	画像に何が写っているかの説明
og:image:type	画像の形式(image/jpeg など)
og:image:secure_url	ページが https を求める場合に使う画像の URL

og:image:width と og:image:height を書いておくと、ページが初めて共有されたときから画像が正しく表示されます。Facebook のクローラーが画像を後から取得して処理するのを待たずに、すぐ表示に使えるためです。

og:image を書いたページには、og:image:alt も書くことが求められています。og:image:alt に書くのはキャプションではなく、画像に何が写っているかの説明です。

<meta property="og:image" content="https://example.com/images/ogp.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="675" />
<meta property="og:image:alt" content="机の上のノートパソコンと資料" />

付属のタグは、og:image の行より後ろに書きます。og:image を2枚書く場合は、それぞれの og:image の直後に、その画像の付属のタグを置きます。

» 画像SEOはaltの棚卸しから｜alt属性の書き方とファイル名・置き方の直し方

OGPのタグはheadの中のページの先頭近くに書く

OGP のタグは、head の中のなるべく前のほうにまとめて書きます。Facebook のクローラーが読むのはページの先頭から1MBまでで、1MBより後ろに書いたタグは読まれません。

Slack も、リンクの表示を作るときは、ページのできるだけ少ない部分だけを取得してタグを探します。広告のタグや大きなスクリプトの後ろに OGP のタグを置くと、読み取られない部分に入るおそれがあります。

同じタグを2回書いた場合に優先されるのは、上に書いたほうです。CMS では、テーマとプラグインの両方が OGP のタグを出していることがあるため、ページのソースで同じタグが2つ並んでいないかを確かめましょう。

og画像のサイズ・形式・URLの決め方

og画像(og:image に指定する OGP の画像)は、共有先のサービスがページとは別に取得して表示します。OGP の画像を用意するときに決めることは、以下の3つです。

• 画像の幅は1080px以上にする
• 画像の形式はJPEG・PNG・GIFから選ぶ
• 画像のURLはhttpsから始まる完全な形で書く

画像の幅は1080px以上にする

Facebook で共有された画像を高解像度の端末できれいに表示するには、幅1080px以上の画像を使います。

メリルが運営する6つのサイトで og:image に使っている画像は、どれも横÷縦が1.78〜1.90の横長でした。記事のアイキャッチから作る3つのサイトは、どれも幅1200pxの画像にしています。

画像を作ったあとに og:image:width と og:image:height へ書くのは、実際の画像の幅と高さです。画像の作り直しで大きさが変わったときは、2つのタグの値も合わせて直します。

画像の形式はJPEG・PNG・GIFから選ぶ

OGP の画像の形式は、JPEG・PNG・GIF のどれかにします。Facebook の og:image:type に書ける値は、image/jpeg・image/gif・image/png の3つです。

SVG などのほかの形式は、og:image:type の値に入っていません。ロゴや図を SVG で作っている場合は、JPEG か PNG に書き出してから og:image に指定します。

og:image:type を書くときは、画像の実際の形式と同じ値にします。拡張子が .jpg の画像なら image/jpeg、.png の画像なら image/png です。

画像のURLはhttpsから始まる完全な形で書く

og:image には、https:// から始まる完全な URL を書きます。OGP の仕様で URL とされているのは http:// か https:// から始まるもので、/images/ogp.jpg のようにドメインを省いた書き方は当てはまりません。

ページが https を求める作りで、og:image とは別に https の画像の URL を用意している場合は、og:image:secure_url に書きます。

og:image に書いた URL は、ブラウザのシークレット ウィンドウで開いて、ログインしていない状態でも画像が表示されるかを確かめます。社内のネットワークからしか見られない場所や、ログインが要る場所に置いた画像は、共有先のサービスから取得できません。

メリルの6サイトでOGPの画像の用意の仕方を比べた

OGP の画像は、全ページで1枚を共通にすることも、ページごとに作ることもできます。株式会社メリルは2026年10月30日に、運営する6つのサイトのトップ・記事・相談のページの9ページを取得し、OGP の画像の用意の仕方を比べました。

9ページの OGP の画像の用意の仕方は、以下の表のとおりです。

サイト	ページ	OGP の画像の用意の仕方
ブログ相談ドットコム(blog-soudan.com)	トップ	サイト名を入れた1枚
ブログ相談ドットコム(blog-soudan.com)	相談のページ	相談の文の冒頭を入れた画像
WWS メディア(wwstd.jp/media/)	トップ	サイト名を入れた1枚
WWS メディア(wwstd.jp/media/)	記事	記事のアイキャッチから作る
Web集客ブック(hands-plus.com/media/)	記事	記事のアイキャッチから作る
Touch AI(touchai.jp)	トップ	サイト名を入れた1枚
Touch AI(touchai.jp)	記事	記事のアイキャッチから作る
Blog Floating Button(bfb-plugin.com)	トップ	商品名を入れた1枚
MERIL(meril-theme.com)	トップ	商品名を入れた1枚

9ページとも、og:url は canonical タグと同じ URL で、og:image も https:// から始まる完全な URL でした。twitter: から始まる Twitter Card のタグも9ページすべてにあり、twitter:card の値は summary_large_image です。

用意の仕方は、ページの種類によって3つに分かれました。3つの用意の仕方と、このメディアの OGP の作りは、以下のとおりです。

• トップのページはサイト名を入れた1枚を使う
• 記事のページはアイキャッチから自動で作る
• 相談のページは相談の文の冒頭を入れた画像を使う
• オウンドメディア相談室は記事のタイトルとアイキャッチからOGPを作る

トップのページはサイト名を入れた1枚を使う

9ページのうちトップの5ページは、サイト名や商品名を入れた画像を OGP の画像にしていました。トップのページを共有したときに、画像だけで何のサイトかが伝わります。

WWS メディアは、記事ごとの画像が無いページに、サイト名を入れた共通の画像を出す作りです。1枚の共通の画像を用意しておくと、一覧や問い合わせのような記事以外のページを共有したときにも、同じ画像を出せます。

記事のページはアイキャッチから自動で作る

記事の3ページは、どれも記事のアイキャッチから OGP の画像を作っていました。記事を公開するたびに画像を手で作るのではなく、サイトの仕組みがアイキャッチから OGP の画像を作る形です。

3つのサイトの作り方の違いは、以下の表のとおりです。

サイト	元のアイキャッチ	OGP の画像	作り方
WWS メディア	記事のアイキャッチ	1200×630pxの JPEG	幅1200px・高さ630pxに切り抜く
Web集客ブック	1536×864px	1200×675pxの JPEG	縦横比を変えずに幅1200pxに縮める
Touch AI	1536×864px	1200×630pxの PNG	画像を配信するサービスの URL に、切り出す範囲と大きさを付ける

Touch AI の記事のページは、og:image に加えて og:image:width・og:image:height・og:image:alt も書いています。アイキャッチから作る形なら、記事ごとに違う画像を出しながら、画像の大きさもそろえられます。

相談のページは相談の文の冒頭を入れた画像を使う

ブログ相談ドットコムの相談のページは、相談の番号の付いた画像を OGP の画像にしていました。画像には、相談の文の冒頭とサイト名が入っています。

相談や質問のページには、記事のようなアイキャッチがありません。ページの文を入れた画像を使えば、アイキャッチの無いページでも、ページごとに違う画像を出せます。共有した画像を見ただけで、何についてのページかが伝わる作りです。

オウンドメディア相談室は記事のタイトルとアイキャッチからOGPを作る

このメディア(オウンドメディア相談室)は、記事のページの og:title に記事のタイトルだけを書き、サイト名は og:site_name に分けています。ブラウザのタブや検索結果に使う title タグでは、記事のタイトルの後ろにサイト名を付けています。

このメディアの記事のページの OGP の設定は、以下のとおりです。

• og:image: 1536×864px前後のアイキャッチから、サイトのファイルを作る(ビルドする)ときに幅1200pxの JPEG を作って指定
• og:type: 記事のページは article
• og:url: canonical タグと同じ URL
• og:locale: ja_JP

2026年10月30日のビルドで作られた記事1本の OGP の画像を測ると、1200×676px・約56KBの JPEG でした。アイキャッチを差し替えれば、次のビルドで OGP の画像も作り直されます。

OGPの設定を確かめる4つの方法

OGP のタグを書いたら、タグがページに出ているかと、共有先のサービスに読み取られているかを共有する前に確かめます。OGP の設定を確かめる方法は、以下の4つです。

• ページのソースでheadのOGPのタグを見る
• Facebookのシェアデバッガーで読み取られたタグを見る
• クローラーと同じ条件でページを取得する
• Slackのテスト用のチャンネルにURLを貼る

ページのソースでheadのOGPのタグを見る

最初に、公開したページの HTML に OGP のタグが出ているかを確かめます。ブラウザでページのソースを表示し、og: で検索すると、OGP のタグの行が見つかります。

この記事のページ(https://blog-soudan.com/owned-media/ogp-settings/)のソースを、Chromium のページのソースの表示で開いた画面(2026年10月31日)。

Mac のターミナルで OGP と Twitter Card のタグの行だけを表示するコマンドは、次の1行です。

curl -s https://example.com/article/ | grep -oE '<meta[^>]*(og:|twitter:)[^>]*>'

ページのソースで確かめる項目は、以下のとおりです。

• og:title・og:type・og:image・og:url の4つがそろっているか
• 同じタグが2回出ていないか
• og:image と og:url が https:// から始まる完全な URL か
• og:image の URL を開くと画像が表示されるか

Facebookのシェアデバッガーで読み取られたタグを見る

Facebook のシェアデバッガー(Sharing Debugger)に URL を入れると、Facebook のクローラーが読み取ったタグと、エラーや警告が表示されます。シェアデバッガーで調べると、Facebook のクローラーがページを読み直します。

シェアデバッガーの URL は、developers.facebook.com/tools/debug/ です。

警告が出たときは、どのタグについての警告かを読み、ページのソースの該当する行と照らし合わせます。

クローラーと同じ条件でページを取得する

共有先のクローラーがページを取得できているかは、クローラーと同じ名前を名乗ってページを取得すると確かめられます。Facebook のクローラーと同じ条件でページを取得するコマンドは、次のとおりです。

curl -v --compressed -H "Range: bytes=0-524288" -H "Connection: close" -A "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "https://example.com/article/"

応答の番号が200(または一部だけを返す206)で、返ってきた HTML に OGP のタグが入っていれば、Facebook のクローラーもページを読めます。403 などが返るときは、サーバーやファイアウォールの設定で、クローラーの名前か IP アドレスを許可する必要があります。

出典：Google Search Console のURL 検査ツールの「クロール済みのページを表示」(オウンドメディア相談室が使っている blog-soudan.com のプロパティ。2026年10月31日の画面)。調べたのはこのメディアの記事の URL です。Google Search Console は Google LLC の商標です。オウンドメディア相談室は、Google が推奨・提携しているものではありません。

Google のクローラーが読み込んだ HTML は、サーチコンソールの URL 検査ツールで「クロール済みのページを表示」を押すと出てきました。このメディアの記事で確かめると、OGP のタグがすべて入っていました。

Slackのテスト用のチャンネルにURLを貼る

社内の連絡に Slack を使っているなら、テスト用のチャンネルに URL を貼って、実際の表示を確かめられます。Slack がリンクの表示を作るときに探すのは、oEmbed と Twitter Card・OGP のタグです。

Slack は robots.txt に従わないため、robots.txt でクロールを止めたページも取得します。slack.com での表示を止めたいときは、robots.txt ではなく Slack への連絡が要ります。

OGPを変えても表示が古いときはキャッシュを更新する

共有先のサービスは、一度取得したページの内容を覚えておき(キャッシュ)、覚えた内容で表示を作ります。ページの OGP を直しても、すぐには表示が変わりません。

表示が古いときと、表示が出ないときの対処は以下の4つです。

• Facebookはシェアデバッガーで読み直させる
• 画像を差し替えるときは画像のURLを変える
• Slackは30分ほどたってから貼り直す
• 表示が出ないときはクローラーがページを読めるかを確かめる

Facebookはシェアデバッガーで読み直させる

Facebook が取得したページの内容を更新する通常の間隔は、24時間です。24時間を待たずに直した内容を反映させるには、シェアデバッガーで URL を調べ直します。

新しいページを公開したときも、共有する前にシェアデバッガーで URL を調べておくと、Facebook に画像を先に取得させておけます。HTML の誤りを直したときや、公開した時点でクローラーが内容を取得できなかったときに、直したあとで使うのもシェアデバッガーです。

画像を差し替えるときは画像のURLを変える

Facebook は OGP の画像を URL ごとに覚え、URL が変わらない限り画像を更新しません。同じファイル名のまま画像を上書きしても、Facebook には前の画像が出続けます。

画像を差し替えるときの手順は、以下のとおりです。

1. 新しい画像を、ogp-2.jpg のように前と違うファイル名でアップロードする
2. og:image の URL を、新しいファイル名に書き換える
3. og:image:width と og:image:height を新しい画像の大きさに合わせる
4. シェアデバッガーで URL を調べ直し、新しい画像が出るかを確かめる

Slackは30分ほどたってから貼り直す

Slack は、同じ URL を取得した結果を、サービス全体で30分ほど覚えています。OGP を直した直後に同じ URL を貼ると、直す前の表示が出ることがあります。

Slack で表示を確かめ直すときは、OGP を直してから30分ほどたったあとに URL を貼り直しましょう。

表示が出ないときはクローラーがページを読めるかを確かめる

タグを書いたのに表示が出ないときは、共有先のクローラーがページを取得できているかを確かめます。Facebook のクローラーがページを読むために必要な条件は、以下のとおりです。

• サーバーが gzip と deflate の圧縮に対応している
• OGP のタグがページの先頭から1MB以内にある
• クローラーが数秒以内にページを取得できる
• robots.txt で Facebook のクローラーを止めていない
• ファイアウォールなどでクローラーの名前や IP アドレスを拒否していない

robots.txt で Facebook のクローラーを止めていた場合、robots.txt を直してから反映されるまで、最大24時間かかります。Facebook のクローラーが robots.txt を24時間まで覚えておくためです。

» robots.txtの書き方｜記述例と置く場所・確かめ方、noindexとの違い

OGPの設定は4つのタグと画像を書き、共有する前に確かめる

共有したときの見え方は、ページの head に書く OGP のタグと、共有先のサービスのキャッシュで決まります。タグを書くだけでなく、クローラーに読み取られているかを確かめ、古い表示はキャッシュを更新して直します。

記事の要点は、以下のとおりです。

• og:title・og:type・og:image・og:url の4つを head の前のほうに書く
• og:description・og:site_name・og:locale と、og:image の付属のタグを足す
• OGP の画像は幅1080px以上の JPEG・PNG・GIF を、https から始まる URL で指定する
• 記事の OGP の画像は、アイキャッチから自動で作るとページごとに違う画像を出せる
• ページのソース・シェアデバッガー・クローラーと同じ条件の取得で確かめる
• 画像を差し替えるときは URL を変え、シェアデバッガーで読み直させる

OGP の設定は、一度仕組みを作れば、記事を公開するたびに同じ形で出せます。まずは自社のトップと記事を1本ずつ選び、ページのソースで OGP のタグの行を確かめましょう。