OGP画像の設定方法｜タグの書き方と表示されない時の直し方
この記事の要点
- OGPは必須5タグと1200×630pxの画像を揃えれば実務上は十分
- 表示されない原因の切り分けは絶対パス・重複タグ・キャッシュの順で見る
- OGP画像はテンプレ1枚とAIで量産できる。本文に切り分け手順を掲載
自社サイトのURLをXやFacebookに貼ったのに、画像が出てこない。あるいは何年も前のロゴ画像が出たまま直らない。こうした状態でお困りではないでしょうか。
この記事では、OGPタグの書き方をコピペできる形で示したうえで、画像が表示されないときの原因の切り分け方まで解説します。WordPressや自社サイトを社内で運用している広報・マーケ担当の方、制作会社に任せているけれど何が正しいか判断したい経営者の方に向けた内容です。
読み終わる頃には、自社サイトのOGPが正しいかを自分で確認でき、直すべき箇所を具体的に指示できる状態を目指します。サイト全体の見出し設計やタイトルタグの基本はタイトルタグの付け方｜SEOに効く文字数と書き換え対策で扱っているので、そちらが未整備の方は先にどうぞ。この記事はOGPに絞ります。
Contents / 目次
OGP設定で押さえるのは5つのタグと1枚の画像サイズだけ
結論から言うと、OGP設定でやることは次の3つだけです。
- 必須の5タグを書く
- 1200×630pxの画像を用意する
- デバッガーで再取得する
細かいタグは数十種類ありますが、中小企業のサイト運用で効いてくるのはここに挙げる範囲です。
OGP（Open Graph Protocol）とは、SNSにURLを貼ったときに表示されるタイトル・説明文・画像を、サイト側から指定するための仕組みです。
ひとことで言うと、SNSに対して「うちのページはこう見せてください」と伝える指示書だと考えてください。
指示書がなければ、SNS側が勝手にページ内の画像を拾ってきます。それが「なぜかヘッダーのロゴが出る」の正体です。
まず、必須タグと推奨値を一覧にします。下記の「書く内容の目安」はOpen Graph protocol 公式仕様とX公式のCardsマークアップ仕様で定義された各タグの役割をふまえた、実務上の運用ルールです。仕様として決まっている値ではないため、自社の運用に合わせて調整して構いません。
| タグ | 役割 | 書く内容の目安 |
|---|---|---|
| og:title | SNSに出るタイトル | ページのh1と揃える。長すぎると途中で切られる |
| og:description | タイトル下の説明文 | ページの内容を1〜2文で要約する。要点を先頭に置く |
| og:image | 表示される画像 | https:// から始まる絶対パス。1200×630px |
| og:url | そのページの正規URL | 絶対パス。canonicalと同じURLにする |
| og:type | ページの種類 | トップは website、記事は article |
| og:site_name | サイト名（推奨） | 会社名やメディア名 |
| twitter:card | Xでの表示形式 | summary_large_image で大きな画像表示 |
ポイント。og: で始まるタグは property 属性、twitter: で始まるタグは name 属性で書きます。書き方はOpen Graph protocol 公式仕様とX公式のCardsマークアップ仕様に定められているので、迷ったら一次情報を確認してください。
SNSごとに別々の画像を作る必要はあるのか
結論、原則1枚で足ります。Meta公式のシェア画像ガイドとXのsummary_large_image仕様では、いずれも1.91対1の縦横比が示されています。この2社の推奨が重なる1200×630px（およそ1.91対1）で作っておけば、まずはFacebookとXで横長のカードとして扱われます。他のSNSでの扱いは各サービスの公式ドキュメントで確認してください。
ただし、表示のトリミングはサービスごとに違います。タイムラインの一覧表示では正方形に近い形で切られることがあるため、文字やロゴは画像の中央寄りに置くのが安全です。四隅ぎりぎりに社名を置くと、環境によっては消えます。
コピペで使えるOGPタグの書き方。5ステップで完了させる
ここが記事の主役です。上から順にやれば、30分程度で1ページ分のOGP設定は完了します。WordPressの方はステップ4から読んでも構いません。
ステップ1。画像を1200×630pxで1枚作る
まず画像です。CanvaでもPowerPointでも構いません。カスタムサイズで幅1200px・高さ630pxを指定して新規作成します。入れる要素は次の3つに絞ってください。
- 見出しテキスト：15〜25文字。スマホのタイムラインで読める大きさにする。書き出した画像をスマホで開いて、実際に読めるかを目視で確認してください
- ロゴまたはサイト名：下部か上部の中央寄りに小さく
- 余白：上下左右に最低60pxは空ける。トリミング対策の保険です
書き出しはJPGかPNGです。ファイルサイズの上限はSNSごとに定められているため、利用する各サービスの公式ドキュメントで確認してください。写真をそのまま貼った重い画像は、書き出し時に圧縮してから使うのが無難です。
ステップ2。画像をサーバーにアップして絶対パスを控える
画像はサイトと同じドメイン上に置くのが基本です。WordPressならメディアライブラリにアップし、表示されたファイルURLをコピーします。
ここで必ず確認するのが、URLが https:// から始まっているかどうかです。/img/ogp.png のような相対パスや、http:// のままだと読み込まれません。控えたURLをブラウザのアドレスバーに貼って、画像単体で表示されるかを確認してください。筆者の経験では、この一手間があるだけで「表示されない」の相談はかなり減ります。
ステップ3。head内にタグを書く
HTMLを直接触れるサイトなら、<head> の中に次のコードを貼り付けて、値を自社のものに書き換えます。そのまま動く形にしてあります。
<!-- 設置場所：各ページの <head> 〜 </head> の中 -->
<!-- 値はページごとに書き換えます。URLはすべて https:// から始まる絶対パスにしてください -->
<!-- 基本のOGP -->
<meta property="og:title" content="ページのタイトル［自社の値に変更］">
<meta property="og:description" content="ページの説明文［自社の値に変更］">
<meta property="og:type" content="article">
<!-- トップページや会社概要は website、コラム記事は article -->
<meta property="og:url" content="https://example.com/column/sample/">
<meta property="og:image" content="https://example.com/img/ogp-sample.png">
<meta property="og:site_name" content="サイト名［自社の値に変更］">
<meta property="og:locale" content="ja_JP">
<!-- X（旧Twitter）向け。属性が property ではなく name である点に注意 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@アカウントID［自社の値に変更］">twitter:title や twitter:image を og: と重ねて書くなら、内容は必ず一致させてください。二重に書いて中身がずれると、どちらが出るか分からなくなります。迷うなら、まず og: を正しく揃えることを優先してください。
ステップ4。WordPressはプラグインで一括設定する
WordPressの場合、テーマのheader.phpを直接編集するより、SEO系プラグインのOGP機能を使うほうが安全です。テーマを更新しても設定が消えず、記事ごとの個別指定も管理画面から行えるためです。
ここでは主要な3つのプラグインについて、設定画面までの行き方を示します。項目名や画面構成はバージョンで変わるため、見当たらない場合は各公式ドキュメントで現在の名称を確認してください。
- All in One SEO：管理画面left側メニューの「All in One SEO」→「ソーシャルネットワーク」を開き、「Facebook」タブと「Twitter」タブでデフォルト画像と表示形式を設定します（公式ドキュメント）
- Yoast SEO：「Yoast SEO」→「設定」内のソーシャル関連の項目で、デフォルトのシェア画像とXのカード形式を設定します（公式ヘルプ）
- SEO SIMPLE PACK：「SEO PACK」→「OGP設定」を開き、「基本設定」でデフォルト画像、「Facebook」「X（Twitter）」の各タブで個別項目を設定します（公式マニュアル）
どのプラグインでも、決めることは実質2つだけです。
- デフォルトOGP画像：アイキャッチが未設定のページで使われる共通画像を、会社ロゴ入りのものにしておきます
- 記事のアイキャッチをOGP画像として使う設定：これをオンにすると、記事を書くたびに個別設定する手間がなくなります
個別のページでOGPを変えたいときは、投稿編集画面の下部にあるプラグインのメタボックス（All in One SEO・Yoast SEOはソーシャル関連のタブ、SEO SIMPLE PACKは「SEO設定」欄）から、そのページだけのタイトル・説明文・画像を上書きできます。
注意。テーマ側とプラグイン側の両方がOGPを出力する設定になっていると、同じタグがページ内に2つ並ぶことがあります。これが「設定したのに古い画像が出る」の一因です。実際に出力されているかどうかは、ステップ5でソースを見て件数を数えれば確認できます。
ステップ5。ソースを見て重複がないか確認する
設定したページをブラウザで開き、ページのソースを表示します。ページ上で右クリックし、メニューの「ページのソースを表示」を選ぶのが、どのブラウザでも共通で確実な方法です。表示されたHTMLをページ内検索で「og:image」と検索します。
ヒット件数が1件なら正常です。2件以上出るなら重複しています。その場合はテーマ側かプラグイン側、どちらかのOGP出力をオフにします。判断に迷ったら、プラグイン側を残してテーマ側を止めるほうが、後々の管理が楽です。
公開前チェックとして、次の5項目を確認してください。
- og:image は1件だけか：ソース内検索で件数を数える
- URLは絶対パスか：https:// から始まっているか
- 画像単体で開けるか：そのURLをブラウザに貼って表示されるか
- og:url は正しいページか：トップのURLがコピペで残っていないか
- twitter:card は summary_large_image か：属性が name になっているか
画像が出ない・古い画像が出る。原因の切り分けと直し方
OGPのトラブルは、原因が3つに集約されます。上から順に潰していけば、ほぼ解決します。逆に言うと、闇雲にタグを足しても直りません。
失敗1。画像URLが相対パスのまま
これが最も多いパターンです。制作時にHTMLを手書きしたサイトや、コーダーが自分の作業環境の感覚で書いたときに起きます。content="/images/ogp.png" のように書いてあると、SNS側は画像の在り処を特定できず、画像なしのテキストカードになります。
直し方はシンプルで、ドメインから始まるフルURLに書き換えるだけです。あわせて、httpとhttpsが混在していないかも見てください。サイトをSSL化した際に、OGPのURLだけhttpのまま残っている事故はよく見かけます。
失敗2。タグが重複している
「設定を変えたのに、前の画像が出続ける」場合に、まず疑いたいのがタグの重複です。テーマの機能とSEOプラグイン、さらにページビルダーの3か所からOGPが出力され、同じタグが複数並んでいる状態です。どのタグが採用されるかはSNS側の処理次第で、こちらからは制御できません。意図した画像が確実に出るようにするには、出力を1か所に絞るのが唯一の方法です。
この状況で怖いのは、担当者が「反映が遅いだけだろう」と思って何日も待ってしまうことです。まずソースを見て件数を数える。これを習慣にするだけで、無駄な待ち時間がなくなります。
失敗3。SNS側のキャッシュが残っている
タグが正しくても、すぐには反映されないことがあります。あなたの修正は正しいのに、SNS側が以前に読み取った内容を表示している状態です。
対処は、Meta（Facebook）のシェアデバッガーにURLを入れて、情報の再取得を実行することです。使い方はMeta公式のシェアデバッガー解説にまとまっています。
再取得しても直らない場合は、キャッシュではなくタグ側の問題を疑ってください。ソースの重複確認と、画像URLが単体で開けるかの確認に戻るのが近道です。恒久的な共有URLにパラメータを足して回避しようとすると、URLの正規化が崩れるため避けてください。正規化の考え方は重複コンテンツ対策｜canonicalタグの正しい書き方と設置5ステップで解説しています。
失敗4。タグがクローラーに届いていない
ブラウザの検証ツールでは meta タグが見えているのに、SNSでは何も出ない。この食い違いが起きたときは、SNS側が受け取っているHTMLに、そもそもタグが入っていない可能性を疑ってください。
確認方法は、ステップ5と同じ「ページのソースを表示」です。検証ツール（要素の検証）はJavaScript実行後の状態を映しますが、ソース表示はサーバーから返された生のHTMLを表示します。検証ツールには出るがソース表示には出ないなら、そのタグはサーバーの返すHTMLに含まれていません。
その場合の対処は、サーバーサイドレンダリングや静的生成の段階でメタタグを出力することです。ここは実装側の話になるため、制作会社に依頼している場合は「OGPタグがHTMLレスポンスに含まれているか確認してほしい」と伝えれば通じます。
OGP画像はAIとテンプレで量産できる。内製の現実解
OGP設定でいちばん止まるのは、タグではなく画像作成です。記事を書くたびにデザイナーへ依頼していると、1枚あたり数日のリードタイムがかかり、結局デフォルト画像のまま放置されます。2026年の今なら、ここはAIとテンプレの組み合わせで社内に巻き取れます。
現実的なやり方は次の流れです。
- Canvaなどで1200×630pxのテンプレを1つだけ作る。背景色・ロゴ位置・文字位置を固定する
- 記事タイトルを渡して、画像に載せる短いコピーをAIに複数案出させる
- 出てきた案から、15〜25文字で意味が通るものを人が選ぶ
- テンプレの文字部分だけ差し替えて書き出す
ステップ2で使うAIへの指示は、凝ったものは要りません。次のような短いたたき台から始めて、返ってきた結果を見ながら会話で詰めていくのが早いです。
あなたはBtoBメディアの編集者です。
次の記事タイトルから、OGP画像に載せる短いコピーを5案出してください。
記事タイトル：［ここに記事タイトルを貼る］
条件：
- 各案15〜25文字
- 記号や句読点は使わない
- 記事に書いていない効果や数字は入れない
- 読み手は［業種・役職を入力］ここで人がやるべきなのは、出力の検品です。AIは記事に書いていない数字や効果を、それらしく足してくることがあります。画像の中の文字は、本文以上に一人歩きします。SNSではタイムライン上で画像だけが目に入るからです。本文が裏づけていない表現が入っていないか、この1点だけは必ず人が確認してください。
技術的にもう一歩進めるなら、記事タイトルからOGP画像を自動生成する仕組みもあります。記事数が月に数十本ある規模なら検討する価値がありますが、月数本のオウンドメディアであれば、テンプレ差し替えのほうが確実に運用が続きます。
OGPを整えると何が変わるのか
先に率直にお伝えすると、OGPを設定しても検索順位は上がりません。OGPはSNS向けの表示指定であり、Googleの評価に直接使われるものではないからです。ここを「SEO対策」として売られていたら、少し疑ってください。
では何が変わるか。変わるのはURLがシェアされたときの、クリックされる確率です。SNSのタイムラインで、テキストだけのリンクと、横長の大きな画像付きカードでは、目に入る面積がまるで違います。画像なしのリンクは、スクロールの中でほぼ素通りされます。
実務で効いてくる場面は、意外にも社外向けだけではありません。
- 営業のメール・チャット：SlackやTeamsにURLを貼ったとき、プレビューが出るかで開封が変わる
- プレスや採用の拡散時：第三者が紹介してくれたとき、画像がロゴだけだと内容が伝わらない
- 社内共有：どの記事のリンクかが一目で分かり、確認のやりとりが減る
数値の効果は業種やオファーで大きく変わるため、一律に「何%上がる」とは言えません。ただ、確実に言えるのは、直すコストと戻りの非対称性です。テンプレさえ作ってしまえば、以降は文字を差し替えるだけの作業になります。それで、これから公開するすべての記事のシェア時の見え方が変わります。一度整えれば効果が資産として積み上がるタイプの施策なので、優先順位としては「安いのに後回しにされがち」な部類です。
自社サイト全体の改善順序に迷っている方は、SEO内部対策チェックリスト｜初心者がまず直すべき優先順位もあわせてご覧ください。OGPは、そのチェックリストの中では「後半でよいが、やれば確実に効く項目」に位置づけられます。
運用してみて見えた落とし穴と、割り切りどころ
ここからは、実際にサイト運用を続けていると突き当たる、教科書には書かれていない話をします。
- 1つ目。OGPは「設定して終わり」にならない。
SNS各社の表示仕様は変わることがあります。以前は大きく表示されていたのに、いつの間にか見え方が変わっていた、ということも起こります。
四半期に一度、主要ページのURLを実際にSNSの投稿画面に貼って目視する。この程度の運用は残ると考えておいてください。 - 2つ目。画像内の文字は、更新の負債になる。
OGP画像に「2026年最新版」やキャンペーン期間を焼き込むと、記事をリライトしたときに画像も作り直しになります。
テキストは本文で更新できますが、画像は誰かが作り直さないと直りません。画像内のコピーは時期に依存しない表現にしておくのが実務上の正解です。 - 3つ目。制作会社への依頼の仕方でコストが変わる。
「OGPを設定してください」という依頼だと、トップページだけ共通画像が入って終わることがあります。
依頼するなら、①デフォルトOGP画像の設定（アイキャッチ未設定ページ用の共通画像を決めてもらう）②記事ごとのアイキャッチ自動反映（記事を書くだけでOGP画像が切り替わる仕組みにしてもらう）③テーマとプラグインの重複解消（og:image が二重出力されていないか確認してもらう）の3点を、分けて伝えてください。これを言語化できるかどうかで、見積もりも成果物も変わります。 - 4つ目。内製と外注の切り分け。
テンプレ作成と初期のタグ設定さえ済めば、日々の画像差し替えは社内でできます。
逆に、テーマの改修が必要なケース、JavaScriptでレンダリングしているサイト、複数ドメインをまたぐ構成では、無理に社内で触ると別の箇所が壊れます。ファイルを直接編集する必要が出た時点で、外部に相談するのが安全な線引きです。
この記事は、株式会社コレットラボ（大分・福岡を拠点にAI業務システム化とWeb集客を支援）の出口宣佳が、実際のサイト運用の現場で繰り返し直面してきた事例をもとに書いています。
OGP設定でよくある質問
OGPを設定するとSEOに効果はありますか
検索順位への直接的な効果はありません。OGPはSNSでの表示を指定する仕組みだからです。ただしシェアされたときのクリックが増えれば、結果として訪問者は増えます。SEOとは別枠の施策として考えるのが正確です。
全ページに個別のOGP画像が必要ですか
不要です。共通のデフォルト画像を1枚設定しておけば、会社概要やお問い合わせページはそれで十分です。個別画像を用意する価値があるのは、コラム記事やサービス紹介ページなど、実際にシェアされる可能性があるページに限られます。
修正してから反映されるまで、どのくらい待てばいいですか
待つのではなく、Meta（Facebook）のシェアデバッガーで再取得を実行してください。再取得しても古い画像が出る場合は、キャッシュではなくタグの重複や記述ミスを疑ってください。
画像の代わりに動画やGIFを設定できますか
動画用のタグ（og:video）はOpen Graph protocol 公式仕様に定義されていますが、対応状況は利用するSNSごとに各社の公式ドキュメントで確認が必要です。中小企業のサイト運用では、静止画1枚をきちんと整えるほうが確実です。
画像の縦横比が違うとどうなりますか
正方形や縦長の画像は、横長のカード枠に合わせて中央部分が切り取られる形で表示されます。上下の文字が消えることが多いため、1200×630pxで作り直すのが早道です。既存画像を流用するなら、余白を足して比率を合わせてください。
まずは自社サイトのURLを1本貼ってみてください
今日すぐできる最初の一歩は、自社サイトのトップページのURLを、SlackやLINEの自分宛てメモに貼ってみることです。1分で終わりますし、それだけで画像が出るか、古い画像が出ているかが分かります。
もし画像が出なかったら、この記事のステップ5に戻ってソースの重複を確認してみてください。あわせてサイト全体の状態を点検したい方は、ホームページが検索で出てこない原因と直し方｜3タイプで解決もご覧ください。
ここまで読んで、テーマの改修まで踏み込む必要がありそうだと感じた方や、記事ごとの画像運用を社内で回す仕組みから整えたい方は、一度お話を聞かせてください。いきなり制作の依頼でなくて構いません。現状のサイトを一緒に見て、どこまで内製でき、どこから任せるべきかを整理するところからお手伝いします。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
