カテゴリー
Webサイト制作

「OGP設定」とは?SNSでシェアされた時の画像を指定する方法

せっかく魂を込めて書いたブログ記事や、数ヶ月かけて準備した新サービスのランディングページ。これらをSNSや社内チャットツール(SlackやChatwork)で共有した際、意図した通りの「魅力的なカード」として表示されているでしょうか。

もし、グレーの画像アイコンが表示されていたり、意図しない画像が勝手に切り取られていたり、タイトルが文字化けしているようなら、それはビジネスにおける「名刺交換」で、破れた名刺を渡しているのと同じくらい失礼であり、かつ致命的な機会損失です。

WebサイトのURLがシェアされた際に表示されるタイトルやサムネイル画像を指定する技術、それが「OGP(Open Graph Protocol)」です。今回は、BtoB企業のWeb担当者が知っておくべきOGPの基礎知識から、クリック率(CTR)を最大化するための画像設定の極意、そして実装方法までを解説します。

OGPは「Webサイトのパッケージデザイン」である

OGPとは、FacebookやX(旧Twitter)、LINE、そしてビジネスチャットツールなどでWebページのURLが投稿された際に、そのページのタイトル、説明文、サムネイル画像を正しく伝えるためのHTMLの記述ルールです。

クリック率を左右する「第一印象」

SNSのタイムラインは情報の濁流です。ユーザーはスクロールしながら、一瞬で「読むべきか、無視すべきか」を判断しています。この時、単なる青い文字のURLリンク(http://…)が表示されているだけの場合と、美しいアイキャッチ画像と魅力的な太字のタイトルが表示されている場合、どちらがクリックされるでしょうか。答えは明白です。

ある調査では、OGPが適切に設定されている記事は、設定されていない記事に比べてクリック率が数倍以上になるというデータもあります。OGP設定は、単なるシステム的な設定ではなく、コンテンツを多くの人に届けるための「パッケージデザイン」そのものなのです。

BtoBにおける「信頼」の可視化

「うちはSNS集客をしていないから関係ない」と考えるのは早計です。現代のビジネスコミュニケーションにおいて、URLの共有は頻繁に行われます。
例えば、営業担当者がクライアントに「弊社のサービス資料です」とSlackでURLを送ったとします。その時、綺麗にロゴが入った画像と、簡潔なサービス概要が表示されれば、「しっかりした会社だ」という印象を与えます。逆に、画像が出なかったり、崩れたレイアウトが表示されれば、その時点で「ITリテラシーが低い会社」というレッテルを貼られかねません。OGPは、企業のブランドイメージを守るための防具でもあります。

最低限設定すべき必須タグと役割

OGPを設定するには、WebページのHTMLソースコード内の`<head>`タグの中に、特定のメタタグを記述する必要があります。技術的な詳細は制作会社やエンジニアに任せるとしても、発注者として「どの要素が重要か」を知っておく必要があります。

og:image(最重要)

シェアされた時に表示されるサムネイル画像です。最も視覚的インパクトが強く、クリック率に直結します。記事ごとに専用のアイキャッチ画像を設定するのがベストですが、それが難しい場合でも、最低限「会社のロゴ」などが表示されるように共通設定をしておく必要があります。

og:title と og:description

`og:title`は、シェアされた時の太字のタイトルです。Webページの`<title>`タグと同じものを設定するのが一般的ですが、SNS向けによりキャッチーな文言に変更することも可能です(例:【必見】などをつける等)。
`og:description`は、タイトルの下に表示される補足説明文です。100文字程度で、記事の要約やクリックするメリットを簡潔に記載します。

twitter:card

X(旧Twitter)での表示形式を指定するタグです。「summary」(小さい画像とテキスト)か、「summary_large_image」(大きな画像)を選べます。インパクトを重視するなら、断然「summary_large_image」が推奨されます。画面占有率が高まり、クリックされやすくなるからです。

もし現在、自社サイトのリンクをSNSに貼ってみて、思った通りの表示になっていないのであれば、内部の設定ミスや画像のサイズ違反が疑われます。原因を特定し、最適な表示に修正するだけでも、流入数は変わります。

[ >> カグラプロへのご相談はこちら ]

SNSで「見切れない」ための最適な画像サイズ

OGP設定で最もトラブルが多いのが「画像サイズ」の問題です。「設定したはずの画像の両端が切れている」「変な位置でトリミングされて顔が見えない」といった現象です。これは、各SNSプラットフォームによって推奨されるアスペクト比(縦横比)が異なるために起こります。

正解は「1200px × 630px」

結論から申し上げます。2025年現在、主要なSNS(Facebook、X、LINE、LinkedIn)のほぼ全てをカバーできる安全圏のサイズは「横1200ピクセル × 縦630ピクセル」です。比率で言うと「1.91 : 1」です。

このサイズで作っておけば、大きな画像表示(Large Card)に対応でき、高解像度のスマホ画面でもぼやけずに表示されます。正方形の画像(Instagram用など)をそのまま流用すると、上下がトリミングされて重要な文字が消えてしまう事故が多発するため、必ずOGP専用の比率で作成してください。

重要な要素は「中央」に寄せる

さらに注意すべきは、一部のプラットフォームや正方形表示(Twitterのsummaryカードなど)の際に、画像の「中央部分」だけが正方形に切り取られて表示されるケースがあることです。
そのため、絶対に読ませたい文字やロゴ、人物の顔などは、画像の「中央・正方形エリア(630px × 630pxの範囲内)」に収まるように配置するのが鉄則です。端の方に文字を配置すると、環境によっては読めなくなるリスクがあります。

CMS(WordPress)での設定方法

技術的な知識がない担当者でも、WordPressなどのCMSを利用していれば、プラグインを使って簡単にOGP設定が可能です。

プラグインを活用した運用

「SEO SIMPLE PACK」や「Yoast SEO」などのプラグインを導入すれば、記事の投稿画面の下部に「SNS設定」や「OGP設定」という項目が出現します。ここに、その記事専用のタイトル、説明文、画像をアップロードするだけで、自動的に複雑なHTMLタグが出力されます。
制作会社に依頼する際は、「担当者が管理画面から記事ごとにOGP画像を変更できる仕様にしてほしい」と必ず要件に入れてください。ここが固定されていると、全ての記事が同じ画像(トップページのロゴなど)になってしまい、記事ごとの魅力を伝えられなくなります。

設定後の「確認」を怠らない

OGP設定を行ったら、必ず「検証(デバッグ)」を行ってください。HTMLを更新しても、SNS側のサーバーに古い情報(キャッシュ)が残っていると、画像が変わらないことがあるからです。

Facebookが提供している「シェアデバッガー」や、Xの「Card Validator」といった公式ツールを使用し、URLを入力して「スクレイピング(情報の再取得)」ボタンを押すことで、キャッシュをクリアし、現在の正しい表示を確認することができます。

神は細部に宿る。シェアされる準備を整えよ

「たかが画像の設定」と思われるかもしれません。しかし、Webマーケティングにおいて、ユーザーとの最初の接点は検索結果か、SNSのタイムラインです。その入り口である「看板」が歪んでいては、どんなに素晴らしい店内(コンテンツ)を用意しても、お客様は入ってきません。

CagraPRO(カグラプロ)では、サイト制作時に全ページのOGP設定を標準化することはもちろん、クリック率を高めるためのOGP画像のクリエイティブ制作や、運用しやすい管理画面の設計までをワンストップで提供します。「自社のリンクを貼るといつも変な画像が出る」「もっとSNSからの流入を増やしたい」。そんな悩みをお持ちでしたら、ぜひ一度ご相談ください。

御社のコンテンツが、Webという大海原で正しく、美しく拡散されるための設計図を描きます。

[ >> カグラプロへのお問合せはこちら ]

タイトル:「OGP設定」とは?SNSシェアで損をしない画像指定と表示最適化の鉄則
ディスクリプション:SNSでWebサイトがシェアされた際の表示をコントロールする「OGP設定」について解説。クリック率を左右する重要性、推奨画像サイズ(1200×630)、必須タグの記述方法、そしてWordPressでの設定手順まで、BtoB担当者が知るべき拡散の技術を網羅。
スラッグ:ogp-settings-guide

著者:清宮 雄(株式会社カグラ 代表取締役) マーケティング、ブランディングおよび企業経営の領域において20年以上の実務経験を有する。国内外にてIT事業および教育事業を展開。