OGP画像とは?SNSでの見え方を左右する重要な設定
ホームページやブログ記事のURLをSNSに投稿したとき、タイトルと一緒に大きな画像が表示されることがあります。この画像が「OGP画像(Open Graph Protocol画像)」です。
OGPとは、WebページがSNSでシェアされた際に「どのようなタイトル・説明文・画像で表示されるか」を指定するための仕組みです。Facebook、X(旧Twitter)、LINE、LinkedInなど主要なSNSはすべてこの仕組みに対応しています。
OGP画像が正しく設定されているページとそうでないページでは、SNS上でのクリック率に大きな差が出ます。ある調査では、適切なOGP画像が設定されたリンクは、画像なしのリンクと比べてクリック率が約2〜3倍になるというデータもあります。
つまり、OGP画像の最適化は「SNSからの集客力」を大きく左右する重要な施策なのです。
OGP画像の基本的な設定方法
OGP画像を設定するには、HTMLの<head>タグ内にメタタグを記述します。基本的な記述は以下のとおりです。
まず、og:imageというメタタグでOGP画像のURLを指定します。画像のURLは絶対パス(https://から始まる完全なURL)で記述する必要があります。相対パスでは正しく認識されないことがあるので注意しましょう。
あわせて設定しておきたいのが、og:title(ページタイトル)、og:description(説明文)、og:url(ページURL)、og:type(ページの種類)です。これらを正しく設定することで、SNSにシェアされたときの表示が最適化されます。
X(旧Twitter)の場合は、OGPに加えて「Twitterカード」用のメタタグも設定するとより効果的です。twitter:cardをsummary_large_imageに設定すると、タイムラインで大きな画像付きのカードとして表示されます。
WordPressを使っている場合は、「Yoast SEO」や「All in One SEO」などのプラグインを使えば、管理画面から簡単にOGP設定ができます。コードを直接編集する必要がないので、初心者の方にもおすすめです。
効果的なOGP画像を作るためのポイント
推奨サイズとアスペクト比
OGP画像の推奨サイズは1200×630ピクセル(アスペクト比1.91:1)です。このサイズはFacebook、X、LINEなど主要なSNSすべてで最適に表示されます。
画像の容量は1MB以下に抑えましょう。あまりにも大きなファイルは読み込みに時間がかかり、SNS側で正しく取得されない場合があります。ファイル形式はJPEGまたはPNGが一般的ですが、最近ではWebP形式にも対応が進んでいます。
テキストの配置ルール
OGP画像にテキストを入れる場合、画像の中央付近にメインメッセージを配置するのがコツです。SNSによって画像のトリミング位置が異なるため、端に重要な情報を配置すると切れてしまうことがあります。
文字数は最小限に抑え、ひと目で内容が伝わるようにしましょう。具体的には、メインの見出しは15〜20文字程度、サブタイトルがある場合は30文字以内が目安です。
ブランドの統一感を持たせる
OGP画像には、自社のロゴや配色を統一的に使用しましょう。SNSのタイムラインで「この画像を見たらあの会社だ」と認識してもらえるようになれば、ブランド認知の向上にもつながります。
テンプレートを事前に用意しておくと、記事ごとにOGP画像を効率的に作成できます。Canvaなどの無料デザインツールを使えば、デザインの知識がなくても統一感のあるOGP画像を量産できます。OGP画像の作成方法についてはCanvaでプロ級のビジネスデザインを作る方法の記事も参考にしてみてください。
OGP画像の確認・デバッグ方法
OGP画像を設定したら、必ず正しく表示されるか確認しましょう。各SNSが提供しているデバッグツールを使えば、事前に表示をチェックできます。
Facebookの場合は「シェアデバッガー」(sharing debugger)にURLを入力すると、実際にシェアされたときの表示をプレビューできます。キャッシュが残っていて古い画像が表示される場合は、「Scrape Again」ボタンで再取得が可能です。
Xの場合は「Card Validator」で表示を確認できます。Twitterカードのメタタグが正しく設定されているかもあわせてチェックしましょう。
LINEの場合は「Page Poker」というツールで、LINEでシェアされたときの表示を確認できます。LINEは独自のキャッシュを持っているため、画像を変更した際はこのツールで再取得することをおすすめします。
よくあるトラブルとして、画像が表示されないケースがあります。原因の多くは「画像URLが絶対パスでない」「画像サイズが小さすぎる」「robots.txtでクローラーをブロックしている」のいずれかです。これらを確認して対処しましょう。
ページごとに最適なOGP画像を設定するコツ
トップページ、記事ページ、サービスページなど、ページの種類によってOGP画像の戦略を変えるとより効果的です。
トップページのOGP画像は、会社やサービスのブランドを象徴するビジュアルにしましょう。初めてURLをシェアされた人が「何の会社・サービスか」を一瞬で理解できるデザインが理想です。
ブログ記事のOGP画像は、記事のタイトルやテーマを視覚的に表現したものが効果的です。記事タイトルをそのままテキストとして画像に入れる方法がシンプルで効果が高いです。画像の背景を記事の内容に合わせたビジュアルにすると、さらにクリック率が向上します。
商品・サービスページのOGP画像は、商品写真やサービスのイメージビジュアルを使いましょう。価格や特典などの数字を入れると、タイムラインで目を引きやすくなります。
OGP画像とあわせて、画像のSEO対策も忘れずに行いましょう。画像SEOの基本の記事で解説しているalt属性やファイル名の最適化と組み合わせることで、検索エンジンとSNSの両方からの流入を強化できます。
まとめ
OGP画像は、SNSでシェアされたときの「第一印象」を決める非常に重要な要素です。適切なOGP画像を設定するだけで、SNSからのクリック率やサイトへの流入数が大幅に改善される可能性があります。
まずは推奨サイズ(1200×630ピクセル)で画像を作成し、基本的なメタタグを設定するところから始めてみましょう。デバッグツールで表示を確認し、ページごとに最適な画像を用意することで、SNSマーケティングの効果を最大化できます。
OGP画像の設定やSNS活用でお悩みの方は、Sane Designにお気軽にご相談ください。ホームページの設定からSNS連携まで、トータルでサポートいたします。