Webサイトを制作するとき、SNSでの拡散を狙うならOGP（Open Graph Protocol）の設定と確認は欠かせません。正しく設定されていないと、タイトルや画像が表示されなかったり、思わぬ表示崩れが起きたりします。この記事では、OGP設定の基本からWordPressでの実装、確認方法、よくある問題点までを詳しく解説していきます。SNSでのシェア効果を最大化したいクリエイターやUI／UXデザイナーにも役立つ内容です。
目次
Web制作 OGP 設定 確認 の基本知識と検索意図
「Web制作 OGP 設定 確認」というキーワードで検索する人は、主に以下のような意図を持っています。これらを明確に理解すると、記事で必要な情報を整理できます。
OGPとは何かを理解したい
まずOGPがどういうプロトコルか、なぜSNSでのシェア表示に影響するのかを知りたいという検索意図があります。具体的には、og:title、og:description、og:imageなどの基本タグを通じてシェア時の見た目を制御する仕組みを理解したいという人が対象です。
Web制作でOGPをどう設定すればいいか知りたい
次に、Webサイトや特にWordPressでOGPタグをどう導入するか、テーマやプラグインを使う方法、コードを直接追加する方法など実践的な設定方法を探している人が多いです。基本タグの準備や画像選びのコツなどの具体的手順を求めています。
設定後に正しく機能しているか確認したい
OGPを設定した後、SNSでシェアした時の見た目が期待通りか、プラットフォームごとに表示が崩れていないか、キャッシュの影響で古い情報が表示されていないかなどを検証したいという意図も強いです。
OGPの設定方法：WordPressでの実践ガイド
ここからは、OGPをWordPress制作に取り入れる際の具体的な設定方法を詳しく解説します。テーマ編集、プラグイン活用、各タグの意味と適切な値の使い方など実践的内容を含めています。
テーマに直接コードを追加する方法
テーマを編集できる環境では、header.phpやfunctions.phpでOGPタグを手動で出力することができます。たとえば、functions.phpに wp_head フックを使って og:title、og:description、og:image、og:url などの基本タグを条件分岐付きで出力するコードを追加します。アイキャッチ画像があればそれを og:image に使い、なければデフォルトの画像を設定するなどの fallback 処理も含めると柔軟性が高まります。
SEOプラグインを使って簡単に設定する方法
Yoast SEO や Rank Math、All in One SEO などのプラグインにはSNSシェア用のOGPタグ自動生成機能が備わっています。投稿編集画面で「ソーシャル」タブを使って、OGP用のタイトル・説明・画像を個別に上書きできるものが多いです。複数の SNS に対応しており、Eコマースやカスタム投稿にも対応しているものがあります。
OGP画像の準備と推奨サイズ・形式
重要なポイントとして、OGP画像はSNSでのクリック率に直結します。推奨サイズは約1200×630ピクセルで、比率はおおよそ1.91:1 が無難です。ファイル形式は JPEG や PNG が一般的で、WebP を使える場面もありますが対応プラットフォームでの表示確認が必要です。画像内にテキストを配置する場合、画面によって切り取られる可能性を考えて文字を中心に配置するとよいです。
OGPタグの主な仕様と必要なプロパティ
OGPタグはどのタグが必須で、どれが補助的かを理解することで抜け漏れを防げます。ここでは最新仕様に基づく主要タグとその使い方を整理します。
OGPのコアプロパティ
まず、ほとんどの SNS で最低限必要なコアタグがあります。og:title（ページタイトル）、og:type（コンテンツタイプ）、og:url（正規 URL）、og:image（画像）、og:description（説明）の五つです。さらに og:site_name（サイト名）や og:locale（言語）の設定があるとブランド認知や地域表示の整合性に寄与します。これらをHTMLの内で直接設定するか、SEOプラグインに設定します。
Twitter カード（X）用のタグ
Twitter（X）では、OGPタグに加えて twitter:card、twitter:title、twitter:description、twitter:image などのタグを設定するとより良いカード表示が可能です。twitter:card は summary_large_image など大きな画像を表示するタイプを指定することが推奨されます。SNSごとの表示形式の差異に対応するために、これらのタグを扱います。
オプションタグと付加情報
記事（article）コンテンツでは、article:published_time や article:modified_time、article:author、タグやカテゴリといったプロパティを追加することで、SNS上や検索エンジンでのコンテンツ価値を補足できます。og:image:alt（画像説明）もアクセシビリティおよびユーザー体験の観点から追加すると良いです。
OGP 設定後の確認手順とツール紹介
設定が完了したら、きちんと SNS 上で反映されているかを確認することが重要です。以下に代表的な確認手順とツール、問題の見つけ方をまとめます。
実際の表示の確認
SNS に投稿する前に、シェアプレビューツールを使って見た目をチェックします。Facebook、X、LinkedIn などでタイトル・画像・説明の切れや重複がないか確認することで、誤った印象を与えずクリック率を高められます。また、画像がぼやけたりトリミングで情報が見えなくなることもあるため、推奨サイズでの確認が不可欠です。
キャッシュクリアと再取得
SNS は一度取得した URL のメタ情報をキャッシュするため、タグを修正しても古い情報が表示され続けることがあります。Facebook の Sharing Debugger や LinkedIn の Post Inspector、X のカードバリデータなどツールを使って再取得（Scrape Again）を指示すると反映されることがあります。
検証ツールの紹介
使い勝手の良い検証ツールには、OG タグの抜けや画像サイズ、absolute URL かどうか、JavaScript による動的注入かどうかなどをチェックするものがあります。複数のSNSでどのように見えるかを一度に表示できるプレビュー機能を持つツールが便利です。タグが HTML ソースの head 内にあるかどうかも必ず確認します。
WordPressでよくあるOGP設定の問題と解決策
Web制作でよく見られるOGP設定の抜けや誤り、表示が期待通りにならない原因を整理し、それぞれに対する対策を紹介します。これらを事前に把握するとトラブル対応がスムーズになります。
画像が表示されない・別の画像が使われるケース
アイキャッチ画像が設定されていない、og:image に相対 URL を使っている、画像がHTTPSで供給されていない、または画像がプライベートな場所にあってクローラーがアクセスできないなどが原因です。画像サイズが小さ過ぎたり形式が対応外だったりすることもあります。推奨サイズ・形式を確保し、絶対パスの HTTPS URL を使うことが重要です。
タイトル・説明が意図しない内容になるケース
記事編集画面でのソーシャルタイトルや説明を設定していないと、自動的に記事タイトルや抜粋、本文の一部が使われ、長過ぎると切られることがあります。SEO／SNSプラグインを使って個別に上書きできるようにしておくと意図した表示が可能です。長さやキーワードの順序にも注意が必要です。
キャッシュの影響・古い情報が残るケース
SNSプラットフォーム側で取得したメタデータがキャッシュされており、修正後も古いタイトルや画像が表示されます。Facebook や LinkedIn、X のデバッガー／インスペクターを使って強制的に再取得を行い、時間をおいて確認することで解消されることが多いです。また、OGPタグが JavaScript で動的に生成されているとクローラーに認識されないためサーバー渡しの HTML に含める必要があります。
まとめ
OGP の設定と確認は Web 制作において SNS でのリンクの第一印象を左右する極めて重要な工程です。正しいタグを HTML head 内に設置し、推奨される画像サイズや形式で og:image を用意すること。さらに、SNS プラットフォームごとのカードタグも意図通りであることを確認することがポイントです。
WordPress を使っている場合は、SEO プラグインを活用すれば設定が簡単ですし、コードによる直接実装も柔軟性があります。設定後はシェア プレビューや公式デバッガーツールで表示とキャッシュを確認し、期待する見た目が出ているかを検証してください。これらをきちんと行えば、シェア数やクリック率が向上し、Web 制作の成果を最大化できます。
コメント