HTMLを学習していると、headタグの中に「meta」と書かれたコードを見かけることがあります。しかし、「metaタグは何のために使うの？」「画面に表示されないのに必要なの？」「SEOに関係するmetaタグはどれ？」と疑問に感じる方も多いのではないでしょうか。metaタグは、HTML文書に関する情報をブラウザや検索エンジンへ伝えるためのタグで、文字化けを防いだり、スマートフォン表示を整えたり、検索結果に表示される説明文を設定したりするときに使われます。
この記事では、HTMLのmetaタグの意味や基本的な使い方、charset・viewport・descriptionなどの代表的な種類、SEOで注意したいポイントを初心者向けにわかりやすく解説します。サンプルコード付きで紹介するので、HTMLを学び始めたばかりの方もぜひ参考にしてください。
HTMLのmetaタグとは？
metaタグは、HTML文書に関する補足情報を指定するためのタグです。ページ上に本文として直接表示されるタグではなく、ブラウザ、検索エンジン、SNSなどに対してページ情報を伝える役割があります。
metaタグの役割
metaタグは、Webページを正しく表示したり、検索エンジンにページ内容を伝えたりするために使われます。代表的な用途には、文字コードの指定、スマートフォン表示の調整、検索結果に表示される説明文の設定、SNSでシェアされたときの表示設定などがあります。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTMLのmetaタグについて解説します。">上記のように、metaタグは1種類だけではありません。metaタグは、ページの見た目を直接作るタグではなく、ページを正しく扱ってもらうための情報を設定するタグと覚えておきましょう。
metaタグはheadタグ内に書く
metaタグは、HTMLのheadタグ内に記述します。headタグは、ページのタイトルやCSSの読み込み、文字コードなど、ページ全体の設定情報をまとめる場所です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
</head>
<body>
<h1>サンプルページ</h1>
</body>
</html>見出しや本文、画像など、ユーザーに表示したい内容はmetaタグではなくbodyタグの中に書きます。metaタグはページの裏側で働く設定情報だと考えると理解しやすいでしょう。
metaタグは終了タグを書かない
metaタグは、終了タグを書かない空要素です。pタグやdivタグのように開始タグと終了タグで囲む必要はありません。
<meta charset="UTF-8">例えば、上記のように1つのタグだけで記述します。</meta> のような終了タグは基本的に書かないため、初心者の方はタグの形もあわせて覚えておきましょう。
HTMLでmetaタグを使う方法
metaタグは、指定したい内容によって書き方が少し変わります。特に初心者の方は、charset属性を使う書き方と、name属性・content属性を使う書き方の違いを押さえておくと理解しやすくなります。
基本的な書き方
metaタグは、headタグの中に「<meta 属性=”値”>」という形で記述します。
<head>
<meta charset="UTF-8">
<meta name="description" content="ページの説明文を入れます。">
</head>charsetのように1つの属性だけで意味が伝わるものもあれば、descriptionのようにname属性とcontent属性を組み合わせて使うものもあります。
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属性は「その具体的な内容」と考えると分かりやすいです。
property属性でSNS向けの情報を指定する
SNSでシェアされたときの表示を整えるOGPでは、property属性を使うことがあります。
<meta property="og:title" content="HTMLのmetaタグとは？">
<meta property="og:description" content="metaタグの役割や書き方を解説します。">OGPは、XやFacebookなどでページURLが共有されたときに、タイトルや説明文、画像を表示させるための設定です。通常のdescriptionとは目的が異なり、SNSでの見え方を整えるために使われます。
よく使われるmetaタグの種類
metaタグには多くの種類がありますが、最初からすべてを覚える必要はありません。まずは、実際のWeb制作やWordPressの記事作成でよく使われるmetaタグを理解しておきましょう。
charsetは文字化け対策に使う
charsetは、ブラウザにHTML文書の文字コードを伝えるための指定です。
<meta charset="UTF-8">この指定によって、ブラウザが日本語などの文字を正しく解釈しやすくなります。現在のWeb制作ではUTF-8を指定するケースが多いため、HTMLの基本テンプレートにもよく含まれています。
viewportはスマートフォン表示に使う
viewportは、スマートフォンやタブレットでページを見やすく表示するためのmetaタグです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">viewportを設定すると、端末の画面幅に合わせてページを表示しやすくなります。レスポンシブ対応のサイトを作る場合、よく使われる基本設定です。
viewportの指定がないと、スマートフォンで表示したときに文字やレイアウトが小さく見えることがあります。
descriptionは検索結果の説明文に使われることがある
descriptionは、ページの概要を指定するmetaタグです。
<meta name="description" content="HTMLのmetaタグとは何か、役割や書き方を初心者向けに解説します。">descriptionに書いた内容は、検索結果の説明文として表示されることがあります。検索結果で読者に記事内容を伝えるため、SEO記事では特に重要なmetaタグです。
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で共有されたときにページの内容が伝わりやすくなります。メディア記事やサービス紹介ページでは、SNSからの流入を意識して設定されることがあります。
metaタグとSEOの関係
metaタグは、SEOを考えるうえでも重要です。ただし、すべてのmetaタグが検索順位を直接上げるわけではありません。どのmetaタグが何に影響するのかを整理して理解することが大切です。
meta descriptionはクリック率に関わる
meta descriptionは、検索結果に表示される説明文として使われることがあります。検索順位を直接決めるタグというより、読者が検索結果を見たときに「この記事を読みたい」と判断するための文章です。
<meta name="description" content="HTMLのmetaタグとは何か、charsetやviewport、descriptionの書き方を初心者向けに解説します。">descriptionを書くときは、記事の内容を短くまとめ、検索キーワードを自然に含めることが大切です。キーワードを詰め込みすぎると不自然な文章になり、読者に内容が伝わりにくくなります。
titleタグとdescriptionはセットで考える
titleタグはmetaタグではありませんが、同じheadタグ内に書く重要な要素です。SEO記事では、titleタグとdescriptionをセットで考えると検索結果で内容が伝わりやすくなります。
<title>HTMLのmetaタグとは？役割や書き方を初心者向けに解説</title>
<meta name="description" content="HTMLのmetaタグの役割や種類、SEOで重要な設定を解説します。">titleタグで記事の主題を伝え、descriptionで読むメリットを補足すると、検索結果でクリックされやすい記事に近づきます。
meta keywordsは現在あまり使われない
以前は、meta keywordsにキーワードを入れる方法が使われていた時期もありました。
<meta name="keywords" content="HTML, metaタグ, SEO">しかし、現在のSEOではmeta keywordsを重視しない検索エンジンが多く、実務で積極的に設定する場面は少なくなっています。SEO対策としてキーワードを大量に詰め込むよりも、読者の疑問に答える本文や分かりやすい見出しを作ることが重要です。
noindexの設定ミスはSEOに大きく影響する
robotsのnoindexは、検索結果に表示させたくないページで使う指定です。
<meta name="robots" content="noindex">テストページや重複ページでは役立つことがありますが、公開して検索流入を狙う記事には基本的に入れません。SEO記事を公開する前には、noindexが入っていないか確認することが大切です。
実務で使われるmetaタグの活用例
実際のWeb制作現場では、metaタグはHTMLの基本設定としてだけでなく、SEO、SNS運用、LP制作、WordPress運用などさまざまな場面で使われます。ここでは、実務でよくある活用例を見ていきましょう。
企業サイトやブログ記事のSEO設定
企業サイトやブログ記事では、ページごとにtitleタグとmeta descriptionを設定することが多くあります。
<title>サービス紹介｜株式会社サンプル</title>
<meta name="description" content="株式会社サンプルのサービス内容や導入事例を紹介します。">ページ内容に合ったdescriptionを設定することで、検索結果で読者に内容を伝えやすくなります。特に記事ページでは、タイトルだけでは伝えきれない補足情報をdescriptionに入れるとよいでしょう。
LPでスマートフォン表示を整える
LP（ランディングページ）やサービス紹介ページでは、スマートフォンで見やすく表示されることが重要です。そのため、viewportの設定は欠かせません。
<meta name="viewport" content="width=device-width, initial-scale=1.0">スマートフォンからのアクセスが多いページでは、viewportとCSSのレスポンシブ対応を組み合わせて、読みやすいレイアウトを作ります。metaタグだけでデザインが完成するわけではありませんが、スマートフォン対応の土台として重要です。
SNSでシェアされる記事のOGP設定
メディア記事やキャンペーンページでは、SNSでシェアされたときの見え方も大切です。
<meta property="og:title" content="キャンペーンのお知らせ">
<meta property="og:description" content="期間限定キャンペーンの詳細を紹介します。">
<meta property="og:image" content="https://example.com/images/campaign.jpg">OGPが設定されていると、SNS上でタイトルや画像が表示され、ページの内容が伝わりやすくなります。画像URLが間違っていると、SNSで画像が表示されないことがあるため注意しましょう。
WordPressではテーマやプラグインで設定することが多い
WordPressでは、テーマやSEOプラグインがmetaタグを自動で出力する場合があります。Cocoonのようなテーマでは、記事ごとの説明文やOGP設定を管理画面から設定できることがあります。
WordPressの記事本文にmetaタグを直接書くのではなく、テーマ設定やSEO設定欄で管理するのが一般的です。どこから出力されているか分からないまま追加すると、同じmetaタグが重複する可能性があります。
metaタグを書く際の注意点
metaタグは便利な設定ですが、書き方を間違えるとページ表示やSEOに影響することがあります。特に初心者の方は、headタグに書く場所や、description・robotsの設定ミスに注意しましょう。
bodyタグの中に書かない
metaタグはheadタグの中に書くのが基本です。
<body>
<meta name="description" content="ページの説明文">
</body>上記のようにbodyタグの中へmetaタグを書くのは避けましょう。本文として表示したい内容はbodyタグ内に書き、ページ設定はheadタグ内にまとめます。
同じmetaタグを重複させない
同じ種類のmetaタグを複数書くと、ブラウザや検索エンジンにどちらの情報を優先してほしいのか分かりにくくなる場合があります。
<meta name="description" content="説明文A">
<meta name="description" content="説明文B">descriptionやviewportなど、同じ目的のmetaタグは重複させないようにしましょう。WordPressではテーマやプラグインによって自動出力されることがあるため、特に重複しやすいポイントです。
descriptionを長くしすぎない
descriptionはページの内容を説明する文章ですが、長ければよいわけではありません。
<meta name="description" content="HTMLのmetaタグとは何か、charsetやviewport、description、robots、OGPなどの役割や書き方、SEOで注意したいポイントを初心者向けにわかりやすく解説します。">descriptionは、記事内容を簡潔に伝える文章にすることが大切です。検索結果では表示される文字数に限りがあるため、重要な内容は前半に入れると伝わりやすくなります。
noindexを誤って入れない
noindexは、検索結果に表示させたくないページで使う指定です。
<meta name="robots" content="noindex">検索上位を狙いたい記事にnoindexが入っていると、検索結果に表示されにくくなります。記事を公開する前に、テーマ設定やSEOプラグイン側でnoindexになっていないか確認しましょう。
metaタグだけでSEOが完結するわけではない
metaタグはSEOで大切な要素の一つですが、metaタグだけで上位表示が決まるわけではありません。検索上位を目指すには、読者の疑問に答える本文、分かりやすい見出し、適切な内部リンク、読みやすいページ構成も重要です。
metaタグはSEOの土台の一部であり、記事内容やサイト全体の品質とあわせて考えることが大切です。
HTMLとSEOを効率良く学ぶ方法
metaタグを理解するためには、HTMLの基本構造を実際に書きながら、headタグ内の設定がどのような役割を持つのか確認することが大切です。特にmetaタグは画面に直接表示されないため、コードを書くだけでなく、ブラウザや検索結果でどのように使われるのかをイメージしながら学ぶと理解しやすくなります。
実際にコードを書きながら学習する
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の役割を一つずつ理解しやすくなります。スマートフォンで表示したり、ブラウザのタブ名を確認したりしながら学習してみましょう。
独学が不安ならプログラミングスクールもおすすめ
HTMLは初心者でも学びやすい言語ですが、「headタグとbodyタグの違いが分からない」「metaタグの種類が多くて覚えられない」「SEO設定が難しい」と悩むことも少なくありません。
独学でつまずいたまま学習が止まってしまう方も多いため、効率良く学びたい場合は質問できる環境を活用するのもおすすめです。
忍者CODEでは、HTMLやCSSの基礎からWebサイト制作まで体系的に学習できます。動画教材で学びながら実際にコードを書くアウトプット中心の学習ができるため、知識だけでなく実践的なスキルも身につけやすいのが特徴です。
HTMLやSEOをこれから本格的に学びたい方は、自分に合った学習環境を選びながらスキルアップを目指してみましょう。
まとめ
本記事では、HTMLのmetaタグについて解説しました。
metaタグは、HTML文書に関する補足情報をブラウザや検索エンジンへ伝えるためのタグです。文字コードを指定するcharset、スマートフォン表示を整えるviewport、検索結果の説明文として使われることがあるdescription、検索エンジンへの指示を行うrobots、SNSシェア時の見え方を整えるOGPなど、さまざまな種類があります。
metaタグはページ上に直接表示されませんが、文字化けを防いだり、スマートフォンで読みやすく表示したり、検索結果やSNS上でページ内容を伝えたりするうえで重要な役割を持っています。
metaタグを使う際は、headタグの中に書くこと、descriptionを分かりやすくまとめること、noindexの設定ミスやmetaタグの重複に注意することが大切です。また、WordPressではテーマやSEOプラグインがmetaタグを自動出力する場合があるため、記事本文に直接書くのではなく、設定画面側で管理するのが一般的です。
HTMLやSEOの学習では、実際にコードを書きながら試してみることが理解への近道です。今回紹介したサンプルコードを参考にしながら、metaタグの役割や書き方を一つずつ確認してみてください。
