「Facebookでリンクをシェアしたら、なんか変なサムネイルが出てきちゃって…」
先日、戸田市内で雑貨のオンラインショップを運営されているKさんから、こんな相談をいただきました。せっかくInstagramで新商品の告知リンクを貼ったのに、真っ白な画像と意味不明なURLが表示されてしまったと。「これじゃクリックされないですよね？」と苦笑いされていたのが印象的でした。
この問題、実はOGP（Open Graph Protocol）の設定を行うだけでほぼ解決できます。難しそうな名前ですが、仕組みを理解してしまえば「なるほど、そういうことか！」となる技術です。今回はOGPとは何か、なぜWebサイトに必要なのか、実務での設定方法まで噛み砕いてお話しします。
OGPとは？SNSがWebページの「顔」を読み取る仕組み
OGPは「Open Graph Protocol」の略で、WebページがSNSでシェアされたときに、どんな見た目で表示されるかをコントロールするための仕組みです。FacebookがもともとOGPを提唱したのですが、現在はTwitter（X）・LINE・SlackなどほぼすべてのSNSやメッセージアプリが対応しています。
SNSにURLを貼り付けると、タイトル・説明文・サムネイル画像がカードのように自動表示されますよね。あの「カード」の内容を決めているのがOGPです。設定がないページをシェアすると、SNS側が「よくわからないからとりあえず適当に取ってくるか」という感じで、ページ上のランダムな画像や文章を引っ張ってきてしまいます。それがKさんのケースで起きていたことです。
OGPはHTMLの<head>タグの中に、metaタグとして記述します。SNSのクローラー（情報を自動収集するプログラム）がページを訪れたとき、まずこのmetaタグを読みに来るわけです。
基本のOGPタグ4種類を押さえよう
OGPには多くの種類がありますが、まず押さえておくべき基本タグは次の4つです。
- og:title：シェアされたときに表示されるタイトル
- og:description：タイトルの下に表示される説明文（80〜120文字が目安）
- og:image：サムネイルとして表示される画像のURL
- og:url：そのページの正規URL
これらをHTMLに書くとこんな形になります。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文をここに書きます" />
<meta property="og:image" content="https://example.com/ogp-image.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="website" />よく忘れがちですが、og:typeも追加しておくと安心です。トップページなら「website」、ブログ記事なら「article」を指定します。
画像サイズは1200×630pxが黄金比とされています。これより小さいと表示がぼやけたり、比率が崩れたりすることがあるので注意してください。弊社では新しいサイトを制作するたびに、まずOGP用画像のサイズをデザイナーと確認するのがルーティンになっています。
Twitter（X）は別途「Twitterカード」の設定が必要
ここが意外と見落とされがちなポイントです。TwitterはOGPとは別に、Twitterカードという独自の仕組みを持っています。og:タグだけでは不完全な場合があるため、以下のmetaタグもあわせて記述するのがおすすめです。
- twitter:card：カードの表示形式（summary_large_imageが一般的）
- twitter:title：Twitterでのタイトル
- twitter:description：Twitterでの説明文
- twitter:image：Twitterでのサムネイル画像
「og:と内容が同じなのに二重に書くの、面倒ですよね？」という気持ちはすごくわかります。WordPressをお使いであれば、Yoast SEOやAll in One SEOなどのプラグインが両方まとめて自動生成してくれるので、手動で書く必要はほとんどありません。ただ、静的サイトや独自開発の場合は両方きちんと書いておくのがベターです。
設定したあとの確認方法と、よくある落とし穴
OGPを設定しても、「SNSに貼ってみたら変わってない…」という声をよく耳にします。これはSNS側のキャッシュが原因であることがほとんどです。
各SNSには公式のデバッグツールが用意されていますので、必ず活用してください。
- Facebook：Sharing Debugger（sharedebugger.com）
- Twitter（X）：Card Validator（cards-dev.twitter.com）
- LINE：実際にLINEのトークでURLを送信して確認
FacebookのSharing Debuggerでは、「Scrape Again」ボタンを押すことでキャッシュを強制的にリフレッシュできます。「設定したのに反映されない」と焦る前に、まずここを試してみてください。
弊社の経験では、OGP設定でつまずく原因の約70%は「画像URLが絶対パスになっていない」か「画像サイズの不備」です。og:imageには必ずhttps://から始まる完全なURLを記述してください。相対パス（例：/images/ogp.jpg）では正しく読み込まれません。Kさんのケースも、まさにこれが原因でした。修正したその日のうちにきれいなカードが表示されるようになり、「こんな簡単に直るんですか！」と驚いておられました。
Q：ページごとにOGP画像を変えないといけないですか？作るのが大変で…
埼玉県内で飲食店を複数展開されているFさんから、よくいただく質問です。ページ数が多いサイトだと確かに全ページ分の画像を作るのは現実的ではないですよね。
A：トップページと主要なランディングページ（サービス紹介・商品詳細など）は個別に作成し、それ以外はサイト共通のデフォルト画像で問題ありません。ブログ記事が多い場合は、記事のアイキャッチ画像をそのままOGP画像に使い回す設定にすると手間が大幅に減ります。WordPressであればプラグインで自動化できますよ。大切なのは「シェアされたとき、何のページかひと目でわかるか」という視点で画像を選ぶことです。ロゴだけの真っ白な画像より、商品やサービスが伝わる画像のほうがクリック率は格段に上がります。
OGP設定はSEOではなく「SNS集客」の入口です
よく「OGPを設定するとSEOに効きますか？」と聞かれるのですが、OGPはGoogleの検索順位に直接影響するものではありません。ただし、SNSでのシェアが増える→サイトへの流入が増える→ユーザー行動がGoogleに評価されるという間接的な好循環は十分にあります。
SNS経由の集客を強化したいなら、OGPはその入口として必ず整備しておくべき設定です。特にECサイトや飲食店・店舗系のサイトは、お客様がLINEやInstagramでURLをシェアしてくれる機会が多いので、その「口コミの見た目」をちゃんとコントロールしておくことが大切です。
ミアキスでは、Web制作の際にOGPの設定を標準で行っています。また既存サイトのOGP設定が不十分な場合の改善対応も承っています。サービスの詳細はこちらからご覧いただけます。料金面が気になる方は料金プランもあわせてご確認ください。
「うちのサイト、SNSでシェアされたときどう見えてるんだろう？」と気になった方は、まず上でご紹介したFacebookのSharing Debuggerでチェックしてみてください。意外な表示になっていることも多いですよ。もし設定の仕方がわからない、修正してほしいという場合はお気軽にお問い合わせください。戸田市近辺であれば直接お伺いすることも可能です。