← エラー辞典に戻る

HTML

metaタグが反映されない

metaタグの位置や属性が間違っている

こんな症状

OGP画像やdescriptionがSNSで表示されない。サイトをSNSでシェアしたときに起きるよ。

まず試す

meta タグが <head> 内にあるか、OGPは property="og:..." 形式かを確認する。

html
<head>
  <meta property="og:title" content="ページタイトル">
  <meta property="og:image" content="https://example.com/ogp.png">
</head>

これで直らなければ、下の「自分のケース」を確認。

🔍 自分のケースはどれ？

  • ✓meta が body 内にある
    → <head> 内に移す。
  • ✓OGPが反映されない
    → name ではなく property="og:title" 形式で書く。og:image は絶対URL。
  • ✓直したのにSNSで古いまま
    → Twitter Card Validator / Facebook Sharing Debugger でキャッシュを更新する。

なぜ起きる？

metaタグが<head>の外（<body>内など）に書かれている、property/name属性の書き方が間違っている、またはSNS側のキャッシュが古い情報を保持しているよ。OGPタグは<head>内に正しい形式で書かないとSNSのクローラーが認識できないんだ。

✕ エラーが起きるコード
<meta name="description" content="...">
<!-- body 内に書いている -->
✓ 直したコード
<!-- head 内に配置する -->
<head><meta name="description" content="..."></head>

✅ 直ったか確認

各SNSのカード検証ツールで、意図したタイトル・画像が表示されればOK。

🆘 まだ直らないときは

og:image は https:// の絶対URLで、実在し公開されているか確認しよう。

Q&Aで質問する →

この解決法は役立ちましたか？

🔗 関連するエラー

🔗 別カテゴリの関連エラー

📖 この問題を学べるレッスン

HTMLコース（基礎から）で根本から理解する →

✏️ 手を動かして練習

練習ドリル一覧で実際に書いて確認する →

📝 関連ブログ記事

📖 関連する用語

🚀 HTMLコースで基礎を学ぼう！

エラーの原因を根本から理解するには、基礎を体系的に学ぶのが近道です。完全無料・登録不要。

HTMLコースを始める →

❓ 関連するQ&A