OGタグが足りないとシェアされない？基本4項目の確認と対策
更新日：
SNS時代の必須知識、OGタグってなに？
SNSでホームページのURLをシェアしたとき、きれいなサムネイル画像とタイトルが表示されるページと、何も出ない殺風景なページがあります。その違いの原因は、多くの場合「OGタグ（Open Graph タグ）」の有無にあります。
OGタグとは、FacebookやX（旧Twitter）などのSNSが、リンク先のホームページの情報を正しく表示するために使うHTMLのタグです。特に重要なのが、og:title og:type og:image og:urlの4つ。これらが欠けていると、SNSでの見栄えが悪くなり、クリック率や信頼性に悪影響を及ぼします。
この記事では、OGタグの基本から、なぜ重要なのか、どうやって正しく設定すればよいのかを具体例とともに解説していきます。
OGタグの重要性と正しい設定方法
OGタグとは？基本をおさらい
OGタグ（Open Graphタグ）は、Facebookが策定したSNS連携のためのHTMLメタ情報です。HTMLの<head>内に記述することで、SNSがそのページの内容を理解しやすくなります。
▼ 基本のOGタグ4つ
これらは最低限必要なタグで、これが1つでも抜けていると、SNSによっては情報が正しく表示されません。
実際にOGタグが不足するとどうなる？
例えば、自社の商品ページをFacebookにシェアしたとします。OGタグが不足していると、以下のような問題が発生します。
- タイトルが「No Title」やURLだけになる → 何のページか分からない
- 画像が表示されない → 視覚的に魅力がない
- 違うURLが参照される → リンク切れや信頼性低下の原因に
▼ 不十分な例（画像なし・情報不足）
<metaproperty="og:title"content="">
<metaproperty="og:url"content="https://example.com">このようにタグが不完全だと、SNS上でのページ表示が崩れてしまい、本来の魅力が伝わりません。
正しいOGタグの記述例
以下は、基本のOGタグを正しく記述した例です。
<head>
<meta property="og:title" content="新商品『スマートマグ』登場！オンライン限定販売開始" />
<meta property="og:type" content="product" />
<meta property="og:image" content="https://example.com/images/smartmug.jpg" />
<meta property="og:url" content="https://example.com/products/smartmug" />
</head>補足：
og:typeは「article」や「website」でもOKですが、商品ページなら「product」なども選べます。og:imageは1200x630px以上推奨。ファイルサイズは1MB以内に抑えましょう。
OGタグを自動で設定する方法（CMS編）
WordPressなどのCMSを使っている場合、プラグインを活用するのが手軽です。
▼ おすすめプラグイン例
- Yoast SEO（無料）
OGタグを自動生成し、ページごとにカスタマイズ可能。 - All in One SEO Pack
SNS向けのOGタグを詳細に設定できる上級者向け。
使い方例（Yoast SEO）：
- 投稿編集画面の下にある「ソーシャル」タブを開く
- 「Facebookタイトル」「画像URL」などを入力
- 更新ボタンを押せば完了
OGタグが正しく表示されているか確認する方法
タグを記述しても、SNS側でキャッシュが残っていると反映されないことも。以下のツールを使えば、即時に表示結果を確認＆修正できます。
▼ チェックツール
- Facebook Sharing Debugger
https://developers.facebook.com/tools/debug/ - X（旧Twitter）Card Validator
https://cards-dev.twitter.com/validator
上記ツールにURLを貼り付けて「Scrape Again」を押すと、SNSにどう表示されるか確認できます。
OGタグ以外にも見直したいSNS連携の設定
OGタグは必須ですが、SNSでの表示最適化には以下のタグも有効です。
▼ 追加で設定できるタグ
og:description：ページの要約文（120文字程度）og:site_name：ホームページ全体の名前twitter:card：X（旧Twitter）向けカード形式の指定
<meta property="og:description" content="飲み物の温度を1日中キープできるスマートマグが新登場！" />
<meta property="og:site_name" content="MyShop Online Store" />
<meta name="twitter:card" content="summary_large_image" />これらを併用することで、より魅力的なSNSシェアが実現できます。
まとめ：OGタグを整えてホームページの魅力をしっかり届けよう
SNSでホームページがシェアされたとき、見た目の第一印象がクリック率やブランドイメージに直結します。その土台となるのがOGタグです。
特にog:title og:type og:image og:urlの4つは、全ページで必ず設定するべきタグです。HTMLの基本が分かる方は自分でコードに追記しても良いですし、WordPressユーザーであればプラグインを活用するのが簡単です。
ホームページを作る際は、デザインやSEOだけでなく、「SNSでどう見えるか」もぜひ意識してみてください。OGタグの設定を整えるだけで、集客力は確実にアップします。
検索ボックスへキーワードを入力してください
