<meta>要素の使い方・サンプルコード
Sara
目次
<meta>
<meta>要素は、HTML 文書に関する情報であるメタデータを記述するために使用します。
<head>要素内に記述します。
属性
charset
HTML 文書の文字コードを指定します。UTF-8 を指定するのが一般的です。
<meta charset="UTF-8">content
http-equiv 属性や name 属性に関連する値を指定します。
http-equiv
リダイレクトやデフォルトのスタイルシートなどを content 属性と合わせて指定します。
| 値 | |
|---|---|
| content-security-policy | ページのコンテンツポリシーを定義します。 |
| refresh | ページをリロードするまでの秒数や、リダイレクト先のURLを指定します。 |
* content-language, content-type, set-cookie は非推奨・廃止になっています。
以下のサンプルでは、3秒後に http://example.com にリダイレクトしています。
<meta http-equiv="refresh" content="3; url=http://example.com">name
name 属性でメタデータ名を定義して、content 属性で内容を指定します。
* charset 属性, http-equiv 属性, itemprop 属性（グローバル属性）のいずれかを設定している場合は使用できません。
<meta name="メタデータ名" content="内容を指定">| name | content | |
|---|---|---|
| application-name | アプリケーションの名前 | |
| author | HTML 文書の作者名 | |
| description | HTML 文書についての説明文や概要 | |
| generator | ソフトウェアの識別名 | |
| keywords | HTML 文書の内容に関するキーワード | |
| theme-color | 推奨される色 | |
| color-scheme | 色の系統 | normal, light, dark, only light |
| creator | HTML 文書の制作者 | |
| googlebot | Google の検索クローラーに関する指定 | |
| publisher | HTML 文書の発行者 | |
| robots | 検索エンジンのクローラーに関する指定 | index, noindex, follow, nofollow, none, noodp, noarchive, nosnippet, noimageindex, nocache *1 |
| slurp | Yahoo の検索クローラーに関する指定 | |
| viewport | モバイル端末のサイズに関する指定 | width, height, initial-scale, maximum-scale, minimum-scale, user-scalable *2 |
*1 name=”robots” にした場合の content 属性値
<meta name="robots" content="content属性値">複数の値を指定する場合は ,（カンマ）で区切ります。
| content属性値 | 対応検索エンジン | |||
|---|---|---|---|---|
| Yahoo | Bing | |||
| index | インデックスを許可（規定値） | |||
| noindex | インデックスを許可しない | |||
| follow | リンクの追跡を許可（規定値） | |||
| nofollow | リンクの追跡を許可しない | |||
| none | noindex, nofollow と同じ | |||
| noarchive | コンテンツのキャッシュを許可しない | |||
| nosnippet | 検索結果に説明を表示させない | |||
| noimageindex | 画像の参照元としてページを表示しない | |||
| nocache | noarchive と同じ | |||
| noodp | Open Directory Project の説明文を使用しない | |||
*2 name=”viewport” にした場合の content 属性値
<meta name="viewport" content="content内容=値">複数指定する場合は ,（カンマ）で区切ります。
| content内容 | 値 |
|---|---|
| width | ビューポートの幅のピクセル値、または、device-width を指定します。 例）content=”width=device-width” |
| height | ビューポートの高さのピクセル値、または、device-height を指定します。 |
| initial-scale | デバイスの幅とビューポートとの比率を 0.0 から 10.0 までの数値で指定します。 |
| maximum-scale | ズームの最大値を 0.0 から 10.0 までの数値で指定します。 |
| minimum-scale | ズームの最小値を 0.0 から 10.0 までの数値で指定します。 |
| user-scalable | ユーザーがページをズームできるようにするかをyes か no で指定します。既定値は yes です。 |
グローバル属性
全ての HTML 要素に共通して使用できるグローバル属性はこちら
使用例
例① 検索エンジンにインデックスさせないようにする
<meta name="robots" content="noindex, nofollow">例② HTML 文書の説明文を指定する
Google 検索などの検索結果に表示される説明文を指定します。
<meta name="description" content="ここに説明文を書きます">例③ HTML 文書のキーワードを指定する
HTML文書の内容をキーワードで指定します。複数のキーワードを指定するときは ,（半角カンマ）で区切ります。
<meta name="keywords" content="HTML,CSS,PHP">例④ スマートフォンに対応させる指定
<meta name="viewport" content="width=device-width,initial-scale=1">例⑤ ページをリダイレクトさせる
3秒後に http://example.com にリダイレクトさせる例です。
<meta http-equiv="refresh" content="3; url=http://example.com">上記のコードをまとめる
<!DOCTYPE >
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<meta name="description" content="ここに説明文を書きます">
<meta name="keywords" content="HTML,CSS,PHP">
<meta http-equiv="refresh" content="3" url="http://example.com">
<title>タイトル</title>
</head>
<body>
</body>
</html>対応ブラウザ
関連するタグ
- <head>：HTML文書のヘッダ情報
Subscribe
0 Comments
ABOUT ME
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語：Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました！
>> お問い合わせはこちら
