OGP設定手順｜SNSシェアで画像を表示させる方法
この記事の要点
- OGPは<head>内のmetaタグ4つが必須。コピペ用コードを本文に用意
- 画像が出ない原因は主に4タイプ。絶対URL・サイズ・キャッシュ・クローラー遮断で切り分け
- 更新したのに古い画像のままはキャッシュが原因。デバッグツールで再取得すれば直る
SNSに自社サイトのリンクを貼ったのに、サムネイル画像が出ない。タイトルも変な文字になる。こういう「なんか地味なシェアになる」問題でお困りではありませんか。
この記事は、自社サイトやブログを運用していて、SNSでのシェア見栄えを自分で直したい広報・Web担当の方に向けた実践ガイドです。
OGPの設定手順を、コピペで使えるコードと画像仕様、公開前チェックまで具体的にお伝えします。読み終わる頃には、明日から自分でOGPを設定して、正しく画像が表示される状態を目指せます。
WordPressでの設定と、手書きHTMLでの設定の両方を扱います。
なお、そもそもサイトがHTTPS化されていない場合はOGP画像も表示されにくくなります。まだの方は先にhttpをhttpsへ301リダイレクトする.htaccessの書き方を済ませておくと、この記事の内容がスムーズに進みます。
Contents / 目次
OGP設定でやるべきことは3つだけ
結論から言うと、SNSシェアでサムネイルを表示させるためにやることは大きく3つです。この3つを押さえれば、FacebookでもXでもLINEでも、意図した画像とタイトルが表示されます。
- 必須のOGPタグを書く：ページの<head>内に、タイトル・種類・URL・画像の4つのmetaタグを入れる
- 画像を正しく用意する：1200×630pxを目安に、https:// から始まる絶対URLのJPGかPNGで置く（推奨サイズや容量の上限はSNSごとに異なるため、公式ヘルプでも確認する）
- デバッグツールで確認する：公開後にMetaやXの確認ツールで、意図通り表示されるかをチェックする
OGPとは、かんたんに言うと「SNSでシェアされたとき、どんな画像・タイトル・説明文で見せるか」をサイト側から指定する仕組みのことです。正式名称はOpen Graph Protocol（オープングラフプロトコル）で、Facebook（現Meta社）が策定しました。 いまはX（旧Twitter）、LINE、LinkedIn、Slack、Discordなど、主要なSNSの多くがこの仕組みを読み取って表示を作っています。
ひとことで言うと、OGPは「SNS上での自社の看板」です。設定しなければ、SNS側が勝手にページから拾った文字や画像で表示するか、画像なしの寂しいリンクになります。設定すれば、その看板を自分でデザインできる、というわけです。
ポイント。OGPは「一度どこかに1個だけ設定するもの」ではありません。トップページ、会社概要、ブログ記事など、ページごとに違う画像・タイトルを設定するのが正しい形です。全ページ同じ画像だと、どの記事をシェアしても同じ看板になり、クリックされにくくなります。
まず、必須と推奨のタグを一覧で整理します。この表がOGP設定の全体像です。
| タグ名 | 役割 | 必須度 | 書き方の目安 |
|---|---|---|---|
| og:title | シェア時に出るタイトル | 必須 | 全角30文字前後（長いと途中で切れる） |
| og:type | ページの種類 | 必須 | トップは website、記事は article |
| og:url | そのページの正式URL | 必須 | https:// から始まる絶対URL |
| og:image | サムネイル画像 | 必須 | 1200×630px・絶対URL |
| og:description | 説明文 | 推奨 | 全角60〜80文字程度 |
| og:site_name | サイト名 | 推奨 | 会社名やメディア名 |
| og:locale | 言語設定 | 推奨 | 日本語サイトは ja_JP |
| twitter:card | Xでの表示タイプ | X向け推奨 | summary_large_image で大きく表示 |
「タグ」と言われると身構えるかもしれませんが、やることは決まった文字の型に、自社の値を差し込むだけです。次の章で、実際にコピペできるコードを用意しました。
OGPの設定手順をコピペ用コードで解説
ここからが本番です。OGPの設定は「HTMLに直接書く方法」と「WordプレスなどCMSで設定する方法」の2通りがあります。まずは中身を理解するために、HTMLに直接書くパターンから見ていきましょう。仕組みが分かれば、CMSでの設定も迷いません。
ステップ1. 基本のOGPタグを<head>内に貼る
最初にやることは、ページの<head>〜</head>の間に、次のコードを貼ることです。<head>とは、ページの一番上にある「設定情報を書く場所」のことで、見た目には表示されない部分です。以下のコードの、日本語コメントで示した箇所を自社の値に書き換えてください。
<!-- ページの <head> 〜 </head> の間に貼る -->
<!-- OGP（Facebook・LINE・LinkedIn などが読む） -->
<meta property="og:title" content="ここにページのタイトル">
<meta property="og:type" content="website">
<!-- トップページは website、ブログ記事は article にする -->
<meta property="og:url" content="https://example.com/page/">
<!-- ［自社サイトの、このページの正式URLに変更］-->
<meta property="og:image" content="https://example.com/img/ogp.jpg">
<!-- ［画像は必ず https:// から始まる絶対URLで書く］-->
<meta property="og:description" content="ここにページの説明文を60〜80文字ほどで">
<meta property="og:site_name" content="ここにサイト名（会社名）">
<meta property="og:locale" content="ja_JP">ここで一番つまずくのが og:url と og:image のURLです。かならず「https://」から始まる、途中を省略しないフルのURLで書いてください。これを絶対URLと言います。「/img/ogp.jpg」のような省略した書き方（相対パス）だと、SNS側が画像の場所を見つけられず、画像なしで表示されてしまいます。
ステップ2. X（旧Twitter）カードのタグを足す
Xで画像を大きく表示させたいなら、OGPに加えてXカード用のタグを足します。これを入れないと、Xでは小さいサムネイルになったり、画像が出なかったりすることがあります。次の2行を、先ほどのコードの下に追記してください。
<!-- X（旧Twitter）向け -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@your_account">
<!-- ［自社の公式Xアカウント名（@から始まる）に変更。無ければこの行は削除］-->「summary_large_image」を指定すると、画像を横長に大きく表示するタイプになります。 twitter:title や twitter:image を書かない場合、その値が設定されていなければXが og:title や og:image を代わりに読み込むことが多いです。ただしこうした挙動はバージョンや仕様で変わることがあるため、最新の仕様はXの公式ヘルプで確認してください。基本はOGPを正しく書いておけば、多くの場合Xカードは card と site の指定だけで足ります。
ステップ3. OGP画像を用意する
タグの箱ができたら、中身の画像を用意します。SNSごとに見え方や推奨仕様が変わるので、次の目安に合わせつつ、実際の推奨サイズや容量の上限は使うSNSの公式ヘルプでも確認しておくと安心です。目安を大きく外すと、画像がぼやけたり、切れたりします。
- サイズ：1200×630px（横長）を目安にする。多くのSNSでこの比率が推奨されている
- ファイル形式：JPGまたはPNG。写真中心ならJPG、文字や図中心ならPNGが無難
- ファイルの重さ：できるだけ軽くしておく。容量の上限はSNSごとに違うため、重い画像はあらかじめ圧縮しておくと表示されないトラブルを避けやすい
- 文字の置き方：大事な文字やロゴは画像の中央寄せにする。端に置くと切れる
- URL：アップロード後、必ず https:// から始まる絶対URLを og:image に入れる
画像作成は、専用ソフトがなくてもCanvaなどのデザインツールで「1200×630」のサイズを指定すれば作れます。テンプレートを1つ用意して、記事ごとにタイトル文字だけ差し替えると運用がラクです。最近はAIに「1200×630のOGP画像のたたき台を作って」と頼み、出てきた案を自社のロゴ・色に整えるやり方も現実的です。ただしAIが作った画像は文字が崩れたり日本語がおかしくなることがあるので、公開前に人の目で必ず確認してください。
WordPressの場合はプラグインで一元管理する
WordPressを使っているなら、コードを直接触らず、SEOプラグインで設定するのが確実です。具体的には、Yoast SEO や All in One SEO（AIOSEO）といったSEOプラグインを1つ入れて、そこでOGPを一元管理します。 手順の流れは次のとおりです。
- SEOプラグインを1つだけインストールして有効化する
- プラグインの「ソーシャル」や「SNS」といった設定欄で、サイト全体のデフォルトOGP画像・サイト名を登録する
- 各記事の編集画面の下部にあるプラグインの入力欄で、その記事だけのOGP画像・タイトル・説明文を個別に設定する
注意。OGPを出せるプラグインやテーマ機能を複数入れると、OGPタグが二重に出力され、SNSがどちらを読むか分からず表示が崩れます。OGPを扱う機能は必ず1つに絞ってください。テーマ側のOGP機能に頼ると、テーマを変えたときに設定ごと消えるので、SEOプラグインで一元管理するのがおすすめです。
メニュー名やボタンの位置はプラグインのバージョンで変わることがあります。正確な設定場所は、使っているプラグインの公式ヘルプで確認してください。ノーコードのサイト制作ツールを使っている場合も、多くはSEO設定欄でOGP画像を指定できます。たとえばSTUDIOのソーシャルカバー画像（OGP）設定ヘルプでは、シェア時の画像設定と、未設定だと画像が出ない点が解説されています。 お使いのツールの公式ヘルプで「OGP」「シェア画像」を探すのが近道です。
ステップ4. 公開前チェックリストで最終確認する
設定が終わったら、公開する前に次のチェックリストで確認しましょう。これを1回やるだけで、後述する「表示されない」トラブルのほとんどを事前に防げます。
- og:image は絶対URLか：https:// から始まっているか
- 画像は実際に開けるか：og:imageのURLをブラウザに貼って、画像が表示されるか
- httpsで統一されているか：サイトがhttpsなのに画像URLがhttpになっていないか
- ページごとに違う内容か：タイトル・画像がそのページ固有になっているか
- タイトルは長すぎないか：全角30文字前後に収まっているか
OGPを整えるとシェアの反応はどう変わるか
OGPを整えると、SNSからサイトへ来る人が増えやすくなります。理由はシンプルで、タイムラインに流れてきたとき、画像とタイトルがきちんと出るリンクの方が、文字だけのリンクより目に留まり、クリックされやすいからです。
SNSは基本的に「流し見」の世界です。多くのユーザーは、流れてくる投稿を一瞬で見分けています。その一瞬で「お、なんだろう」と思わせる看板があるかどうかで、クリックされるかスルーされるかが決まります。OGP画像は、その一瞬の勝負をする看板そのものです。
もう1つ見落とされがちな効果が、ブランドの一貫性です。トップページも記事もキャンペーンページも、シェアされるたびに統一された自社デザインの画像が出れば、見る人に「ちゃんとした会社だな」という印象が積み上がります。逆に、画像がバラバラだったり出なかったりすると、それだけで「更新が止まっていそう」「雑な運用かも」と受け取られることがあります。
数字の変化は、業種・フォロワー数・投稿内容で大きく変わるため一概には言えません。ただ考え方として、仮にSNS経由のクリック率が今1%だとして、画像とタイトルが整うことで2%になれば、同じ投稿数でもサイトに来る人は単純計算で2倍になります。少ない手間で「入口の見栄え」を底上げできるのが、OGP設定の費用対効果の高さです。
ポイント。OGPのメタ情報は、SNSでの見え方を指定するものです。検索順位を直接上げる要素ではありませんが、SNS上でページの内容を正しく伝える助けになります。サイト全体の信頼性づくりという別の観点はAIで作ったサイトがGoogleに評価される｜E-E-A-Tに足す3要素で掘り下げています。
成果を出しているサイトに共通するのは、派手なことをしているわけではなく、「全ページにOGPが設定されていて、画像が読みやすく、公開前にデバッグツールで確認している」という基本を外していない点です。特別な裏ワザではなく、地味な基本の積み重ねが差になります。
OGPが表示されないときのよくある失敗と直し方
OGP設定でつまずく箇所は、実はパターンが決まっています。ここでは現場でよく見る失敗を、「どんな状況で起きて」「なぜそうなり」「どう防ぐか」の順で整理します。表示されないときは、上から順に切り分けていけば、たいてい原因にたどり着きます。
失敗1. 画像を更新したのに古い画像のまま出る
これはOGPで最も多い相談です。画像を新しくしたのに、シェアすると前の画像が出続ける、というものです。原因はほぼキャッシュです。SNS側が一度読み込んだOGP情報を保存していて、しばらく古い情報を使い続けるために起きます。
直し方は、各SNSが用意しているデバッグツールでキャッシュをクリアし、情報を取り直す（再取得する）ことです。Facebook系なら「Meta シェアデバッガー」といった確認ツールがあり、そこに自社ページのURLを入れて再取得を実行すると、最新のOGPを読み直してくれます。Xなど他のSNSは、キャッシュの取り直し方法や確認ツールが変わることがあるので、各SNSの公式ヘルプで最新の手順を確認してください。
失敗2. 画像がまったく表示されない
画像が一切出ないときは、次の4つを上から順に疑ってください。多くはこのどれかです。
- URLが相対パスになっている：og:imageが「/img/ogp.jpg」のような省略形になっていないか。https:// から始まる絶対URLに直す
- 画像が重すぎる・形式が違う：画像が重すぎないか、JPGやPNGなど対応形式になっているか（容量の上限はSNSごとに異なるため、重ければ圧縮する）
- httpとhttpsが混在している：サイトがhttpsなのに画像URLがhttpになっていないか。httpsに揃える
- クローラーが遮断されている：robots.txtというファイルで、SNSの読み取りプログラム（facebookexternalhitやTwitterbotなど）をブロックしていないか
4つ目の「クローラー遮断」は見落としがちです。robots.txtとは、検索エンジンやSNSの読み取りプログラムに「ここは見ていい・ダメ」を伝えるファイルのことです。ここでSNSのプログラムを弾いていると、そもそも画像を読みに来られず、真っ白なリンクになります。心当たりがあれば、robots.txtの中身を確認してください。
失敗3. 全ページで同じOGPになっている
サイト全体で1種類のOGP画像・タイトルしか設定していないケースです。どの記事をシェアしてもトップページ用の同じ画像が出るため、内容が伝わらず、クリックされにくくなります。テーマやプラグインの初期設定のまま運用していると起きがちです。
防ぎ方は、記事や商品ページごとに、固有のog:title・og:description・og:imageを設定することです。WordPressなら、記事編集画面のSEOプラグイン欄で1本ずつ設定できます。全記事を一気にやる必要はなく、アクセスの多い記事やシェアされやすい記事から順に整えていけば十分です。
失敗4. タイトルや説明文が途中で切れる
タイトルが「〜について徹底解…」のように途中で切れてしまう失敗です。原因は文字数オーバーか、古い情報がキャッシュに残っているかのどちらかです。SNSごとに表示できる文字数に上限があり、それを超えると省略されます。
og:titleとog:descriptionは、それぞれ短めにまとめて、一番言いたいことを前半に置くのがコツです。表示できる文字数はSNSごとに異なるため、切れずに収まる正確な上限は、使うSNSの公式ヘルプで確認してください。直したのに反映されないときは、失敗1と同じくデバッグツールで再取得してください。
OGP設定で見落としがちな落とし穴と現場の本音
ここまでで手順は一通りお伝えしました。最後に、教科書には載りにくいけれど、実際にやってみると引っかかる「現場の落とし穴」を率直にお話しします。ここを知っておくと、無駄な時間を使わずに済みます。
まず、OGPは「設定したら終わり」ではなく「確認して初めて終わり」です。コードを書いただけで満足して公開し、後から「画像が出てない」と気づくのが一番多いパターンです。面倒でも、公開前にデバッグツールでプレビューを1回見る。この一手間が、実は一番効きます。
次に、キャッシュの存在を知らないと、正しく設定できているのに「直っていない」と勘違いして、何度もコードをいじってしまいます。SNS側が古い情報を保存しているだけなので、コードは正しいのに直し続ける、という無駄が起きます。「更新したのに変わらない＝まずキャッシュを疑う」と覚えておくだけで、無駄な作業が減ります。
注意。プラグインやテーマを乗り換えると、OGP設定が引き継がれず、シェア画像が突然消えることがあります。サイトのリニューアルや、AIツールで作り直したタイミングは要注意です。切り替え後は、主要ページのOGPを必ず再確認してください。
内製と外注の線引きについても本音を言うと、OGPの「タグを書く・画像を作る」ところは、この記事の手順で十分に自社でできます。ここを外注する必要はほとんどありません。
一方で、サイト全体でOGPがなぜか二重に出ている、httpsとhttpが混ざっている、テーマの改造でタグが崩れている、といった「原因が特定しづらい不具合」は、HTMLやサーバーの知識がないと切り分けに時間がかかります。1〜2時間触って解決しないなら、原因調査だけプロに頼む、という割り切りが結局は早くて安上がりです。
また、OGP単体を完璧にしても、シェアされる記事そのものに魅力がなければクリックは増えません。OGPはあくまで「入口の看板」です。看板を磨くのと同時に、中身のコンテンツやサイト全体の設計も見ていく必要があります。この記事で言えば、そもそもSNSからサイトに来た人が問い合わせまで進む導線ができているか、という視点も合わせて持っておくと成果につながります。SNS運用との連携が気になる方は、まずOGPという足元を固めるのが第一歩です。
OGP設定に関するよくある質問
OGPを設定しないと何か問題がありますか
ペナルティのような問題はありません。ただ、SNSでシェアされたときに画像が出ず、文字だけの寂しいリンクになります。結果としてクリックされにくく、SNSからの流入を取りこぼしやすくなります。特にSNSで発信する予定があるなら設定をおすすめします。
OGP画像は1枚を使い回してもいいですか
トップページ用の共通画像を用意しておくのは良い運用です。ただ、ブログ記事や商品ページは、内容に合った固有の画像を設定した方がクリックされます。全ページ完全に同じだと内容が伝わりません。まずアクセスの多いページから個別化していくのが現実的です。
設定したのに反映されません。原因は何ですか
多くはSNS側のキャッシュです。SNSが古い情報を保存しているだけで、コード自体は正しいことがよくあります。各SNSのデバッグツールにURLを入れて再取得すれば、最新の内容を読み直してくれます。まずはコードを直す前にキャッシュを疑ってください。
画像のサイズはどれくらいが正解ですか
1200×630pxの横長を目安にすれば、主要なSNSできれいに表示されやすくなります。文字やロゴは中央寄りに置くと、正方形に切り取られる場面でも欠けにくくなります。推奨サイズや容量の上限はSNSごとに異なるので、正確な数値は使うSNSの公式ヘルプで確認してください。
WordPressとHTMLどちらで設定すべきですか
WordPressを使っているならSEOプラグインでの設定が確実で、コードを触らずに済みます。手書きのHTMLサイトなら、この記事のコードを<head>内に貼ってください。どちらの場合も、OGPを出す機能は必ず1つに絞り、二重設定を避けるのが大事です。
まずは今日の一歩として、自社サイトのトップページのURLを、SNSのシェア画面かデバッグツールに貼ってみてください。今どう表示されているかを見るだけで、直すべき箇所がすぐ分かります。あわせて、サイトの入口全体を整えたい方はSearch Consoleの登録手順｜所有権確認とサイトマップ送信も読んでおくと、検索とSNSの両面から流入を伸ばせます。
ここまで読んで、OGPの二重出力やhttps混在など「自分で切り分けるのは大変そう」と感じた方もいるかもしれません。コレットラボでは、AIも活用しながらサイト制作・運用を内製化したい会社の伴走支援をしています。「自分たちで直したいけど原因が分からない」段階のご相談だけでも大丈夫です。現状を一緒に整理するところから、気軽にお声がけください。詳しくはAI業務システム化の詳細はこちらをご覧ください。
30分の無料相談
現状をお聞きし、優先順位を一緒に整理します。
予約する →
