HTML <meta> name 属性
定义和用法
name 属性规定元数据的名称。
name 属性规定的是 content 属性 的值的名称。
通过使用 name 和 content 属性，能够使用名/值对为文档定义元数据。其中，name 属性表示元数据的类型，而 content 属性用来提供值。
以下表格列出了几种预定义的元数据类型。
注意：如果设置了 http-equiv 属性，则不应设置 name 属性。
Tip: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 |
定义与页面相关的关键字列表，以逗号分隔。向搜索引擎提供关于页面内容的信息。 Tip:Definieren Sie immer die Schlüsselwörter (Suchmaschinen müssen die Seite kategorisieren). Zum Beispiel: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Steuerung des Viewports (sichtbarer Bereich der Webseite). |
Erklärung
Neben den in der Tabelle angegebenen sechs vordefinierten Meta-Daten-Typen können auch Meta-Daten-Erweiterungen verwendet werden. Besuchen Sie diese Seite, um eine ständig aktualisierte Liste der Erweiterungen zu erhalten:
http://wiki.whatwg.org/wiki/MetaExtensions
Einige Erweiterungen werden häufig verwendet, während andere nur sehr engen Verwendungszwecken dienen und fast nie verwendet werden. Die Meta-Daten 'robots' gehören zu den erstgenannten. Autoren von HTML-Dokumenten können damit Suchmaschinen sagen, wie sie das Dokument behandeln sollen. Zum Beispiel:
<meta name="robots" content="noindex">
Dieser Meta-Daten-Typ hat drei Werte, die von den meisten Browsern erkannt werden:
- noindex - bedeutet, dass diese Seite nicht indexiert werden sollte
- noarchive - bedeutet, dass diese Seite nicht archiviert oder zwischengespeichert werden sollte
- nofollow - bedeutet, dass Suchmaschinen die Suche nicht über die Links auf dieser Seite fortsetzen sollten
Es gibt nur wenige verfügbare Meta-Daten-Erweiterungen, Entwickler sollten die Online-Liste lesen, um zu sehen, welche für ihre Projekte geeignet sind.
Hinweis
Um Suchmaschinen zu sagen, wie Inhalte kategorisiert und bewertet werden sollen, war die wichtigste Methode in der Vergangenheit, Meta-Daten wie keywords zu verwenden. Die heutigen Suchmaschinen legen weniger Wert auf Meta-Daten wie keywords, da diese missbraucht werden können, um eine Fälschung zwischen Inhalte und Relevanz zu erzeugen. Wenn Schöpfer möchten, dass Inhalte von Suchmaschinen positiv bewertet werden, ist der beste Weg, die von ihnen bereitgestellten Empfehlungen zu nutzen. Die meisten Suchmaschinen bieten Leitfäden zur Optimierung von Webseiten oder ganzen Websites an.
Google: Search Engine Optimization (SEO) Beginner's Guide
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Baidu Search Engine Optimization Guide
Viewport einstellen
Der Viewport ist der sichtbare Bereich der Webseite. Er variiert je nach Gerät – er ist auf dem Handy kleiner als auf dem Bildschirm des Computers.
Sie sollten die folgenden <meta>-Elemente in allen Webseiten enthalten:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It provides instructions to the browser on how to control the page size and scaling ratio.
width=device-width Partly sets the width of the page to follow the screen width of the device (varies by device).
initial-scale=1.0 Partly sets the initial zoom level of the browser when loading the page for the first time.
This is an example of a webpage without a viewport meta tag, and the same webpage with a viewport meta tag:
Tip:If you are browsing this page on a mobile phone or tablet, you can click on the following two links to see the differences.
You can find more information in ourResponsive Web Design - Viewport TutorialLearn more about the viewport.
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
