OGP設定の基本｜SNSでシェアされたときの見え方を整える
「新しいページができたので、会社のSNSでも告知しておきますね」——そう言ってURLを貼ってみたら、画像が真っ白だった。あるいは、ぜんぜん関係ない社屋の写真が出てきた。タイトルもなぜか「ホーム」のまま。
投稿ボタンを押す直前に気づいて、そっと下書きに戻した経験、ありませんか。あるいは、押したあとに気づいてヒヤッとした日も。
大丈夫です。あれは、あなたのシェアの仕方が悪いわけではありません。SNSに何を表示するかは、ページ側の「OGP」という設定で決まっています。逆に言えば、ページ側を一度整えておけば、誰がシェアしても同じようにきれいに出ます。今日はその整え方を、専門的な話は最小限にして、一緒に順番に確認していきましょう。
結論：OGPは、次の順番で整えると迷いません。
① ページに 4つの情報（タイトル・説明・画像・URL） が入っているか確認する → ② 画像は 横長・1200×630ピクセルくらい を用意する → ③ 実際にシェアして見え方を確かめる → ④ 直したあとは SNS側が覚えている古い情報を更新してもらう。
まずは、いちばんよくシェアされる1ページ（トップページか、告知したい新ページ）だけ整えれば十分です。サイト全部を今日やる必要はありません。
何が起きているのか
SNSにURLを貼ると、リンクの下に画像とタイトルと説明文がまとまって出ます。あの表示のことを、ここでは「シェアカード」と呼びます。
シェアカードの中身は、SNSが勝手に考えているわけではありません。SNSはURLを受け取ると、そのページを読みにいって、ページの中に書かれた「これを表示してください」という指定を探します。その指定が OGP（Open Graph Protocol／オージーピー） です。ページのHTMLの上のほう（headという部分）に、og:title（タイトル）、og:description（説明）、og:image（画像）、og:url（URL）といった形で書かれています。
だから、こうなります。
- OGPが入っていない → SNSは仕方なく、ページの中から適当な文字や画像を拾う。結果、関係ない画像やメニューの文字が出る。
- OGPが入っているけれど内容が古い → 昔の画像・昔のタイトルがそのまま出る。
- OGPがきちんと入っている → 意図したとおりの画像とタイトルが出る。
つまり、「SNSでの見え方」は、SNSの中ではなく自社サイト側で決められるということです。ここが分かると、少し気持ちが楽になりませんか。直す場所がはっきりしているからです。
もうひとつだけ。X（旧Twitter）では、twitter:card という指定もあわせて使われます。これは「大きい画像で見せるか、小さいサムネイルで見せるか」を決めるもので、大きく見せたいときは summary_large_image を指定します。指定がない場合はOGPの内容が使われますが、画像の見え方が変わることがあるので、あわせて入れておくと安心です。
補足：OGPはFacebookが作った仕組みですが、いまはX・LINE・Slack・Facebookなど多くのサービスがこの指定を参考にしています。ただしどこまで対応するか・どう表示するかは各サービスの判断で、仕様も変わります。「この設定なら全部のSNSで必ずこう出る」という保証はありません。最終的な見え方は、実際にシェアして確かめるのが確実です。
手順を小さく分ける：OGPを整える4ステップ
一度に全部やろうとしなくて大丈夫です。次の順番で、1ページずつ整えていきます。
1. いま何が入っているかを確かめる
いきなり設定を触る前に、現状を見るところから。いちばん手っ取り早いのは、そのページのURLを、自分だけが見られる場所（SNSの下書き、社内チャットの自分宛て、自分へのメッセージなど）に貼ってみることです。プレビューが出れば、それがいまの見え方です。
もう少し中身まで確かめたいときは、ブラウザでページを開き、右クリックから「ページのソースを表示」を選んで、og: という文字を検索してみてください（Windowsは Ctrl+F、Macは ⌘+F）。og:title og:image などが並んでいれば、OGPは入っています。1件も出てこなければ、まだ入っていない状態です。
2. 4つの情報を入れる
入れるのは、次の4つです。むずかしく考えず、「SNSに出したい文言と画像を指定するだけ」と思ってください。
| 指定 | 何を書くか | 目安 |
|---|---|---|
og:title | シェアカードに出したいタイトル | ページのタイトルでOK。長すぎると途中で切れる |
og:description | 短い説明文 | 1〜2文。meta descriptionと同じで問題ない |
og:image | 表示したい画像のURL | 必ず https:// から始まる絶対URLで書く |
og:url | そのページのURL | こちらも絶対URLで |
HTMLに直接書く場合は、<head> の中に次のような形で入ります（実際の中身は自社のものに置き換えてください）。
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="このページの短い説明文。">
<meta property="og:image" content="https://example.com/assets/ogp.png">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">WordPressの場合は、HTMLを触らなくて済むことがほとんどです。 多くのSEO系プラグインに「ソーシャル」「SNS」といった設定欄があり、そこで既定のOGP画像や、ページごとの画像・タイトルを指定できます。まずは管理画面でその設定欄を探してみてください。ただし、テーマ側とプラグイン側の両方がOGPを出していると、指定が二重になって意図しないほうが使われることがあります。うまく反映されないときは、この二重出力を疑ってみると原因にたどり着きやすいです。
ここは制作会社に入ってもらっている場合、「OGPが入っているか確認して、入っていなければ設定してほしい」と伝えるだけで通じます。自分で全部やらなくて大丈夫です。
3. 画像を用意する
OGP画像は、横長・1200×630ピクセル程度（横と縦の比が約1.91対1）で作っておくと、多くのサービスで大きく崩れずに表示されます。画像はサービス側で自動的に切り取られることがあるので、大事なものは中央寄りに置くのが安全です。
- ファイル形式は JPEG か PNG が無難です。
- ファイルサイズは軽いほうが確実です。数MBを超えるような重い画像は、うまく読み込まれないことがあります。
- 画像の中に小さな文字をぎっしり入れない。スマホでは縮小されて読めません。入れるなら、大きく短い言葉だけに。
- 画像がない場合、まずは会社ロゴを中央に置いた1枚を「サイト共通の既定画像」として用意するだけで十分です。無地よりずっと印象が良くなります。
画像の準備で迷ったら、画像をアップする前に整える3手順もあわせてどうぞ。
4. 実際に見え方を確かめて、古い情報を更新してもらう
設定したら、必ず自分の目で確かめます。方法はシンプルで、そのURLを自分だけが見られる場所に貼って、プレビューを見ること。SNSの下書き、社内チャットの自分宛て、自分へのメッセージなどが使えます。
ここでひとつ、つまずきやすいポイントがあります。SNSは一度読み込んだページの情報をしばらく覚えている（キャッシュしている）ため、設定を直しても古い表示のままになることがあります。「直したのに変わらない！」の多くは、これです。
- Facebookには公式の「シェアデバッガー」があり、URLを入れると読み取り結果を確認でき、「もう一度スクレイピング」で情報を取り直させることができます（Facebookのアカウントでのログインが必要です）。
- 他のサービスでは、キャッシュの手動更新ができないことも珍しくありません。 その場合は少し時間をおいて試すか、それでも急ぐなら、URLの末尾に
?v=2のような目印を付けたURLで確認する方法もあります（別のURLとして読み込まれるため）。ただし告知に使う本番のURLは、目印を付けないものにしてください。
なお、各SNSが提供する確認ツールは、提供が終わったり内容が変わったりします。「以前あったツールが見つからない」ときは、無理に探さず、自分の下書きでプレビューを見る方法に切り替えるのがいちばん確実です。
具体例：直す前と直したあと
たとえば、新しいサービス紹介ページを作って告知する場面です。
| 直す前 | 直したあと | |
|---|---|---|
| 画像 | 指定なし。ページ内のバナーの端が拾われて、見切れた画像が出る | 1200×630pxのサービス紹介画像を指定。中央にサービス名を大きく |
| タイトル | 「株式会社〇〇」（サイト名だけ） | 「〇〇（サービス名）｜製造現場の点検を紙からアプリへ」 |
| 説明 | 指定なし。ページ冒頭のメニュー文字が拾われる | 「点検表の作成・記録・共有をまとめて。無料お試しは1か月です。」 |
| 見え方 | 何のページか分からず、スルーされやすい | ひと目で内容が伝わり、クリックの判断がしやすい |
直す前が悪い、という話ではありません。OGPは設定しなければ何も表示されないわけではなく、SNSが「よかれと思って」ページから何かを拾ってくれるため、放っておくとこうなるだけです。指定してあげれば、そのとおりに出ます。
もうひとつ、地味ですがよくあるのが 画像URLの書き方の間違いです。og:image に /assets/ogp.png のようなサイト内の相対パスを書くと、SNS側から画像を見つけられず、表示されないことがあります。https:// から始まる絶対URLで書く——ここだけ気をつけておくと、原因不明の「画像が出ない」をひとつ減らせます。
あなたへの影響
- シェアカードが整うと、同じ投稿でも「何のページか」がひと目で伝わり、読んでもらえる可能性が上がります。
- 社内の誰か（営業・広報・社長）がURLを貼ったときも、自動的に同じきれいな見え方になります。毎回あなたが対応しなくて済みます。
- 「SNSでの見え方は自社サイト側で決まる」と分かっていると、「なんか変な画像が出ます」と言われても、どこを見ればいいか即答できます。
- 既定のOGP画像を1枚用意しておくだけで、今後作るページすべての最低ラインが上がります。一度の準備が、ずっと効きます。
明日やること
- いちばんよくシェアされるページを1つ選び、そのURLを自分だけが見られる場所（SNSの下書き・自分宛てのメッセージなど）に貼って、いまの見え方を確認する。
- 見え方に問題があれば、そのページのOGP設定（画像・タイトル・説明）を1つずつ直す。WordPressならプラグインの「ソーシャル」設定欄を、制作会社に頼んでいるなら「OGPの確認と設定」を依頼する。
- 画像がまだなければ、サイト共通の既定OGP画像を1枚（1200×630px・ロゴ中央）作って設定しておく。
3つ全部やらなくても大丈夫です。今日は1番だけ——いまどう出ているかを見る。それができれば、直すかどうかの判断はもうついています。
チェックリスト
全部を一度に埋める必要はありません。まずは最低ラインの2つから。
最低ライン（これだけは）
- いちばんよくシェアされるページで、いまの見え方を実際に確認した
- サイト共通の既定OGP画像（横長・1200×630px程度）が1枚ある
余裕があれば（推奨）
-
og:titleog:descriptionog:imageog:urlの4つが入っている -
og:imageとog:urlをhttps://から始まる絶対URLで書いている - X向けに
twitter:card（大きく見せるならsummary_large_image） を指定した - OGP画像の大事な要素を中央寄りに置いた（切り取られても伝わる）
- 画像内の文字は大きく短い言葉だけにした（スマホで読める）
- 設定変更後、古いキャッシュを更新するか、時間をおいて再確認した
- テーマとプラグインでOGPが二重に出力されていないかを確認した
- 主要ページ（トップ・サービス・採用）に、それぞれ専用の画像・タイトルを設定した
SNSでの見え方は、つい後回しになりがちです。ページの中身を作るだけで精一杯、という日も多いですよね。
でも、OGPは一度整えれば、そのあとずっと効き続ける設定です。今日1ページ分だけ確認して、既定画像を1枚用意しておく。それだけで、この先あなたが作るページも、他の人がシェアしたリンクも、静かに整っていきます。
小さな設定ですが、「あ、ちゃんと出てる」と思えた瞬間は、けっこう嬉しいものです。まずは1ページから、確かめてみてください。
よければ、こちらも
シェアカードのタイトル・説明を考えるときは、titleとmeta descriptionの書き方が土台になります。画像の準備は画像をアップする前に整える3手順、公開前の確認全体は自社サイト更新・公開前チェックリストにまとめてあります。「うちのサイトはどう設定されているんだろう」と迷ったら、お問い合わせからいつでも声をかけてくださいね。