ホームページのOGP設定手順と実践ガイド｜SNS拡散・クリック率を高めるタグ設計と表示崩れ対策

By /

ホームページのURLがX（旧Twitter）やFacebook、LINEなどのSNSでシェアされた際、アイキャッチ画像や適切なタイトルが表示されず、文字だけのリンクになってしまった経験はないでしょうか。タイムライン上でプレビューが表示されないリンクは視認性が低く、クリック率（CTR）が大幅に低下します。

結論として、SNS経由のアクセスを最大化し企業ブランドを正しく伝えるには、HTMLの<head>内に「OGP（Open Graph Protocol）」メタタグを正しく設定することが不可欠です。OGPを実装すれば、表示画像・要約文・タイトルを運営者側で正確に制御できます。この記事では、OGPの基礎知識、必須タグの種類、HTML・WordPressへの実装手順、各SNSでのデバッグ方法、表示崩れ時の対処法までを分かりやすく解説します。

OGP（Open Graph Protocol）の基礎知識とWebサイト運営における重要性

OGP（Open Graph Protocol）とは、Webページのタイトル、URL、概要文、アイキャッチ画像などのメタ情報をSNSクローラーやチャットツールに正確に伝えるためのWeb標準仕様です。ユーザーがSNS上でURLを入力・シェアした際、プラットフォームのボットがページ情報を読み取り、視覚的なカード形式のプレビュー（リンクプレビュー）を自動生成します。

なぜ企業サイトやオウンドメディアでOGP設定が必須なのか

SNSユーザーは速いスピードでタイムラインをスクロールしています。テキストのみのURLリンクは認知されにくく、多くの場合読み飛ばされてしまいます。

一方、アイキャッチ画像とキャッチコピーがカード形式で表示されれば、ユーザーの興味を惹きつけWebサイトへの訪問を促進できます。オウンドメディアの記事、新製品発表、採用情報、セミナー案内など、第三者による拡散を期待するコンテンツでは、OGP設定の有無が集客成果を大きく左右します。

また、SlackやMicrosoft Teams、Chatworkなどのビジネスチャットツールでも、URL共有時にOGP情報が読み込まれます。社内外の情報共有をスムーズにする観点からも、企業サイトでのOGP導入は必須要件と言えます。

SEOおよびWeb集客への間接的な波及効果

Googleの公式見解において、OGPタグ自体は直接的な検索順位のランキング要因ではありません。検索エンジンのクローラーは、通常の<title>タグや<meta name="description">タグを優先して検索結果に反映します。

しかし間接的な集客効果は絶大です。OGPが適切に設定されたページはSNS上でのクリック率やシェア率が高まり、二次拡散へとつながります。その結果、多くの露出を獲得することで認知拡大や外部サイトからの自然な被リンク獲得につながり、中長期的なドメイン評価の向上とSEO効果をもたらします。

主要なOGPタグ一覧と各プロパティの仕様解説

OGPタグは、HTMLの<head>要素内に<meta property="..." content="...">の形式で記述します。全プラットフォーム共通の基本OGPタグと、X（旧Twitter）専用のTwitter Cardsタグを組み合わせて使用します。

プロパティ名 設定の要否 役割と設定内容
og:title 必須 SNSシェア時に表示されるタイトル。30〜40文字前後で簡潔に記述。
og:type 必須 ページの種別（トップページはwebsite、記事・下層はarticle）。
og:url 必須 ページの正規化された絶対URL（httpsから始まる完全URL）。
og:image 必須 タイムライン上に表示されるアイキャッチ画像の絶対パス。
og:description 推奨 ページの概要文。80〜100文字程度で魅力を要約。
og:site_name 推奨 サイト全体の名称（企業名やメディア名）。
og:locale 任意 言語および地域の指定（日本語サイトはja_JP）。
twitter:card 必須（X向け） Xでの表示カード形式（summaryまたはsummary_large_image）。
twitter:site 任意（X向け） Webサイト公式のXアカウント名（@ID）。

必須プロパティと推奨プロパティの役割

og:titleはSNSカードの最上部に太字で表示されます。通常の<title>と同じ文言で問題ありませんが、SNS用にキャッチーな短文を設定するのも有効です。重要なキーワードを前半に配置しましょう。

og:typeはサイト構造を定義します。トップページにはwebsite、ブログ記事や導入事例など下層コンテンツにはarticleを指定します。

og:urlには対象ページの正規URLを指定します。注意点として、必ず「https://から始まる絶対パス」かつ「パラメータを除いた正規URL」を記述してください。サイト全体のURL統一については、ホームページのURL正規化（canonicalタグ）とは？重複コンテンツ防止とSEO効果・設定手順をプロが解説をご参照ください。

og:imageはSNSカード内で最も目を引く要素です。画像URLは必ず絶対パスで指定し、アスペクト比1.91:1の画像を設定します。

twitter:cardはX上での表示形式を指定します。大きな画像で強調するsummary_large_imageか、コンパクトなsummaryを選択します。訴求力を高めるためsummary_large_imageの利用が一般的です。

実務で使えるOGPのHTML実装手順とコード記述例

静的HTMLサイトやWordPressテンプレートにOGPを直接記述する手順を解説します。

ステップ1：htmlタグにprefix属性を宣言する

OGP要素の使用を宣言するため、HTML最上部の<html>タグにprefix属性を追加します。

<html lang="ja" prefix="og: https://ogp.me/ns#">

トップページと記事ページで詳細に分ける場合は、トップページにprefix="og: https://ogp.me/ns# website: https://ogp.me/ns/website#"、個別記事にprefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article#"を記述するのが標準的ですが、上記の一番シンプルな基本宣言のみでも主要プラットフォームで問題なく認識されます。

ステップ2：headタグ内に基本タグを記述する

次に<head>タグ内にメタタグをまとめて記述します。

以下は個別記事ページ向けの実装コード例です。

<!-- OGP基本設定 -->
<meta property="og:title" content="ホームページのOGP設定手順と実践ガイド｜SNS拡散・クリック率を高めるタグ設計">
<meta property="og:type" content="article">
<meta property="og:url" content="https://innovate-scope.com/archives/ogp-setup-guide">
<meta property="og:image" content="https://innovate-scope.com/images/ogp-eyecatch.jpg">
<meta property="og:description" content="ホームページをSNSでシェアした際に画像やタイトルを魅力的に表示させるOGP設定について、必須タグの種類からHTML記述手順、各種デバッグ方法まで詳しく解説します。">
<meta property="og:site_name" content="イノベートスコープ株式会社">
<meta property="og:locale" content="ja_JP">

<!-- X（旧Twitter）専用設定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@innovate_scope">

静的サイトの場合はページごとに数値を書き換えます。CMSを使用する場合はシステムから動的に出力させます。

SNS別のカード表示仕様とOGP画像・テキストの最適化設計

OGPタグを実装するだけでなく、表示条件に合わせた画像設計を行うことが成果を出す鍵となります。

推奨される画像サイズとアスペクト比

主要SNS（X、Facebook、LINE等）で最もきれいに表示される推奨仕様は以下の通りです。

  • 推奨解像度：横1200ピクセル × 縦630ピクセル（アスペクト比 1.91:1）
  • 最小解像度：横600ピクセル × 縦315ピクセル（これ未満だと画質が劣化します）
  • ファイル容量：500KB〜1MB程度（上限5MB。容量が大きすぎると読み込みエラーの原因になります）
  • 画像形式：JPGまたはPNG（透過PNGは背景が黒に変換される場合があるため、背景を敷いたJPGを推奨）

画像自体の軽量化や表示速度改善については、ホームページの画像最適化とは？SEO・表示速度を高めるWebP・圧縮・Alt属性の実践手順もあわせてご覧ください。

文字切れを防ぐセーフエリア設計の重要性

画像内にテキストやロゴを配置する場合、画像の端ギリギリに配置してはいけません。プラットフォームによってはタイムライン表示時に端がトリミングされたり、正方形に丸め込まれたりすることがあります。

重要な要素は画像中央（上下左右に各15%程度の余白を残したエリア）に配置する「セーフエリア設計」を徹底しましょう。画像作成の詳細なコツはホームページのOGP画像（サイズ・デザイン）の作り方｜SNSシェア時の魅力を高める設計と自動生成のコツで解説しています。

WordPressサイトにおけるOGP設定の方法と注意点

WordPressを利用している場合、テーマ機能またはプラグインを使ってOGPを一括管理するのが効率的です。

1. プラグインを活用した設定手順

「All in One SEO」「Rank Math」「SEO SIMPLE PACK」などのプラグインを活用すると、直感的に設定できます。

  • デフォルト画像の設定：個別アイキャッチがないページ用に、企業ロゴなどを共通OGP画像として一括登録できます。
  • 個別投稿ごとのカスタマイズ：記事編集画面からSNS用のタイトル・説明文・画像を個別に編集可能です。
  • Twitterカードの切替：画面上の選択肢で簡単に表示形式を変更できます。

2. テーマ固有機能との二重出力防止

多機能なWordPressテーマ（SWELLやSnow Monkeyなど）には、最初からOGP自動生成機能が備わっています。テーマ側とプラグイン側の両方でOGP機能を有効にすると、HTML内にOGPタグが二重出力される不具合が発生します。

メタタグが重複するとSNS側が正しく情報を読み込めず、古い画像や誤ったテキストが表示される原因になります。必ずどちらか一方の機能のみを有効化してください。

OGPが表示されない・崩れる原因とトラブルシューティング

設定後に表示が反映されない場合は、以下の原因が考えられます。

1. SNS側のキャッシュ保持

最も多い要因がプラットフォーム側の「キャッシュ」です。一度SNS上でURLが認識されると、クローラーは過去の情報を保持します。HTMLを更新しても即座には切り替わりません。

解決には公式デバッガーツールを用いてスクレイピングを再実行します。Facebookなら「Sharing Debugger」で「もう一度スクレイピング」を実行します。Xの場合はURL末尾にダミーパラメータ（例：?v=2）を付与して再投稿を試みます。

2. 画像パスの指定ミス（相対パス）

画像パスが/images/ogp.jpgなどの相対パスになっていると、SNSクローラーが画像を参照できません。必ずhttps://yourdomain.com/images/ogp.jpgのようにドメインを含めた絶対パスで記述してください。

3. Basic認証・テスト環境による遮断

公開前の検証環境でBasic認証やIP制限がかかっていると、外部クローラーがアクセスできずエラーになります。テストを行う際は一時的に認証を解除するか、本番公開直後にデバッグツールで確認してください。

4. SSL（HTTPS）未対応および混在コンテンツ

主要SNSはセキュリティの観点からHTTP通信を制限しています。サイトが非SSLの場合や、サイトはHTTPSなのに画像URLが「http://」で記述されていると表示されません。常時SSL化の手順についてはホームページのSSL化とは？常時SSLの仕組みと未対応リスク・導入手順を徹底解説をご参照ください。

よくある質問

OGPタグはサイト内の全ページに設定する必要がありますか？

はい、すべての公開ページに個別のOGPを設定するのが理想です。特にブログ記事やサービスページ、事例紹介などは固有のタイトル・概要・画像を割り当てることでSNSでのクリック率が高まります。ただし、プライバシーポリシーなど拡散可能性の低いページは、サイト共通のデフォルト設定でも問題ありません。

OGP画像を差し替えたのにSNSで画像が変わりません。なぜですか？

SNSプラットフォーム側に古いキャッシュが残っているためです。HTMLを修正しただけでは即座に反映されないため、Facebook「Sharing Debugger」などのデバッグツールを使って最新の情報を再取得させるか、URL末尾にパラメータ（?update=1など）を追加して再投稿してください。

twitter:cardと標準のog:imageは両方書く必要がありますか？

はい、両方の記述を推奨します。Xは標準のOGPタグも読み込みますが、カードの表示サイズを指定するtwitter:cardはX独自の規格です。設定がないと意図せず小さな正方形表示になる可能性があるため、両方セットで記述しましょう。

OGPを設定するとSEO順位は上がりますか？

OGPタグ自体はGoogleの直接的な検索順位決定要因ではありません。しかし、SNSでの露出増加・クリック率向上・二次拡散によってトラフィックが増え、認知獲得や自然な被リンク獲得につながるため、間接的に大きなSEO効果をもたらします。

まとめ

ホームページのOGP設定は、SNS経由のアクセスを増やし、見込み顧客に対して企業の魅力を正しく伝えるために不可欠な施策です。

推奨サイズ（1200×630px）とセーフエリアを意識した画像を用意し、基本タグを記述した上で、デバッグツールを活用して表示確認を行うことで、表示崩れや機会損失を防止できます。

イノベートスコープ株式会社では、大阪市中央区を中心に、SEOやSNSでの集客を見据えた高品質なWeb制作・WordPress開発・運用保守を提供しています。自社サイトの集客改善やリニューアルをご検討中の企業様は、ぜひお気軽にお問い合わせください。

CONTACT

Web制作・SEO・AIOについてお気軽にご相談ください

ホームページ制作・リニューアル、WordPress、SEO・AIO対策、 ECサイト、Web集客、保守・セキュリティなど、 Webに関するご相談を承っています。 「何から相談すればよいかわからない」という段階でもお気軽にお問い合わせください。

お問い合わせフォームへ LINEでお問い合わせ

お問い合わせフォーム