ホームページをFacebook、X（旧Twitter）、LINEなどのSNSでシェアした際、画像が表示されなかったり、古い情報や意図しない箇所がサムネイルとして切り取られてしまったりした経験はないでしょうか。SNS経由の流入を最大化するためには、シェア時の見栄えをコントロールする「OGP（Open Graph Protocol）設定」と、適切な「画像最適化」が不可欠です。
本記事では、OGPの基本的な仕組みから、正しいHTMLタグの記述方法、SNSごとに求められる画像のサイズ・デザインのコツ、さらには設定後の検証手順まで、実務に即した内容をプロが詳しく解説します。企業のWeb担当者やマーケティング担当者の方は、ぜひ日々の運用にお役立てください。
OGP（Open Graph Protocol）とは？SNS集客において設定すべき理由
OGPとは、Webページのタイトル、URL、概要、画像（サムネイル）などの情報を、SNSのクローラーに正しく伝えるためのHTMLタグ規格です。Facebook社とX（旧Twitter）社が共同で提唱したもので、現在では主要なSNSプラットフォーム全般で標準的に採用されています。
WebサイトのリンクがSNS上に投稿された際、OGPが正しく設定されていないと、プラットフォーム側が自動的にページの先頭にある画像やランダムなテキストを抽出して表示してしまいます。その結果、以下のような問題が発生しやすくなります。
- 意図しない画像（ロゴマークや背景画像の断片など）がサムネイルになる
- ページの概要ではなく、ナビゲーションメニューのテキストが抜粋される
- 表示崩れや情報の欠落により、ユーザーの信頼性を損ねる
- タイムライン上でユーザーの目を引けず、クリック率が大幅に低下する
BtoB企業やECサイト、採用サイトなど、あらゆるホームページにおいて、SNSは重要な外部流入チャネルの一つです。ホームページのOGP設定とは？SNSシェア時の表示崩れを防ぐ設定手順と効果を高めるコツでも解説している通り、検索エンジン以外の流入経路を強化するためにも、OGPの適切な実装は必須の施策と言えます。
ホームページに必要な基本のOGPタグ一覧と正しい記述方法
OGPタグは、ホームページのHTMLファイルにおける<head>タグ内に記述します。WordPressなどのCMSを利用している場合は、テーマの機能やSEOプラグインを活用して自動出力させるのが一般的です。まずは、最低限実装しておくべき必須のタグ構造を確認しておきましょう。
実務で必ず設定すべき主要なOGPタグは以下の通りです。
- og:title：シェアされた際に表示されるページのタイトル（一般的に記事やページのタイトルを指定）
- og:type：コンテンツの種類（Webサイト全体なら「website」、個別記事やブログなら「article」を指定）
- og:url：該当するページの正規化されたURL（絶対パスで記述）
- og:image：SNS上にサムネイルとして表示させる画像のURL（絶対パスで記述）
- og:description：ページの概要や紹介文（文字数の目安は100文字前後）
- og:site_name：Webサイトやブランドの名称（例：会社名やサイト名）
- twitter:card：X（旧Twitter）での表示形式の指定（主に「summary_large_image」を指定）
実際のHTMLコード記述例は以下のようになります。各プロパティの意味と役割を正確に理解し、テンプレートに組み込むことが重要です。
<meta property="og:title" content="ページタイトルのテキスト" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/page-url/" />
<meta property="og:image" content="https://example.com/images/ogp-image.jpg" />
<meta property="og:description" content="ページの概要文言をここに記載します。ユーザーの興味を惹きつける内容にすることがポイントです。" />
<meta property="og:site_name" content="サイト名・会社名" />
<meta name="twitter:card" content="summary_large_image" />
これらのタグに誤りがあると、プラットフォーム側が情報を正常に読み込めなくなります。特にURLや画像パスは必ず「httpsから始まる絶対URL」で指定してください。相対パス（/images/photo.jpgなど）で記述すると、外部のSNS上では画像を正しく認識できなくなるため注意が必要です。
SNSごとに異なる！OGP画像の推奨サイズとデザイン設計のポイント
OGPの中でも、ユーザーのクリック率に最も大きな影響を与えるのが「OGP画像（サムネイル画像）」です。FacebookやX、LINEなどの主要プラットフォームで画像を綺麗に表示させるためには、適切なサイズとアスペクト比を把握しておく必要があります。
主要なSNSにおけるOGP画像の推奨仕様を比較表にまとめました。
| プラットフォーム | 推奨アスペクト比 | 推奨ピクセルサイズ（目安） | 主な表示形式の特徴 |
|---|---|---|---|
| 1.91 : 1 | 1200 × 630 px | 横長の長方形でタイムラインに大きく表示される。 | |
| X（旧Twitter） | 1.91 : 1 | 1200 × 630 px | summary_large_imageの場合、横長で視覚的インパクトが高い。 |
| LINE | 1 : 1 または 1.91 : 1 | 1200 × 1200 px （正方形対応） | トークルーム内では正方形にトリミングされる場合がある。 |
多くのプラットフォームで共通して美しく表示される黄金比率は、「1200px × 630px（アスペクト比 1.91:1）」です。このサイズをベースに画像を制作することで、主要なSNSのほとんどで表示崩れを防ぐことができます。
また、画像のデザイン設計においては、以下のポイントを意識することが成果につながります。
- 文字情報は中心に配置する：SNSの仕様や端末の種類によっては、画像の上下左右がわずかにトリミングされる場合があります。重要なテキストやメインビジュアルは、画像の中心から四隅に余白を持たせたエリアに収めましょう。
- 文字サイズを大きくし視認性を高める：スマートフォンなどの小さな画面でタイムラインに流れてきた際、文字が小さすぎると読まれません。一目で何のページか伝わるキャッチコピーを大きく配置します。
- サイトやブランドのトーン＆マナーを統一する：企業のロゴマークやブランドカラーを一定のルールで配置することで、タイムライン上でユーザーに認知されやすくなります。ホームページのトーン＆マナーとは？企業サイトのブランド価値を高める設計と策定手順も参考に、視覚的な一貫性を意識してください。
WordPressでのOGP設定手法とプラグイン活用法
WordPressで構築されたホームページの場合、テーマの標準機能やSEO系プラグインを利用することで、手動でコードを書き換えることなく効率的にOGPを設定できます。サイト運用者のスキルや目的に応じて最適な手法を選択しましょう。
代表的な設定手法として、以下の3つのアプローチがあります。
- SEOプラグインの活用：「All in One SEO」や「Rank Math」、「Yoast SEO」などの主要なプラグインには、OGP設定機能が標準搭載されています。各投稿や固定ページの編集画面から、個別のOGPタイトル、説明文、画像を直感的に設定できるため最も一般的です。
- テーマ機能の利用：近年の商用WordPressテーマ（SWELL、Cocoon、TCDなど）の多くは、テーマオプション画面にSNS設定項目を用意しています。デフォルトのOGP画像やXのカードタイプを管理画面から一括設定できるため、プラグインの導入数を減らしたい場合に適しています。
- テンプレートファイルへの直接記述：独自開発のテーマを利用している場合や、細部までコードを制御したい場合は、
header.phpなどのテンプレートファイルに条件分岐を含めたOGPタグを直接コーディングします。
プラグインやテーマ機能を使用する際も、設定画面で「デフォルトのOGP画像（サイト全体で共通利用する画像）」を必ず登録しておくことが大切です。個別記事に専用の画像が設定されていない場合でも、デフォルト画像が自動でフォールバックされ、画像未設定による表示エラーを防ぐことができます。
設定後の検証方法とキャッシュクリアの実務手順
OGPタグを正しく設定・実装しても、すぐにSNS上の表示が切り替わらないケースが多くあります。これは、各SNSのサーバー側やブラウザに古いデータ（キャッシュ）が保存されていることが主な原因です。公開後や修正後には、必ず各プラットフォームが提供している検証・デバッグツールを使用して反映確認を行う必要があります。
実務で活用すべき主要な検証ツールと手順は以下の通りです。
- Facebook Sharing Debugger（シェアデバッガー）：FacebookおよびInstagram向けの検証ツールです。対象ページのURLを入力し、「デバッグ」ボタンを押すことで、現在の読み込み状況を確認できます。もし情報が古い場合は、「スクレイピングを再実行（Scrape Again）」ボタンをクリックすることで、強制的に最新のOGP情報を再取得させることができます。
- X Card Validator（カードバリデーター）：X（旧Twitter）向けの検証ツールです。URLを入力して「Preview card」を実行すると、カードが正常に生成されるか、画像サイズやテキストが意図通り表示されているかを確認できます。エラーが出た場合は、記述ミスや画像のファイルサイズ・形式を確認して修正します。
- LINE Developers Social Plugins：LINEのトークやタイムラインでシェアされた際の見た目を確認するためのツールです。URLを入力してプレビュー表示をチェックします。
特に過去に一度シェアされたことのあるURLのOGP画像を差し替えた場合、デバッガーツールでキャッシュをクリア（再スクレイピング）しないと、いつまでも古い画像が表示され続けてしまいます。ホームページのリニューアル時やトーン＆マナーの刷新時は、必ず全主要ページのデバッグ作業をスケジュールに組み込みましょう。
よくある質問
Q1. OGP画像を設定しているのに、SNSでシェアすると古い画像が表示されてしまいます。
A. SNSプラットフォームのサーバーに古いキャッシュが残っていることが原因です。Facebookの場合は「シェアデバッガー」、Xの場合は「Card Validator」などの公式検証ツールに該当URLを入力し、キャッシュのクリア（再スクレイピング）を実行してください。また、ブラウザ自体のキャッシュが影響している場合もあるため、シークレットウインドウ等で表示を再確認することをおすすめします。
Q2. 記事ごとにOGP画像を用意できない場合、どうすれば良いですか？
A. 個別記事ごとに画像を準備できない場合は、Webサイト全体で共通して使用する「デフォルトのOGP画像（サイトのロゴやブランドイメージを象徴するメインビジュアル）」をSEOプラグインやテーマ設定で必ず指定しておきましょう。個別画像が未設定のページであっても、自動的にデフォルト画像が適用されるため、画像が表示されないトラブルを防ぐことができます。
Q3. OGPタグを設定することはSEO（検索順位）に直接的な効果がありますか？
A. OGPタグの設置自体は、Googleなどの検索エンジンにおける直接的なランキング要因（直接的なSEO効果）には含まれません。しかし、OGPが適切に設定されていることで、SNS上でシェアされた際のクリック率（CTR）やエンゲージメントが向上し、結果としてWebサイトへのアクセス増加や認知拡大につながります。間接的なマーケティング施策として極めて重要な役割を果たします。
まとめ
ホームページのOGP設定と画像最適化は、SNSからの流入や企業のブランドイメージを左右する重要な実務プロセスです。タグの記述漏れを防ぐことはもちろんのこと、デバイスごとの表示サイズを意識した魅力的なサムネイル画像を準備し、公開後には必ず各検証ツールでキャッシュのクリアと表示確認を行うことが成功の秘訣です。
イノベートスコープ株式会社では、大阪市中央区を拠点に、検索エンジン最適化（SEO）からSNS流入を見据えたWebサイト全体の構造設計、WordPressを用いた高品質なホームページ制作・保守運用まで幅広くサポートしております。集客力の高いWebサイト構築やリニューアルをご検討の際は、ぜひお気軽にお問い合わせください。
CONTACT
Web制作・SEO・AIOについてお気軽にご相談ください
ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。