HTML <meta> name attribute
Definition and Usage
name Attribute specifies the name of the metadata.
name Attribute specifies content attribute the name of the value.
use name and content Attribute can use name/value pairs to define metadata for the document. Among them,name Attribute indicates the type of metadata, while content Attribute is used to provide values.
The following table lists several predefined metadata types.
Note:If set http-equiv attributeIf not set name Attribute.
Tip:HTML5 introduces a method that allows web designers to control the viewport (the user's visible area of the web page) through the <meta> tag (see the "Set viewport" example below).
Example
Use the name attribute to define descriptions, keywords, and authors about the HTML document. Also define the viewport to control the page size and scaling ratio for different devices:
<head> <meta name="description" content="Free Web Tutorial"> <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>
Syntax
<meta name="value">
Attribute value
| Value | Description |
|---|---|
| application-name | Specify the name of the Web application represented by the page. |
| author |
Specify the name of the document author. For example: <meta name="author" content="YK Investment"> |
| description |
Specify the description of the page. The search engine can choose this description to display in search results. For example: <meta name="description" content="Free Web Tutorial"> |
| generator |
Specify one of the software packages used to generate documents (not for hand-coded pages). For example: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Define a list of keywords related to the page, separated by commas. Inform the search engine about the content of the page. Tip:Always specify keywords (search engines need to classify the page). For example: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Control the viewport (the user's visible area on the webpage). |
Description
In addition to the six predefined metadata types listed in the table, metadata extensions can also be used. Visit this page to get a list of frequently updated extensions:
http://wiki.whatwg.org/wiki/MetaExtensions
Some extensions are used more frequently, while others have very narrow applications, almost never used. The robots metadata clearly belongs to the former. HTML document authors can use it to tell search engines how to treat the document. For example:
<meta name="robots" content="noindex">
This metadata type has three values recognized by most browsers:
- noindex - indicates that this page should not be indexed
- noarchive - indicates that this page should not be archived or cached
- nofollow - indicates that the search should not continue through the links on this page
There are only a few metadata extensions available, developers are best to read the online list and see what can be used for their own projects.
Tip
To tell search engines how to categorize and rank content, the main method in the past has been to use keywords metadata. Now, search engines place less emphasis on keywords metadata, as it can be misused to create a false impression of relevance between page content and keywords. The best way for creators to hope for a change in how content is viewed by search engines is to use the suggestions provided by them. Most search engines provide guidelines for optimizing web pages or entire websites.
Google: Search Engine Optimization (SEO) Starter Guide
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Baidu Search Engine Optimization Guide
Set the viewport
The viewport is the user's visible area on the webpage. It varies by device — it is smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It provides instructions for the browser on how to control the page size and scaling ratio.
width=device-width Part of the settings for the page width to follow the screen width of the device (varies by device).
initial-scale=1.0 Part of the settings for the initial zoom level when the browser first loads the page.
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 viewport.
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
