Html-meta-tags
HTML-メタタグ
HTMLでは、メタデータを指定できます-さまざまな方法でドキュメントに関する追加の重要な情報。 META要素を使用して、作成者、有効期限、キーワードのリスト、ドキュメント作成者など、HTMLドキュメントのプロパティを記述する名前/値のペアを含めることができます。
*<meta>* タグは、このような追加情報を提供するために使用されます。 このタグは空の要素であるため、終了タグはありませんが、属性内に情報を保持します。
ドキュメントに保持する情報に基づいてドキュメントに1つ以上のメタタグを含めることができますが、一般に、メタタグはドキュメントの物理的な外観に影響を与えないため、外観の観点からは、含めるかどうかは関係ありませんそれらかどうか。
ドキュメントにメタタグを追加する
*<head>* および *</head>* タグで表されるドキュメントのヘッダー内に<meta>タグを配置することにより、Webページにメタデータを追加できます。 メタタグは、コア属性に加えて次の属性を持つことができます-
Sr.No | Attribute & Description |
---|---|
1 |
Name プロパティの名前。 何でも構いません。 例には、キーワード、説明、著者、改訂版、ジェネレーターなどが含まれます。 |
2 |
content プロパティの値を指定します。 |
3 |
scheme プロパティの値を解釈するスキームを指定します(コンテンツ属性で宣言されているとおり)。 |
4 |
http-equiv HTTP応答メッセージヘッダーに使用されます。 たとえば、http-equivを使用してページを更新したり、Cookieを設定したりできます。 値には、content-type、expires、refresh、set-cookieが含まれます。 |
キーワードを指定する
<meta>タグを使用して、ドキュメントに関連する重要なキーワードを指定できます。後でこれらのキーワードは、検索目的でWebページのインデックスを作成する際に検索エンジンによって使用されます。
例
以下は、ドキュメントに関する重要なキーワードとしてHTML、メタタグ、メタデータを追加する例です。
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
これは、次の結果を生成します-
ドキュメントの説明
<meta>タグを使用して、ドキュメントに関する簡単な説明を提供できます。 これも、検索目的でWebページのインデックスを作成する際に、さまざまな検索エンジンで使用できます。
例
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
ドキュメント改訂日
<meta>タグを使用して、ドキュメントが最後に更新された日時に関する情報を提供できます。 この情報は、Webページの更新中にさまざまなWebブラウザーで使用できます。
例
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "revised" content = "finddevguides, 3/7/2014"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
ドキュメントの更新
<meta>タグを使用して、Webページが自動的に更新され続ける期間を指定できます。
例
5秒ごとにページを更新し続けるには、次の構文を使用します。
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "revised" content = "finddevguides, 3/7/2014"/>
<meta http-equiv = "refresh" content = "5"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
ページのリダイレクト
<meta>タグを使用して、ページを他のWebページにリダイレクトできます。 特定の秒数後にページをリダイレクトする場合は、期間を指定することもできます。
例
以下は、5秒後に現在のページを別のページにリダイレクトする例です。 ページをすぐにリダイレクトする場合は、_content_属性を指定しないでください。
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "revised" content = "finddevguides, 3/7/2014"/>
<meta http-equiv = "refresh" content = "5; url = http://www.finddevguides.com"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
クッキーを設定する
Cookieは、コンピューター上の小さなテキストファイルに保存されるデータであり、WebブラウザーとWebサーバーの間で交換され、Webアプリケーションのニーズに基づいてさまざまな情報を追跡します。
<meta>タグを使用してCookieをクライアント側に保存し、後でWebサーバーがこの情報を使用してサイト訪問者を追跡できます。
例
以下は、5秒後に現在のページを別のページにリダイレクトする例です。 ページをすぐにリダイレクトする場合は、_content_属性を指定しないでください。
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
有効期限を含めない場合、CookieはセッションCookieと見なされ、ユーザーがブラウザーを終了すると削除されます。
注意-Cookieの詳細については、http://www.finddevguides.com/php/php_cookies [PHP and Cookies]チュートリアルを確認してください。
著者名の設定
メタタグを使用して、Webページに作成者名を設定できます。 以下の例を参照してください-
例
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "author" content = "Mahnaz Mohtashim"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
文字セットを指定する
<meta>タグを使用して、Webページ内で使用される文字セットを指定できます。
例
デフォルトでは、WebサーバーとWebブラウザはISO-8859-1(Latin1)エンコーディングを使用してWebページを処理します。 以下は、UTF-8エンコーディングを設定する例です-
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "author" content = "Mahnaz Mohtashim"/>
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
繁体字中国語の文字で静的ページを提供するには、WebページにBig5エンコーディングを設定する<meta>タグが含まれている必要があります-
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata"/>
<meta name = "description" content = "Learning about Meta Tags."/>
<meta name = "author" content = "Mahnaz Mohtashim"/>
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5"/>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>