HTMLを学習していると、headタグの中に「metaタグ」が書かれているのを見かけることがあります。しかし、「metaタグは画面に表示されないのに何のために必要なの？」「charsetやviewportには何を書くの？」「SEOに関係するmetaタグはどれ？」と疑問に感じる方も多いのではないでしょうか。metaタグは、Webページの文字コードや表示設定、検索エンジン向けの説明文など、ページに関する情報をブラウザや検索エンジンへ伝えるために使われます。
この記事では、HTMLのmetaタグの意味や役割、基本的な書き方、よく使う属性、SEOで意識したいdescriptionの設定方法を初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
HTMLのmetaタグとは？
metaタグは、HTML文書に関する補足情報を指定するためのタグです。ページ上に文章や画像として直接表示されるものではなく、ブラウザや検索エンジン、SNSなどにページ情報を伝える役割があります。
metaタグの役割
metaタグの主な役割は、Webページを正しく表示したり、ページ内容を外部のシステムに伝えたりすることです。例えば、文字化けを防ぐ文字コードの指定、スマートフォンで見やすく表示するviewportの指定、検索結果に表示されることがある説明文の指定などに使われます。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTMLのmetaタグについて解説します。">上記のように、metaタグはheadタグの中に書くのが基本です。metaタグは、ページを表示するための土台を整える重要なタグと覚えておきましょう。
metaタグは画面に直接表示されない
metaタグに書いた内容は、基本的にブラウザの画面には表示されません。画面に表示したい見出しや本文、画像などはbodyタグの中に書きます。
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>ページの見出し</h1>
</body>metaタグはユーザーに直接見せる内容ではなく、ブラウザや検索エンジンに伝える情報を書くタグです。表示されないから不要というわけではなく、ページを正しく扱ってもらうために必要な設定です。
metaタグは終了タグを書かない
metaタグは、終了タグを書かない空要素です。pタグやdivタグのように「</meta>」で閉じる必要はありません。
<meta charset="UTF-8">HTMLでは上記のように1つのタグだけで記述します。初心者の方は、metaタグには開始タグと終了タグのセットがない点を覚えておきましょう。
オススメ：HTML入門講座でWeb制作の基礎を学ぶ
関連記事：「HTMLとは？初心者向けに基礎知識と作り方を解説」
metaタグの基本的な書き方
metaタグは、headタグの中に書きます。指定する内容によって使う属性が変わるため、まずは「charset属性」と「name属性・content属性」の基本を押さえておくと理解しやすくなります。
headタグの中に書く
metaタグは、HTMLのheadタグ内に記述します。bodyタグの中ではなく、ページの設定情報をまとめるheadタグの中に書くのが基本です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
</body>
</html>上記の例では、文字コードを指定するmetaタグと、スマートフォン表示を整えるmetaタグをheadタグ内に書いています。
charset属性で文字コードを指定する
charset属性は、HTML文書の文字コードを指定するために使います。
<meta charset="UTF-8">UTF-8は現在のWeb制作でよく使われる文字コードで、日本語のページでも広く利用されています。文字コードの指定は、headタグの中でもできるだけ早めに書くのが一般的です。
name属性とcontent属性で情報を指定する
metaタグでは、name属性で情報の種類を指定し、content属性でその内容を指定する形がよく使われます。
<meta name="description" content="HTMLのmetaタグの役割を解説します。">この例では、name属性に「description」、content属性にページの説明文を書いています。name属性とcontent属性はセットで使うことが多いため、あわせて覚えておきましょう。
よく使うmetaタグの種類
metaタグにはさまざまな種類がありますが、初心者の方がまず覚えておきたいのは、charset、viewport、description、robots、OGP関連のmetaタグです。それぞれ目的が異なるため、使う場面を整理しておきましょう。
charsetで文字化けを防ぐ
charsetは、Webページの文字コードを指定するためのmetaタグです。
<meta charset="UTF-8">この指定があることで、ブラウザがHTMLの文字コードを判断しやすくなります。charsetの指定がない、またはファイルの文字コードと合っていない場合、日本語が文字化けする原因になることがあります。
viewportでスマートフォン表示を調整する
viewportは、スマートフォンやタブレットでページを見やすく表示するために使います。
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewportを指定すると、画面幅に合わせてページを表示しやすくなります。レスポンシブ対応のWebサイトを作る場合は、ほぼ必須に近い設定です。
descriptionでページの説明文を指定する
descriptionは、ページの概要を指定するmetaタグです。
<meta name="description" content="HTMLのmetaタグとは何か、役割や書き方を初心者向けに解説します。">descriptionに書いた内容は、検索結果の説明文として表示されることがあります。読者が記事をクリックするか判断する材料になるため、ページ内容を自然な文章でまとめることが大切です。
robotsで検索エンジンへの指示を指定する
robotsは、検索エンジンにページをどのように扱ってほしいかを伝えるmetaタグです。
<meta name="robots" content="noindex, nofollow">上記の例では、検索結果に表示しないようにするnoindexと、リンクをたどらないようにするnofollowを指定しています。公開したい記事に誤ってnoindexを入れると、検索結果に出にくくなるため注意しましょう。
OGPでSNSシェア時の表示を設定する
OGPは、SNSでページがシェアされたときのタイトルや説明文、画像を指定するための設定です。
<meta property="og:title" content="HTMLのmetaタグとは？">
<meta property="og:description" content="metaタグの役割や書き方を解説します。">
<meta property="og:image" content="https://example.com/ogp.jpg">OGPを設定しておくと、SNSで共有されたときにページ内容が伝わりやすくなります。WordPressではテーマやプラグインが自動出力する場合もあります。
metaタグとSEOの関係
metaタグの中には、SEOに直接関係するものや、検索結果での見え方に影響するものがあります。特にdescriptionやrobotsは、記事を公開するときに確認しておきたいポイントです。
descriptionはクリック率に関わる
meta descriptionは、検索結果に表示される説明文として使われることがあります。検索順位を直接大きく上げるタグというよりも、読者に「この記事を読みたい」と思ってもらうための文章と考えると分かりやすいです。
<meta name="description" content="HTMLのmetaタグとは何か、charsetやviewport、SEOで使うdescriptionの書き方を初心者向けに解説します。">descriptionを書くときは、記事内容とズレないようにしながら、検索キーワードを自然に含めましょう。キーワードを不自然に詰め込みすぎると、読みにくい説明文になってしまいます。
titleタグとあわせて考える
meta descriptionだけでなく、titleタグも検索結果で重要です。titleタグはmetaタグではありませんが、同じheadタグ内に書くため、SEOではあわせて考えることが多くあります。
<title>HTMLのmetaタグとは？役割と書き方を初心者向けに解説</title>
<meta name="description" content="HTMLのmetaタグの役割や基本的な書き方を解説します。">titleタグで記事の主題を伝え、descriptionで記事を読むメリットを補足すると、検索結果でも内容が伝わりやすくなります。
robotsの設定ミスに注意する
robotsタグは便利ですが、設定を間違えるとSEOに悪影響が出ることがあります。
<meta name="robots" content="noindex">noindexは、検索エンジンにページを検索結果へ表示しないよう伝える指定です。公開して検索流入を狙いたい記事には、基本的にnoindexを入れないようにしましょう。
WordPressでは自動出力される場合がある
WordPressでは、テーマやSEOプラグインによってmetaタグが自動で出力されることがあります。Cocoonなどのテーマでは、管理画面からdescriptionやOGPを設定できる場合があります。
記事本文にmetaタグを直接書くのではなく、WordPressの設定画面やSEOプラグイン側で設定するのが一般的です。重複して出力されないように、どこで設定されているか確認しましょう。
metaタグを書くときの注意点
metaタグはHTMLの基本設定に関わる便利なタグですが、間違った書き方をするとページ表示やSEOに影響することがあります。ここでは、初心者の方が特に注意したいポイントを整理します。
bodyタグの中に書かない
metaタグはheadタグの中に書くのが基本です。
<body>
<meta name="description" content="ページ説明文">
</body>上記のように、bodyタグの中へmetaタグを書くのは避けましょう。ページに関する設定情報は、headタグ内にまとめて書くようにします。
descriptionを長くしすぎない
descriptionはページの内容を説明する大切な文章ですが、長く書けばよいわけではありません。
<meta name="description" content="HTMLのmetaタグとは何か、役割や書き方、SEOで使うdescriptionやrobots、viewportなどを初心者向けに解説します。">descriptionは、記事内容を簡潔に伝える文章にすることが大切です。検索結果では表示される文字数に限りがあるため、重要な内容は前半に入れると伝わりやすくなります。
同じmetaタグを重複させない
同じ種類のmetaタグを複数書くと、ブラウザや検索エンジンにどの情報を優先してほしいのか分かりにくくなる場合があります。
<meta name="description" content="説明文A">
<meta name="description" content="説明文B">descriptionやviewportなど、同じ目的のmetaタグを重複して書かないように注意しましょう。特にWordPressではテーマやプラグインによる自動出力もあるため、重複しやすいポイントです。
OGP画像のURLを正しく指定する
OGP画像を指定する場合は、画像URLが正しく開けるか確認しましょう。
<meta property="og:image" content="https://example.com/images/ogp.jpg">画像URLが間違っていると、SNSでシェアされたときに画像が表示されないことがあります。SNSでの見え方も大切にしたいページでは、OGP設定後に表示確認を行うのがおすすめです。
HTMLを効率良く学ぶ方法
metaタグを理解するためには、HTMLの基本構造を実際に書いて、ブラウザの表示や検索結果で使われる情報の役割をイメージすることが大切です。metaタグは画面に直接表示されないため、最初は分かりにくいかもしれませんが、Webサイト制作では欠かせない設定です。
実際にHTMLファイルを作って試す
まずは、下記のようなHTMLファイルを作成し、ブラウザで開いてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>metaタグの練習</title>
<meta name="description" content="metaタグの練習用ページです。">
</head>
<body>
<h1>metaタグを学習中です</h1>
<p>metaタグはheadタグの中に書きます。</p>
</body>
</html>実際にコードを書きながら、charset、viewport、descriptionの役割を一つずつ確認すると理解しやすくなります。慣れてきたら、CSSファイルの読み込みやOGP設定にも挑戦してみましょう。
独学が不安なら質問できる環境を活用する
HTMLは初心者でも学びやすい言語ですが、「headタグの中身が分からない」「metaタグの種類が多くて覚えられない」「SEO設定が難しい」と感じることもあります。
独学でつまずいたまま学習が止まってしまう場合は、質問できる環境を活用するのもおすすめです。忍者CODEでは、HTMLやCSSの基礎からWebサイト制作まで体系的に学習できます。実際にコードを書きながら学べるため、知識だけでなく制作スキルも身につけやすくなります。
まとめ
本記事では、HTMLのmetaタグについて解説しました。
metaタグは、HTML文書に関する補足情報をブラウザや検索エンジンへ伝えるためのタグです。文字コードを指定するcharset、スマートフォン表示を調整するviewport、検索結果の説明文として使われることがあるdescriptionなど、Webページの基本設定に関わる情報を記述します。
metaタグはページ上に直接表示されませんが、文字化けを防いだり、スマートフォンで見やすく表示したり、検索結果でページ内容を伝えたりするうえで重要な役割を持っています。
metaタグを使う際は、headタグの中に書くこと、descriptionを分かりやすくまとめること、robotsやnoindexの設定ミスに注意することが大切です。また、WordPressではテーマやSEOプラグインがmetaタグを自動出力する場合があるため、重複しないように確認しましょう。
今回紹介したサンプルコードを参考にしながら、まずはHTMLの基本構造にmetaタグを書いて、役割を一つずつ確認してみてください。
