HTML <meta> name 屬性
定義和用法
name 屬性規定元數據的名稱。
name 屬性規定的是 content 屬性 的值的名稱。
通過使用 name 和 content 屬性，能夠使用名/值對為文檔定義元數據。其中，name 屬性表示元數據的類型，而 content 屬性用來提供值。
下面的表格列出了幾種預定義的元數據類型。
注意：如果設置了 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 |
規定用于生成文檔的軟件包之一（不用于手寫頁面）。例如： <meta name="generator" content="FrontPage 4.0"> |
| keywords |
規定與頁面相關的關鍵字列表，以逗號分隔。告知搜索引擎關于頁面的內容。 提示：請始終規定關鍵字（搜索引擎需要對頁面進行分類）。例如： <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | 控制視口（網頁的用戶可見區域）。 |
說明
除了表中的六種預定義的元數據類型，還可以使用元數據擴展。訪問此頁面可獲取一份時常更新的擴展清單：
http://wiki.whatwg.org/wiki/MetaExtensions
有些擴展用得較多，而另外一些則只有很窄的用途，幾乎無人使用。robots 元數據顯然屬于前者。HTML 文檔作者可以用它告訴搜索引擎該如何對待該文檔。例如：
<meta name="robots" content="noindex">
這個元數據類型有三個大多數瀏覽器都認識的值：
- noindex - 表示不要索引本頁
- noarchive - 表示不要將本頁存檔或緩存
- nofollow - 表示不要順著本頁的鏈接繼續搜索下去
可用的元數據擴展為數不多，開發者最好讀讀那份在線的清單，看看有哪些可用于自己的項目。
提示
要告訴搜索引擎如何對內容分類和分等級，過去最主要的手段就是使用 keywords 元數據。現在的搜索引擎對 keywords 元數據的重視程度已大不如前，這是因為它可以被濫用來制作頁面內容與相關性的假象。創作者如何希望內容在搜索引擎眼里有所改觀，最好的方法是使用它們自己提供的建議。大多數搜索引擎都提供了優化網頁或整個網站的指南。
谷歌：搜索引擎優化 (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 部分設置瀏覽器首次加載頁面時的初始縮放級別。
這是一個沒有視口元標記的網頁示例，以及帶有視口元標記的同一網頁：
提示：如果您使用手機或平板電腦瀏覽此頁面，您可以點擊下面的兩個鏈接來查看不同之處。
您可以在我們的響應式網頁設計 - 視口教程中學到更多關于視口的內容。
瀏覽器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
