metaタグ
htmlのmetaタグを解説します。
◎metaタグ
<meta> 属性="属性値"</meta>
metaタグとは、HTML文章における、キーワードや概要などの様々なメタデータを表す。
HTML文章内のheadタグ内に記載します。
◎記載例
使用できる属性と記載例を下記にて、紹介します。
charset属性
文字エンコーティングを指定します。日本語の代表的な文字エンコーティングには、「UTF-8」「SHIFT_JIS」などがあります。
charset属性は、一つの文章に一つしか使用できません。
<meta charset="UTF-8">
http-equiv属性
指定する事で、meta要素はプラグマ指示子となります。プラグマ指示子とは、「実行命令を指示するもの」のことです。
少し難しいですが、ブラウザに対し、文章の状態・挙動を指示します。以下、具体的な使用例です。
・content-language
コンテンツ言語を指定します。日本語や英語など主言語が何にあたるかを指定します。
<meta http-equiv="content-language" content="ja">
・content-type
ファイルタイプや文字エンコーティングを指定します。charset属性の代わりとしても使用可能です。
HTML文章なら、「text/html」となります。
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
・default-style
デフォルトスタイルを指定します。複数のファイルを読み込む際などに、一番優先して読み込むファイルを指定します。
<meta http-equiv="default-style" content="first.css">
・refresh
リダイレクト・再読み込みを指定します。contentに何秒後にリダイレクト・再読み込みするかを指定します。
urlを指定していると、そのページにジャンプし、指定していなければ、再読み込みとなります。
<meta http-equiv="refresh" content="10; url=jump.html">
・application-name
ウェブアプリケーション名を指定します。そのページがウェブアプリケーションでなければ使用してはいけません。
<meta http-equiv="application-name" content="minnanoアプリ">
name属性
name属性にメタデータ名を定義します。以下、具体的な使用例です。
・keywords
そのページがどのような内容を示しているかキーワードを指定します。半角カンマで区切ることで、複数ワードを指定可能です。
<meta name="keywords" content="HTML,タグ,meta属性">
・description
そのページの説明を短文で指定します。指定した文は、検索結果に表示されます。
<meta name="description" content="HTMLのmeta属性をわかりやすく解説します。">
・viewport
表示サイズを指定します。主にパソコン向けサイトをスマートフォンなどで表示させる目的で使用します。
「width」で横幅を、「initial-scale」で初期の表示倍率を、「maximum-scale」で最大の表示倍率を指定します。
「width=device-width」は、デバイスの横幅と同じになるよう指定しています。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
・robots
検索エンジンのクローラに対して、「インデックスしないように」「文章内のリンクをたどらないように」を知らせるかどうか指定できます。
インデックスしてほしい、リンクをたどってほしい場合は、何も記載しません。
すべての検索エンジンに対して有効ではないので注意して下さい。
<meta name="robots" content="noindex,nofollow">
・author
そのページの作者を示す際に指定します。
<meta name="author" content="b-ysupport">