「メタタグ」、コピペで済ませてませんか！？
私は、代々脈々と受け継がれてきたコピペで悲惨なことになっている Web ページは数知れずといった具合です……。
そんな「メタタグ」についてちゃんと向き合って調べてみました。
- meta 要素の特性
- 代表的な meta 要素の記述方法
はじめに。
「メタタグ」という言葉の方が世の中に浸透しているような気がするので、リードで「メタタグ」と書きました。本ブログでは混乱を避けるべく、なるべくタグのことを要素(element)と書いているので、以降は「メタタグ」のことを「meta 要素」で統一して書いています。
目次
meta 要素とは
「meta 要素」とは、Web ページの概要や特性を伝えるための情報を設定することができる要素です。特定の属性とのセットで記述し、その属性によって意味が異なります。通常は Web ページ上には表示されませんがSEO的に超重要な要素です。
Web デザイナー兼ちょこっとコーダーみたいな人は軽視しがちかもしれませんが、今日このタイミングで考えを改めましょう！なんなら現状（20xx年）ではデザインよりも大切なのかもしれないというこの現実を！！というのは半分冗談ですが、見えないところが整っているとなんだか気持ちがよいものです。
ちなみに、W3C の説明では、
The meta element represents various kinds of metadata that cannot be expressed using the title, base, link, style, and script elements.
W3C
という説明です。
title / base / link / style / script 要素以外の「メタデータ」、それらでは表現できない様々な「メタデータ」を担当しているのが meta 要素ということですね。
勘違いしてはいけないのは、
上記の５要素も、そして meta 要素も、いずれも“メタデータ”ということです。
メタデータとは
メタデータとは、データに関する情報を指します。例えば Web ページの説明や文字エンコーディングなど、ページそのものを説明する情報を指します。そして、meta 要素はそのようなメタデータの一部を HTML ドキュメント内で表現するための要素です。
「メタ」という言葉自体のニュアンスについては下の記事でまとめてみましたので、よかったらチェックしてみてください！
meta 要素の記述方法
meta 要素は基本的に、メタデータを定義するために、特定の属性と組み合わせて使います。代表的なものとして、name / http-equiv / charset / itemprop 属性があります。
上記の４つの属性は、1つの meta 要素に対して、name / http-equiv / charset / itemprop のうちいずれか１つだけを指定します。重複してはいけません。（同一の HTML ドキュメント内で複数の meta 要素を使用して、異なる属性を定義することは可能です。）
そして、
name / http-equiv / itemprop 属性を指定した場合は、content 属性も指定しなければなりません。
他にも、条件付きで使用できる media 属性や、SNS 連携に関連する property 属性（例： Open Graphプロトコル）などが存在します。
以下に、まずは先の４属性についてまとめてみました。
① name 属性（content 属性セット）
ページの説明やキーワードといったHTML ドキュメントそのものに影響するメタデータを表すことができます。
使用例はこんな感じ。
<meta name="description" content="このブログは、Web デザインのハウツー系ブログです。">name 属性の属性値（Metadata name）はについて、代表的な使用例を次の項でまとめていますのでご覧ください。
② http-equiv 属性（content 属性セット）
「プラグマディレクティブ」を表します。「プラグマディレクティブ」とは、ブラウザやサーバーに対して動作を指示するための情報のことです。
例を見た方がわかりやすいかもしれません。
<meta http-equiv="refresh" content="10">これは、『ページを10秒後に自動でリロードする』という指令（ディレクティブ）をブラウザに与えています。
何となくイメージできましたか？
③ charset 属性
HTML ドキュメントの文字コードを指定します。
属性値は ASCII に基づく形式で指定します。何か特別な意図が無い場合は、属性値は「utf-8」が良いです。
<meta charset="utf-8">HTML ドキュメントの上の方にあるやつですね！
このコードは、HTML ドキュメントの銭湯付近に配置するのが一般的なのです。そして charset 属性はドキュメントごとに複数存在してはいけないというルールがあります。必ず１つだけにしましょう！
ですので、
上記のコードをまるっと覚えてしまえばとりあえずOKですね！
なぜ「utf-8」なのか。
文字コードは「utf-8」以外にも、「Shift_JIS」や「ISO-8859-1」といったものがあります。昔に使われていた文字コードで、次第に「utf-8」へ置き換えられていきました。「utf-8」は、多くの言語に対応しており、後方互換性や、拡張性にも優れています。そのため世界的に使われて、多くのシェアを獲得し、標準化されているといっても過言ではない文字コードなのです。
ですので、
『とりあえず「utf-8」を入れる』という使い方でも問題なく機能します！
④ itemprop 属性（content 属性セット）
こちらはやや上級者向けなので、この属性の存在だけでも頭の片隅に入れておけば、初心者のうちは問題ありません。
itemprop 属性は、アイテムにプロパティを追加するために使用することができるグローバル属性です。
meta 要素に入れる場合では、主に、検索エンジンに情報を正確に伝えるための「構造化データ」で使われる属性です。「構造化データ」とは、例えば、レストランの営業時間や商品のレビュー評価などをGoogle 様に伝えるために使用されたりします。コード例としてはこんな感じ。
<meta itemprop="ratingValue" content="4.5">結果として、
Google 検索で「リッチリザルト」と呼ばれる目立つ表示を得られることがあります。
以上が、
meta 要素を使用する場合の代表例４つでした。
特に、
name 属性と charset 属性は初心者のうちから、当たり前に使っていくので、まずはこの２つをしっかりとマスターしておきましょう！
また、
セットとして必要になる content 属性については、一応説明を載せておきます。
content 属性
meta 要素で、name / http-equiv / itemprop 属性のいずれかを入れた場合、必ず content 属性を指定します。属性値には、メタデータの内容やプラグマディレクティブの値を指定します。
name 属性の
代表的な属性値
name 属性の属性値（Metadata name）の使用例を重要度と説明しやすさを考慮して、独断と偏見で選抜して紹介いたします！！
ただでさえ４種類の属性で特性が変わる meta 要素の、さらに name 属性の属性値によって特性が分岐するという、ややこしいところ！ここが正念場です！これをマスターすれば meta 要素の訳の分からぬコピペ地獄から抜け出せること間違いなし！！
description
該当ページの概要や説明を入れることができます。
<meta name="description" content="このブログは、Web デザインのハウツー系ブログです。">検索エンジンのスニペット（検索結果の説明文）として表示されるめっちゃ重要な属性値です！説明文の良し悪しで、検索流入に大きな差が生まれるのは言うまでもないでしょう！
keywords
該当ページの内容に関連するキーワードを指定します。
<meta name="keywords" content="meta とは, meta要素, ウェブデザイン">例では、キーワードを「 ,（コンマ）」で区切って複数入れていますが、現在は「keywords」は１つに絞り、文章ではなく単語で記述するのが主流です。複数の単語で意味を成す言葉を入力する場合は半角スペースを空けて単語を並べるのが良いかもしれません（2024年12月現在）。
そして、
現在では「keywords」の SEO としての影響力は非常に薄いとも言われています。最適なキーワードを１つ、“御守り”として入れておく程度として考えるのがよいかもしれませんね。
author
該当ページの作成者を入れることができます。
<meta name="author" content="MATSUDAI">ページが誰によって作成されたかを明示します。特にブログや会社などの組織、著名人の Web ページなどで活躍する属性値です。ブログサービスを利用して記事などを書いた場合は、自動で挿入される場合が多いです。
robots
検索エンジンのクローラーに対する指示を入れることができます。
<meta name="robots" content="noindex, nofollow">ページをインデックスするかどうかを制御を指定します。SEO 対策において意外と重要です！！
例えば、コンテンツ量の少ないページなど、インデックスされることによってクローラーに低品質なサイトという評価を受けて検索結果の順位が下がってしまったりという悪影響を及ぼす可能性があります。それとアドセンスの審査にも影響あるかもしれません。
google-site-verification
「Google Serch Console」用のサイト所有権確認をするために入れます。
<meta name="google-site-verification" content="（サチコさんから提供されたコード）">ワードプレスなどのブログサービスを使用していると、プラグインやテーマの機能で簡単に登録できてしまう場合も多いですが、このようなサービスでも name 属性によって設定するということを把握しておきましょう！！一度、ご自分のブログやページのソースを見て確認してみてください！
そのほかの属性値を知りたい方は、MDN のページの参考リンクを貼っておきますので、ぜひチェックしてみてください！
まとめ
meta 要素は、Web ページの概要や特性を伝えるための情報、「メタデータ」を設定することができるSEO的に超重要な要素です。title / base / link / style / script 要素では表現できない部分を担当します。
記述方法は、
基本的に、メタデータを定義するために、name / http-equiv / charset / itemprop 属性などと組み合わせて使います。そして、name / http-equiv / itemprop 属性を指定した場合は、content 属性も指定しなければなりません。
特によく使うものは、name 属性と charset 属性 です。
charset 属性は、HTML ドキュメントに１つだけ。
<meta charset="utf-8">これをそのまま覚えてしまいましょう。
name 属性は、属性値によって様々な効果が得られる属性です。１つ代表例を上げるとすれば、こちら。
<meta name="description" content="このブログは、Web デザインのハウツー系ブログです。">他にも、「keywords」や「robots」といった SEO 対策に影響を与える属性が複数あるので、しっかり確認しておきましょう。
いかがだったでしょうか。
こうしてまとめてみると意外と苦手意識がなくなりスッキリしませんか？Web ページで実際に目ない部分でおざなりになりがちですが、SEO 的に重要な部分なのできちんと把握して入れられるようになりたいものですね！
参考・出典
・MDN. 「<meta>: メタデータ要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta, 2024年12月3日閲覧。
・MDN. 「標準メタデータ名」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta/name, 2024年12月3日閲覧。
・weblio辞書. 「メタ」. https://www.weblio.jp/content/メタ, 2024年12月2日閲覧。
・Google 検索セントラル. 「Google 検索での構造化データのマークアップの仕組み概要」. https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja, 2024年12月5日閲覧。
