HTML5要素を1つずつ > メタデータ・コンテンツ > meta要素
愛読書、現場のワークフローで覚える Webサイト制作教室 – MdN Design Interactive で、Webの勉強をガリガリとしている最中です4日目。
メタデータ・コンテンツとは
引用 : Webサイト制作教室 P90より
おもに<head>内に書き、実際にはページ上に表示されない要素です。
とのこと。要素の種類としては以下。
とりあえずコピペなんかで何となしに使用してましたが、やはり記述するということはその行為に意味があるから。と 気づきました。
meta 要素とは
meta要素とは、head要素の中に書き込む要素です。キーワードや文字コード、著者名やサイトの要約など、直接表示されない サイトのステータスのような部分を入れます。
文字コード ”charset”
[html]
<meta charset="UTF-8">
[/html]
基本はUTF-8で記述します。国際統一規格ということで、特別な理由がなければ倣っておいた方が無難です。ただ、私も以前にローカル環境で使用するサイトで、使用する環境(古いWindows)上UTF-8だとどうしても文字化けしてしまい、Shift-JISで改善したことがありました。ので、臨機応変でOKかと。
言語の指定やリダイレクトさせる ”http-equiv”
[html]
<meta http-equiv="content-language" content="ja">
<meta http-equiv="Refresh" content="1000; URL=リダイレクト.html">
[/html]
日本で使用するサイトであれば、言語の指定は基本は “ja” のみで問題ないかと思います。もしグローバル化を目指してるのなら、 “en,ja”と指定しておくこともできます。
また、一定時間で別ページにリダイレクトさせる場合はcontentに時間(ミリ秒)と リダイレクト先のページを指定します。
meta要素の真骨頂、”name”
[html]
<meta name="author" content="dutchisover">
<meta name="copyright" content="copyright Dutch">
<meta name="description" content="ダッチのブログです。Webについてあれこれ書いてます。">
<meta name="keyword" content="WordPress, jQuery, html, css" >
[/html]
制作者の情報やコピーライトを明記できます。個人運営のサイトだけではなく、請負したサイトなどで制作者と著作権の保有者が別の場合などでも別々に記載することができます。
“description”では サイトの要約を入力できます。検索エンジンで表示される箇所なので できるだけ簡潔で伝えたい内容が伝わるように工夫してみます。
“keyword”には、そのままサイトのキーワードを入れます。SEO対策に有効とも ほぼ無意味とも言われているようですが、書いてて損はないはず。なので私は毎記事ごとに記述しています。WordPressなら allinoneseopack で毎記事カンタンに入力できます。
ただ、関係性の薄いキーワードは逆効果になる可能性があるので、しっかりと内容にリンクしたキーワードを選定するようにしています。
