累計訪問:本日訪問:
トップイメージ

みんなの味方~ビジネスサポートブログ~


HTML

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">




みんなの味方~ビジネスサポートブログ~

トップに戻る