Webサイトを制作する際、SNSでのシェア時に魅力的なカードが表示されるかどうかは流入やクリック率に大きく影響します。この記事では「Web制作」「OGP」「設定」「方法」というキーワードで検索するユーザーが求める情報をもれなくカバーします。OGPの基礎から具体的な設定手順、WordPressでの実装例、表示トラブルの解決策まで理解でき、すぐ実践できる内容となっています。
目次
Web制作 OGP 設定 方法 の基本概念とは
OGPとは Open Graph Protocol の略で、Webページが SNS やメッセージアプリで共有された時に表示されるタイトルや画像、説明などを制御する仕組みです。Web制作の過程でこの仕組みを理解しておくことで、意図しない表示を防ぎ、クリック率やブランディングの向上が期待できます。
OGP の基本タグとして特に重要なのは４つです。
og:title（ページタイトル）
og:type（ページの種類）
og:url（正規 URL）
og:image（サムネイル画像）
これらに加えて説明文やサイト名、ロケールなどを設定することで表示の精度が上がります。
OGP の４必須タグの意味
各ページに必ず設定すべきタグとして og:title, og:type, og:url, og:image の４つがあります。
og:title は SNS 上で表示されるタイトルで、記事タイトルと異なる表現でも可です。
og:type はホームページでは website、個別記事ページでは article とするのが一般的です。これにより SNS プラットフォームが内容を適切に扱います。
推奨タグと補足タグ
必須タグに加えて og:description（説明文）、og:site_name（サイト名）、og:locale（言語地域）などのタグを追加することで、多くのプラットフォームで見栄えがよく統一感のある表示が可能になります。X（旧 Twitter）カード用の meta タグなど、専用の拡張タグを使うとさらに最適化できます。
OGP の影響とメリット
OGP が正しく設定されていないと、SNS で共有された際に意図しない画像やテキストが表示されてしまうことがあります。これによりクリック率が下がる原因になることが報告されています。逆に OG 画像やタイトルを魅力的に設定することでシェアや流入が増える事例が多数確認されています。
WordPressでのOGP設定方法ガイド
Web 制作において WordPress を使うケースは非常に多く、その中で OGP の設定方法を知っておくことは必須です。ここではプラグインを使う方法とテーマ内の関数を使う方法の両方を、最新の WordPress 環境に即して解説します。
どちらの方法にも利点と欠点があります。プラグインを使えば管理画面だけで設定できてミスが少なく、テーマを直接編集する方法は柔軟ですがコードの理解が必要です。
また各ページに固有の画像や説明を出したいかどうかで使い分けるのが有効です。
プラグインを使った設定手順
WordPress には Yoast SEO や All in One SEO のような主要な SEO プラグインがあり、その中に SNS やソーシャルタブがあって OGP 設定が可能です。
まずプラグインをインストールして有効化します。次に一般設定でサイト名やロゴなど共通項目を設定し、各投稿または固定ページでタイトル、説明、画像を入力します。
テーマ関数での直接設定例
functions.php 内で wp_head アクションを使ってメタタグを出力する方法があります。
例えば投稿ページならタイトル取得関数、抜粋内容の取得、アイキャッチ画像の URL を使うなど。
もし投稿にアイキャッチ画像がなければデフォルト画像を設定する工夫も含めると見た目の一貫性が保てます。
WordPress 最新テーマまたはブロックエディタとの相性
最新のテーマではテーマオプションやカスタマイズ画面で OGP 設定に対応しているものも増えています。
ブロックエディタ環境下では、投稿・ページごとにメタデータのパネルがあり、画像・タイトル・説明を容易に設定できるテーマもあります。
テーマ側が機能を提供していない場合は前述のプラグインや関数で補います。
OGP設定で押さえるべき具体的な設定ポイント
OGP を設定する際には、ただタグを入れるだけでなく表示の最適化とトラブル回避の工夫が重要です。ここでは画像・文字数・URL形式などの具体項目を整理します。
表示の品質を上げるには、画像サイズ、タイプ、alt 属性などに注意を払うだけでなく、説明文やタイトルの文字数にも気を配ります。プレビューがどのようになるかをテストすることも忘れてはなりません。
OG画像のサイズとフォーマット
アイキャッチ画像として使う og:image は推奨サイズが 1200×630 ピクセル、アスペクト比はおよそ 1.91：1 です。フォーマットは JPEG または PNG が無難で、ファイルサイズはできるだけ軽量に（例えば 1MB 以下を目安に）するのが望ましいです。
WebP は一部プラットフォームで未対応だったりキャッシュで反映されないことがあるので注意が必要です。
説明文とタイトルの文字数制限
タイトルは SNS のプレビューで切れてしまうことがありますので 40文字前後に抑えると良いです。説明文は 70〜120 文字程度が目安で、重要なキーワードや魅力的な文言を前半に入れることでクリック率が上がります。
またスニペットとしてどう見えるかを意識して文末を丁寧にまとめる工夫が効果的です。
URL は正規化と絶対パスを使用
og:url は canonical と一致させ、https を含む絶対 URL を用いることで SNS プラットフォームのクローラーが正確にページを特定できます。
相対パスでは画像が取得されなかったり、URL のバリエーションでシェアが分散してしまうことがありますので避けます。
OGPの確認方法と問題解決テクニック
設定した OGP タグが実際どのように SNS で反映されるかを確認し、トラブルを解決するステップを知っておくことが実務では非常に重要です。以下にチェック方法とよくある問題とその対応策を紹介します。
シェア前にプレビューがどうなるか確認し、不具合があれば早めに修正しましょう。またキャッシュの問題など時間差で設定が反映されないケースも多いため、ツールを使った検証を怠らないことが重要です。
SNS プラットフォームのデバッグツールを使う
Facebook のシェアデバッガーや X のカードバリデーター、LINE やその他メッセージアプリでもプレビュー確認ツールがあります。これらで og:title や og:image が正しく取得されているかをチェックします。
もし古い情報が残っているならキャッシュをクリアするか、ページ URL を変更するなどで強制更新を促せます。
設定したけど画像が表示されない等の具体的な問題と原因
画像が表示されない場合、画像ファイル形式が未対応、OG 画像が指定されていない、絶対 URL が使われていない、SSL 部分で問題がある、画像のパスが間違っているなどの原因が考えられます。
説明文が切れるなら文字数制限を超えていないか確認し、余分な改行や HTML タグが誤って入っていないかもチェックします。
高速キャッシュや CDN の影響に注意
Web 制作でキャッシュプラグインや CDN を使っていると、変更が反映されないことがあります。キャッシュをクリアするか、SNS プラットフォームのキャッシュ破棄を促す機能があれば利用します。
SSL 化されたサイトで HTTP リダイレクトが誤って設定されている場合も og:url の一致性を崩す原因になりますので整合性を確認します。
事例で学ぶ Web制作における OGP 設定の効果と注意点
実際の Web 制作現場で OGP を見直すことで得られた成功事例と、設定時に見落とされがちなポイントを紹介します。これによりあなたのサイトでどこを気をつければよいかイメージが湧くようになります。
ここでは中小企業サイトやブログ、EC サイトなどで OGP の設定を強化することで SNS からの流入がどの程度改善したか、また誤った設定がどのようなマイナスをもたらしたかを具体的に把握します。
改善事例：流入増加と CTR の向上
あるサイトでは OGP 設定を適切に行う前は SNS シェア時に画像が出ずタイトルだけだったため流入が伸び悩んでいました。設定後はアイキャッチ画像・魅力的なタイトルと説明文を設定することで、Facebook からの月間流入が数十パーセント増加した例があります。
注意点：共通画像の使い回しによるインパクト不足
サイト全体で同じ OG 画像や説明文を使い回すことは管理は楽ですが、記事ごとに異なる印象を与えたい場合には逆効果になることがあります。投稿のテーマや内容に応じて個別化する努力をした方がユーザーのクリック意欲を高めます。
モバイルでの見え方の違いに注目
スマートフォンやタブレットなど画面が小さいデバイスではイメージの端が切れることがあります。画像内の重要な情報やテキストは中心寄せにし、上下の余白を十分とるデザインが効果的です。
まとめ
OGP の設定は Web 制作において SNS 流入の質と量を高めるための重要な要素です。基本的なタグの意味を理解し、WordPress を活用する方法や画像・文字数・URL などの具体的な設定ポイントを押さえることで、きちんとした表示を実現できます。
また確認ツールやキャッシュ、モバイル表示などの観点からのテストを行うことが欠かせません。適切な OGP の設定と運用によって、SNS からのシェア効果を最大化できるようになります。
コメント