Webサイト制作において、SEO（検索エンジン最適化）やSNSでの見え方を左右する**「meta（メタ）タグ」**。
「難しそう」「どこまで設定すればいいの？」と悩んでいる初心者の方に向けて、これだけは押さえておきたい基本をまとめたブログ記事を作成しました。
Webサイトを作ったとき、HTMLのコードの中に <meta …> という一文を見たことはありませんか？
これらは「metaタグ」と呼ばれ、検索エンジンやSNSに対して「このページはこんな内容ですよ」と伝える重要な役割を持っています。
今回は、metaタグの基本から、今すぐ設定すべき必須タグを分かりやすく解説します！
1. metaタグとは？
metaタグは、HTMLの <head> セクション内に記述するタグのことです。
ブラウザの画面上には直接表示されませんが、主に以下の相手に情報を伝えるために使われます。
- 検索エンジン（Googleなど）： サイトの内容を正しく理解してもらう。
- SNS（XやFacebookなど）： シェアされた時の見た目を整える。
- ブラウザ： 文字化けを防いだり、スマホでの表示サイズを調整したりする。
2. これだけは外せない！必須のmetaタグ5選
まずは、どんなWebサイトでも必ず入れておくべき5つのタグをご紹介します。
① 文字エンコーディング（charset）
サイトの文字化けを防ぐための設定です。現在は「UTF-8」が標準です。
HTML
<meta charset="utf-8">
② ビューポート設定（viewport）
スマホでサイトをきれいに表示させるために必須のタグです。
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
③ ディスクリプション（description）
検索結果のタイトルの下に表示される「説明文」です。クリック率に大きく影響します。
HTML
<meta name="description" content="ここにページの説明文を100〜120文字程度で記載します。">
④ OGPタグ（SNS対策）
SNSでシェアされた時に、画像やタイトルを魅力的に表示させるためのタグです。
HTML
<meta property="og:title" content="記事のタイトル">
<meta property="og:image" content="画像のURL">
⑤ 検索除外（noindex） ※必要な場合のみ
テストページなど、検索結果に出したくないページに使用します。
HTML
<meta name="robots" content="noindex">
3. metaタグを設定するメリット
正しく設定することで、以下のような効果が期待できます。
- SEO効果： 検索エンジンが内容を適切に評価しやすくなる。
- クリック率の向上： 魅力的な説明文（description）があれば、ユーザーがサイトを訪れやすくなる。
- SNSでの拡散力アップ： きれいな画像（OGP）が表示されると、シェアされた時の注目度が変わる。
[Image comparison of a link shared on social media with and without OGP settings]
4. まとめ：まずは基本から
metaタグは種類が多くて大変そうに見えますが、まずは 「文字コード」「ビューポート」「ディスクリプション」 の3つから完璧にしていきましょう。
自分のサイトがどう見えているか気になる方は、Googleの検索結果やSNSのプレビューツールを使ってチェックしてみてくださいね！
