HTMLを書いていると、<meta charset="UTF-8">や<meta name="viewport" ...>を見かけます。画面には文字として表示されないため、何のために書くのか分かりにくいですよね。
metaタグは、文字コード、スマートフォンでの表示方法、ページの説明、検索エンジンへの指示などをブラウザや外部サービスへ伝えるHTML要素です。基本的にhead要素の中へ書きます。
この記事では、初心者が最初に使うメタタグから、SEOに関係するdescriptionとrobots、SNS共有で使うOGPまで、コピペできるコードで解説します。
HTMLのmetaタグとはページの情報を伝える要素
meta要素は、そのページ全体に関するメタデータ（データについての情報）を表します。多くはnameやcharsetなどの属性と、設定内容を表す値を組み合わせて使います。
<meta name="設定の種類" content="設定内容">metaは中身や終了タグを持たない空要素です。HTMLでは</meta>を書かず、1つの開始タグだけで完結します。
HTMLタグ全体の役割や、headとbodyの違いから確認したい場合は、次の記事も参考にしてください。
metaタグはhead要素の中に書く
ページの設定を表すメタタグは、基本的にhead要素の中へ配置します。次のコードでは、charset、viewport、descriptionを設定しています。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="HTMLのmetaタグを初心者向けに解説するページです。">
<title>HTMLのmetaタグ入門</title>
</head>
<body>
<h1>HTMLのmetaタグ入門</h1>
</body>
</html>head内の情報は、通常は本文として画面に表示されません。一方、body内の見出しや文章、画像はブラウザのページ内に表示されます。
title要素もhead内へ書くメタデータですが、metaタグではありません。ブラウザのタブ名や検索結果のタイトル候補などに使われます。
初心者が覚えたい主要なメタ情報
最初に覚えたいのは、文字コードを表すcharset、画面幅を表すviewport、ページ説明のdescriptionです。必要に応じて検索エンジン向けのrobotsやSNS向けのOGPも追加します。
文字コードを指定するcharset
charsetは、HTMLファイルで使う文字コードをブラウザへ伝えます。HTML5ではUTF-8を指定し、headの先頭付近へ置きます。
<meta charset="UTF-8">エディターで保存した文字コードとHTMLの指定が一致していないと、日本語が文字化けする原因になります。新しく作るHTMLファイルは、エディター側もUTF-8で保存しましょう。
スマホの表示幅を指定するviewport
viewportは、ページを表示する領域の幅や初期倍率をブラウザへ伝えます。レスポンシブ対応するページでは、次の設定が基本です。
<meta name="viewport" content="width=device-width, initial-scale=1">width=device-widthは表示領域の幅を端末の幅に合わせ、initial-scale=1は最初の表示倍率を等倍にします。この設定がないと、スマートフォンでデスクトップ向けの広いページを縮小表示する場合があります。
user-scalable=noやmaximum-scale=1で拡大操作を禁止すると、文字を拡大したい利用者が読みにくくなります。特別な理由がなければ、ズームを制限しないでください。
ページの説明を書くmeta description
descriptionは、そのページに何が書かれているかを短く説明するメタタグです。検索エンジンが検索結果の説明文（スニペット）を作るときに、内容が使われる場合があります。
<meta name="description" content="HTMLのmetaタグとは何か、初心者向けに書き方と種類をコード付きで解説します。">検索エンジンは、検索語やページ本文に応じて別の文章を表示することがあります。設定した文が必ずそのまま表示されるわけではありません。
文字数だけに合わせるのではなく、ページの内容、対象読者、読んで分かることを自然な文章でまとめます。同じ説明文を全ページへ使い回さず、ページごとに書き分けましょう。
検索エンジンへ指示するrobots
robotsは、検索エンジンのクローラーへ、ページを検索結果に登録するかなどを伝えます。通常の公開ページはindex, followが既定なので、わざわざ書く必要はありません。
検索結果へ表示したくないページでは、次のようにnoindexを指定します。
<meta name="robots" content="noindex">noindexを公開記事へ誤って付けると、検索結果に表示されなくなる可能性があります。テンプレートをコピーしたときや公開前には、不要なnoindexが残っていないか確認してください。
また、noindexはパスワード保護ではありません。機密情報を隠す目的では使わず、認証やアクセス制限を設定します。
SNSの共有表示を整えるOGP
OGP（Open Graph Protocol）は、ページがSNSなどで共有されたときのタイトル、説明文、画像、URLを伝えるメタ情報です。nameではなくproperty属性を使います。
<meta property="og:type" content="article">
<meta property="og:title" content="HTMLのmetaタグ入門">
<meta property="og:description" content="metaタグの書き方と種類を初心者向けに解説します。">
<meta property="og:url" content="https://example.com/meta-tag/">
<meta property="og:image" content="https://example.com/images/meta-tag-ogp.jpg">og:urlとog:imageは、https://から始まる絶対URLで指定します。記事ページではog:type="article"、サイトのトップページではwebsiteが一般的です。
OGP画像は、共有先で文字や重要な部分が切れないよう、実際のプレビューでも確認しましょう。WordPressではテーマやSEOプラグインが自動生成することがあるため、同じタグを手書きで重複させないようにします。
X向けのTwitterカードを設定する
Xで大きな画像付きカードを表示したい場合は、twitter:cardを追加します。タイトルや画像はOGPの値が利用される場合もありますが、必要に応じて個別に指定できます。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTMLのmetaタグ入門">
<meta name="twitter:description" content="metaタグの書き方と種類を初心者向けに解説します。">
<meta name="twitter:image" content="https://example.com/images/meta-tag-ogp.jpg">canonicalはmetaタグではなくlink要素
似た内容のURLが複数あるとき、代表として扱ってほしいURLを伝えるcanonicalもhead内へ書きます。ただし、これはmetaタグではなくlink要素です。
<link rel="canonical" href="https://example.com/meta-tag/">hrefには、そのページの正規URLを絶対URLで指定します。WordPressでは自動出力されることが多いため、追加前にページのHTMLソースを確認してください。
現在は書かなくてよい古いメタタグ
meta keywords
<meta name="keywords" ...>は、以前キーワードを列挙するために使われていました。Google検索ではランキング目的に利用されないため、現在の一般的なページで追加する必要はありません。
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge">は、Internet Explorer向けに表示モードを指定していたコードです。現在新しく作るHTMLの基本雛形には不要です。
自動転送するhttp-equiv refresh
http-equiv="refresh"で一定時間後に別ページへ移動できますが、利用者が内容を読む前に画面が変わる可能性があります。URL変更では、可能ならサーバー側のHTTPリダイレクトを使います。
実用的なheadの完成例
これまでの内容をまとめると、記事ページのheadは次のように書けます。URL、タイトル、説明文、画像URLは自分のページに合わせて変更してください。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTMLのmetaタグ入門</title>
<meta name="description" content="HTMLのmetaタグとは何か、初心者向けに書き方と種類を解説します。">
<link rel="canonical" href="https://example.com/meta-tag/">
<meta property="og:type" content="article">
<meta property="og:title" content="HTMLのmetaタグ入門">
<meta property="og:description" content="metaタグの書き方と種類を初心者向けに解説します。">
<meta property="og:url" content="https://example.com/meta-tag/">
<meta property="og:image" content="https://example.com/images/meta-tag-ogp.jpg">
<meta name="twitter:card" content="summary_large_image">
</head>metaタグを確認する方法
ページのソースを表示する
ブラウザでページを開き、「ページのソースを表示」からhead内を確認します。CMSやJavaScriptが出力する場合もあるため、編集ファイルだけでなく最終的なHTMLを見ることが大切です。
開発者ツールで検索する
開発者ツールのElementsパネルを開き、meta name="description"やog:imageを検索します。同じnameやpropertyが複数出力されていないかも確認してください。
metaタグが反映されないときの確認項目
metaタグがhead内にあるかname・property・contentの綴りが正しいか- 属性値の引用符が閉じているか
- 同じ種類のタグが重複していないか
- CMSやキャッシュが古いHTMLを表示していないか
- OGPのURLと画像URLが外部からアクセスできる絶対URLか
検索結果やSNSのプレビューは、HTMLを変更してもすぐに更新されない場合があります。まず最終HTMLが正しいことを確認し、その後に各サービス側の再取得を待ちます。
HTMLメタタグに関するよくある質問
metaタグはすべてのページに必要ですか？
charsetとviewportは基本のHTMLへ入れます。descriptionやOGPはページごとに内容を変え、robotsは必要なページだけ設定します。
meta descriptionを書けば検索順位が上がりますか？
説明文を書くだけで順位が上がるとは限りません。ただし、ページ内容を正確に伝える説明文は、検索結果で利用者がページを選ぶ判断材料になる場合があります。
WordPressでもmetaタグを手書きしますか？
テーマやSEOプラグインが自動出力することが多いため、通常は管理画面の設定を使います。手書きする前にソースを確認し、description、canonical、OGPなどが重複しないようにしてください。
まとめ
HTMLのmetaタグは、ページ上には見えない情報をブラウザ、検索エンジン、SNSなどへ伝えます。まずはcharset、viewport、descriptionの役割と書き方を覚えましょう。
検索表示を制御するrobotsや共有表示を整えるOGPは、必要なページへ正しい内容で設定します。完成後はページのソースを開き、重複、綴り、URLまで確認できれば完了です。