HTML
🏷️ metaタグが反映されない
metaタグの位置や属性が間違っている
😰 こんな症状
OGP画像やdescriptionがSNSで表示されない。サイトをSNSでシェアしたときに起きるよ。
🔍 原因
metaタグが<head>の外（<body>内など）に書かれている、property/name属性の書き方が間違っている、またはSNS側のキャッシュが古い情報を保持しているよ。OGPタグは<head>内に正しい形式で書かないとSNSのクローラーが認識できないんだ。
❌ エラーが起きるコード
<meta name="description" content="...">
<!-- body 内に書いている -->✅ 直し方
1. metaタグが<head>内に書かれているか確認する。 2. OGPはproperty="og:title"の形式で書く（nameではなくproperty）。 3. og:imageは絶対URL（https://〜）で指定する。 4. SNSのキャッシュクリアツール（Twitter Card Validator、Facebook Sharing Debugger）で確認・更新する。
✅ 修正後のコード
<!-- head 内に配置する -->
<head><meta name="description" content="..."></head>この解決法は役立ちましたか？
🔗 関連するエラー
- meta descriptionが検索結果に反映されない — メタディスクリプションが無視される
- スタイルが反映されない — CSSファイルが読み込まれていない
- 画像が表示されない — 画像パスが間違っている
- ページのレイアウトが崩れる — タグの閉じ忘れ
- リンクをクリックしても何も起きない — href 属性の書き忘れ
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- HTMLとは？初心者向けにわかりやすく解説 — タグの書き方・ページ構造の基本
- HTMLのパス（相対パス・絶対パス）の書き方 — パスの書き方を初心者向けに解説