HTML <meta> name属性
定義と用法
name 属性はメタデータの名前を規定します。
name 属性は content属性 の値の名前を指定します。
を使用して name と content 属性は、ドキュメントにメタデータを定義するために名前/値対を使用して定義できます。その中で、name 属性はメタデータのタイプを示し、 content 属性は値を提供するために使用されます。
以下のテーブルには、いくつかの既定のメタデータタイプが示されています。
注意：http-equiv属性が設定されている場合 http-equiv属性、設定すべきではありません name 属性
ヒント：HTML5では、<meta>タグを使用して、ビューポート（ウェブページのユーザーが見える領域）を制御する方法が導入されました（以下の「ビューポートの設定」の例を参照してください）。
例
name属性を使用して、HTMLドキュメントに関する説明やキーワード、著者を定義します。また、ビューポートを定義して、ページのサイズや、異なるデバイスに対する縮尺比を制御します：
<head> <meta name="description" content="無料の Web 教程"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
文法
<meta name="value">
属性値
| 値 | 説明 |
|---|---|
| application-name | ページを代表する Web アプリケーションの名前を規定します。 |
| author |
ドキュメントの著者の名前を規定します。例えば： <meta name="author" content="YK Investment"> |
| description |
ページの説明を規定します。検索エンジンは、この説明を検索結果に表示する選択できます。例えば： <meta name="description" content="無料の Web 教程"> |
| generator |
ドキュメント生成に使用されるソフトウェアパッケージの1つ（手書きページには使用しない）。例えば： <meta name="generator" content="FrontPage 4.0"> |
| keywords |
ページに関連するキーワードリストを、カンマで区切って指定します。検索エンジンにページの内容を伝えます。 ヒント：常にキーワード（検索エンジンがページをカテゴリ化するために必要）を指定してください。例えば： <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | ビューポート（ウェブページのユーザーが見えるエリア）を制御します。 |
説明
上記の6つのプレ定義のメタデータタイプに加えて、メタデータの拡張を使用することもできます。以下のページを訪れることで、常に更新されている拡張リストを取得できます：
http://wiki.whatwg.org/wiki/MetaExtensions
一部の拡張はよく使用されていますが、他の一部は非常に限られた用途しか持ちません。robots メタデータは後者に該当します。HTML ドキュメントの作者は、それを使って検索エンジンがドキュメントをどのように扱うべきかを指示できます。例えば：
<meta name="robots" content="noindex">
このメタデータタイプには、ほとんどのブラウザが認識する3つの値があります：
- noindex - このページを索引にしないように指示
- noarchive - このページをアーカイブまたはキャッシュしないように指示
- nofollow - このページのリンクを順に検索しないように指示
利用可能なメタデータの拡張は限られていますので、開発者がオンラインのリストを読んで、自分のプロジェクトに利用できるものを見つけるのが良いでしょう。
ヒント
検索エンジンにコンテンツのカテゴリやランク付け方法を教えるために、過去には最も重要な手段は keywords メタデータの使用でした。しかし、現在の検索エンジンは keywords メタデータの重要性は以前ほど高くありません。これは、ページの内容と関連性の虚像を作成するために悪用される可能性があるためです。クリエイターがコンテンツが検索エンジンの目にどう見えるかを改善したい場合は、それらが提供するアドバイスを使用するのが最善の方法です。多くの検索エンジンは、ウェブページやサイト全体の最適化に関するガイドを提供しています。
Google：検索エンジン最適化（SEO）初心者向けガイド
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
百度：百度検索エンジン最適化ガイド
ビューポートの設定
ビューポートはウェブページのユーザーが見えるエリアです。デバイスによって異なります - スマートフォンではコンピューターのスクリーンよりも小さいことがあります。
すべてのウェブページに以下の <meta> 要素を含めるべきです：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これはブラウザにページのサイズとズーム比をどのように制御するかについての情報を提供します。
width=device-width 部分設定は、ページの幅をデバイスのスクリーン幅に従って設定します（デバイスによって異なります）。
initial-scale=1.0 部分設定は、ブラウザがページを最初に読み込んだときの初期ズームレベルを設定します。
これはビューポートメタタグを使用していないウェブページの例であり、ビューポートメタタグを使用した同一のウェブページです：
ヒント：このページをスマートフォンやタブレットで閲覧している場合、以下の2つのリンクをクリックして違いを確認できます。
私たちのレスポンシブウェブデザイン - ビューポートチュートリアルビューポートについてさらに学びましょう。
ブラウザのサポート
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| サポート | サポート | サポート | サポート | サポート |
