[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

メタタグ (metaタグ)

pointこの用語のポイント

pointホームページに関する説明書きだよ

point本当は、ホームページに関する説明書き「を書くときに使う目印」だよ

pointHTMLファイルのヘッダ部に記述するよ

スポンサーリンク

簡単に書くよ

メタタグ (metaタグ)とは

ホームページのファイルに書く「人の目には見えない、そのページに関する説明書き」のこと。
もう少しカッコ付けて書くと

HTMLファイルのヘッダ部に記述する、そのページに関する補足情報のこと
です。
厳密に言えば

ホームページのファイルに説明書きを書くときに使う「目印」のこと
ですけどね。

image piyo

詳しく書くよ

順番に見ていきましょう。
まずは「HTMLファイル」のあれやこれやについて簡単に説明します。
「そんなの説明されなくても知ってるよ!」な人は、適当に読み飛ばしてください。

HTMLファイルは、ざっくり説明すると「ホームページファイル」です。

あなたがホームページを見ようとすると、まず、ホームページを見るときに使うソフトWebブラウザ)からホームページのファイルが置いてあるコンピュータ(Webサーバ)に対して「このページをおくれ」なお願いが出されます。

metaタグ

そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」とお返事がきます。

metaタグ2

お返事を受け取ったWebブラウザさんは、受け取った内容(ホームページのファイル)を画面上に表示してくれます。

metaタグ3

この流れにおいて受け渡しされるファイルがHTMLファイルです。

metaタグ4

HTMLファイルの中身は

1.ヘッダ部
2.ボディ部


の2つで構成されています。

metaタグ5

ヘッダ部に書かれているのは、そのHTMLファイルの説明書きです。
例えば「どんな種類の文字で書かれていますよ~」や「このファイルのタイトルは○○ですよ~」といった内容が書かれています。

metaタグ6

ボディ部に書かれているのは、そのHTMLファイルの中身です。
ここに書かれている内容がHTMLファイルの本体と言えるでしょう。
みなさんがホームページを見たときに表示される内容が書かれています。

metaタグ7

以上を踏まえて、HTMLファイルのヘッダ部に

<meta name="hoge" content="ほげほげ">

のような形式で書く「そのページの説明書き」が「metaタグ」です。

metaタグ8

あるいは、その説明書きを書くときに使う目印「<meta ~ >」が「metaタグ」です。

metaタグ9

metaタグに書かれている内容は、人間様には見えません。
Webブラウザさんや、ホームページの情報を収集して回っているプログラム検索エンジン)に向けて書かれる情報です。

metaタグ10

metaタグには、いろいろな種類があります。
また、日々増えています。
「どんな種類があるの?」と思うかもしれませんが、ここですべては挙げられません。

とはいえ「勝手に調べろや!」で終わるのも感じが悪いので、ざっと載せておきますね。
例えば、以下のようなmetaタグがあります。

metaタグ説明
author「このページは誰々さんが作りました」な情報を書く
build「このページの作成日は、いつです」な情報を書く
cache-control「このページをキャッシュして良いですか?」を書く
classification「このページは、どんなカテゴリ(ジャンル)に属するページです」な情報を書く
content-language「このページは何語で書かれています」な情報を書く
content-type「このページは、どんな種類のファイルです」な情報を書く
copyright「このページの著作権は、うんちゃらかんちゃらです」な情報を書く
coverage「このページは、どこの国の人向けのページです」な情報を書く
creation_date「このページの作成日は、いつです」な情報を書く
date「このページの最終更新日は、いつです」な情報を書く
description「このページは、どんなことが書いてあるページです」な情報を書く
expires「このページの有効期限は、いつです」な情報を書く
format-detection「マホで見たときにさ~。電話番号とかメールアドレスを勝手にリンクにするな!」な指示を書く
generator「このページは、どんなソフトで作りました」な情報を書く
keywords「このページで重要な語句は、これです」な情報を書く
page-topic「このページの大事なところは、ここです」な情報を書く
pragma「このページをキャッシュして良いですか?」な情報を書く
rating「このページは、どんな年齢層を対象としたページです」な情報を書く
refresh「ページを何秒後にもう一回表示し直せ」な指示を書く
reply-to「このページに関してご意見のある方は、このメールアドレスまでご連絡ください」な情報を書く
revisit_after「検索エンジンさん、申し訳ないんだけど○日後に出直してきてください」な指示を書く
robots「検索エンジンさん、このページは、こーゆー風に扱ってください」な指示を書く
Targeted Geographic Area「このページは、どこの国に住んでいる人向けのページです」な情報を書く
viewportスマホでは、こんな感じで表示してよ」な情報を書く


いっぱい、ありますね。
例えば「content-type」であれば

<meta name="content-type" content="text/html">

のように書きます。

ちなみに

・content-type
・description
・keywords


あたりのmetaタグは超有名どころです。
特に「description」と「keywords」はSEO関連の情報を読むと必ず出てきます。
できれば、覚えてあげてください。

metaタグは、そこまで「書かないとヤバいよ!」な情報ではありません。
身も蓋もない話ですが、1つも書かなくてもページ自体は表示されます。

ですから、面倒くさければ書かないのも選択肢のひとつです。

ただし、metaタグは「そのページの説明書き」です。
書かないよりは書いてあげた方が親切です。
誤解を招く危険性も減ります。

何かの資料を配布するときに、無言で手渡すよりも「これはピヨピヨカンパニーの財務諸表です」と説明しながら渡した方が誤解が少ないですよね。
それと一緒です。

例えば「content-type」は「どんな種類のファイルです」な説明書きです。
「content-type」が指定されていないと「このページは、どんな種類のファイルかな?」をWebブラウザさんが自力で判断します。

metaタグ11

その結果、もしかしたら間違った判断をしてしまうかもしれません。
本当はミカンなファイルなのに「これはケーキだ!」と勘違いする可能性があります。

metaタグ12

そうすると、Webブラウザさんは、そのファイルをケーキとして扱います。
実際にはミカンなのに、です。

……なんか、えらいことになりそうですよね。

そのような誤解を避けるためには、ファイルを作った人自身が「これは、これだからな!」と指定しておくのが一番確実です。

metaタグ13

この「これは、これだからな!」の指定(をするときに使う目印)がmetaタグです。

image piyo2

一言でまとめるよ

まぁ「metaタグ」って単語が出てきたら「人の目には見えない、ホームページに関する説明書き(を書くときに使う目印)なんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク