The <meta> tag is used to describe the metadata of the HTML document (document). Through the <meta> we can set many different types of web information.
<meta> tag usage example:
<head>
<meta charset="utf-8">
<meta name="description" content="Free Web Tutorial">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Mike">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
The <meta> tag can be used to set this information:
- meta charset specifies the encoding used by the web page
<meta> charset is used to specify the character set of the content of the webpage. Now most webpage encoding is UTF-8.
<meta charset="utf-8">
The following wording was more common in the past (HTML 4.01), but the meaning is the same:
<meta http-equiv="content-type" content="text/html; charset=utf-8">- meta description page description
HTML <meta name="description" content=""> tag (tag)-specify the description of the page
<meta> description is used to briefly describe the content of your webpage. It is usually used for crawling by search engines (Google) and will be used to display in search results.
<meta name="description" content="Free Web Tutorial">
The web page description does not have to be a complete sentence, it can also contain information about the web page. For example, blog posts can list author, publication date, or byline information, allowing potential visitors to see important information that does not appear in the page summary. Similarly, if all important information such as price, age, brand name, etc. is scattered on the product webpage, it may make the webpage appear chaotic; then a good webpage description can integrate all the available information at once.
For example, the following description provides detailed information about a book:
<meta name="description" content="Author：A.N. Author，Price：$17.99，Pages：784 page">All information is clearly labeled and separated.
- meta keywords
HTML <meta name="keywords" content=""> tag (tag)-description of the keywords on the page
<meta> keywords are used to describe the keyword words in your web content. They are usually crawled by search engines (Google) to help search engines understand your web pages. You can use commas to separate the differences. Keywords.
<meta name="keywords" content="HTML,CSS,JavaScript">
- meta author page author information
HTML <meta name="author" content=""> tag-describes the author information of the page
<meta> author is used to specify the author or page owner information.
Usage example:
<meta name="author" content="Mike">- meta viewport mobile mobile web screen information
HTML <meta name="viewport" content=""> tag-set the viewport information of the mobile version of the webpage
When designing mobile web or responsive (RWD, Responsive Web Design) web pages, we need to use the <meta> viewport to specify how the browser renders and zooms the width and height of the web page. If the meta viewport is not set, the mobile device will render the page with a typical desktop device screen width, and then scale the page to fit the mobile device screen. At this time, the screen looks crowded or the content becomes small and difficult to read.
By setting the viewport (viewport), you can control the width and zoom ratio of the screen. Common viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
among them:
width=device-widthSpecify the width of the browser page to be the same as the width of the deviceinitial-scale=1.0Specifies that the initial zoom ratio of the screen is 100%, that is, neither zoom in nor zoom out
If you want to prevent users from zooming the screen with their fingers:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Or setting it like this has the same effect:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
among them:
minimum-scale=1Set the minimum zoom ratio of themaximum-scale=1screen to 1, and set the maximum zoom ratio of the screen to 1. All set to 1 means that the zoom cannot be zoomed.user-scalableUsed to set whether the user is allowed to change the zoom ratio,user-scalable=nothat is, the zoom is not allowed
- meta refresh automatically redirects to the web page
HTML <meta http-equiv="refresh" content=""> Tag (tag)-Automatically redirect to the page
<meta> refresh can be used to redirect to a certain URL after a few seconds:
<meta http-equiv="refresh" content="5; url=https://www.fooish.com">
The above example will make the webpage automatically jump to https://www.fooish.com after 5 seconds after loading .
If the url parameter is not added, it means to refresh the page regularly:
<meta http-equiv="refresh" content="10">
The above example specifies to refresh the page every 10 seconds.
- meta robots search engine tag
HTML <meta name="robots" content="noindex, noarchive, nofollow"> tag-prohibit web pages from being indexed by search engines
The <meta> robots tag allows you to control how each page should be indexed and displayed in the search engine (Google) search results for a specific page.
There are several values that can be set:
- noindex: Don't show this page in search results
- nofollow: Do not follow links on this page
- none: equivalent to noindex, nofollow
- noarchive: Don't show cached links in search results
- nosnippet: Don't display the text summary or video preview screen of this webpage in search results
- notranslate: Do not provide a translation of this page in search results
- noimageindex: Do not index the images on this page
unavailable_after: [date/time]: Do not show this page in search results after the specified date/time- all: default value, equivalent to
index, follow
Using the example, we instruct search engines not to index this page:
<meta name="robots" content="noindex">
There can be multiple conditions at the same time, separated by half-shaped commas. For example, we instruct search engines not to index this page, nor to retrieve any links on the page:
<meta name="robots" content="noindex, nofollow">
Post a Comment
0 Comments