HTML meta explained

Introduction

The meta tag is an auxiliary tag in the HEAD area of ​​the HTML language.

meta is often used to define page descriptions, keywords, last modified date, and other metadata. This metadata will serve browsers (how to layout or reload the page), search engines and other web services.

The mata tag contains global attributes (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)

charset

Declare the character encoding of the web page:

<meta charset="UTF-8">

content

The contents of the content attribute are the value of the http-equiv or name attribute, depending on which one you use.

http-equiv

This attribute can contain the name of an HTTP header. The full name of the attribute is http-equivalent. It defines instructions that can change the behavior of the server and user-agent. The value of this directive is defined within the content attribute and can be one of the following:

content-language (deprecated)

Defines the default language for the page. It can be overridden by the lang attribute on any element.

Pragma

Prevents the browser from accessing page content from the local computer's cache. like:

<meta http-equiv="Pragma" content="no-cache">

expires

Can be used to set the expiration time of a web page. Once a web page expires, it must be retransmitted to the server.

cache-control

Specifies the cache mechanism to follow for requests and responses. There are several usages:

no-cache: Send a request first to confirm with the server whether the resource has been changed. If it has not been changed, use the cache.
no-store: No caching is allowed, and the entire response must be downloaded from the server each time. (Safety Measures)
public : All responses are cached, but not required. Because max-age can also achieve the same effect
private : Cache only for a single user, so no relays are allowed to cache. (For example, CDN does not allow caching of private responses)
max-age: Indicates how long the response can be cached and reused starting from the current request, without re-requesting the server. For example: max-age=60 means that the response can be cached and reused for another 60 seconds.

content-security-policy

Allows page authors to define the content policy for the current page. Content policy primarily specifies allowed server addresses and script endpoints, which helps prevent cross-site scripting attacks.

The essence of CSP is the whitelist system. Developers explicitly tell the client which external resources can be loaded and executed, which is equivalent to providing a whitelist. Its implementation and execution are all done by the browser, and developers only need to provide configuration.

CSP greatly enhances the security of web pages. Even if an attacker finds a vulnerability, they cannot inject a script unless they also control a trusted host that is included in the whitelist. There are two ways to enable CSP. One is through the Content-Security-Policy field of the HTTP header information.

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org;child-src https:

Another way is through the tags of the web page.

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

In the above code, CSP is configured as follows:

Scripts: only trust the current domain name Tags: do not trust any URL, that is, do not load any resources Stylesheets: only trust cdn.example.org and third-party.org
Frame: Other resources must be loaded using the HTTPS protocol: No restrictions. When enabled, external resources that do not comply with CSP will be blocked from loading.

For more information, see: Content Security Policy Getting Started Tutorial

content-type (deprecated)

Defines the MIME type of the document, followed by its character encoding.

Do not use this value as it is deprecated. It is recommended to use the charset attribute on the element.
Since you cannot change the document type in XHTML serialization for XHTML or HTML5, do not use Set MIME type to the XHTML MIME type.
refresh

This directive specifies:

If the content attribute contains only a positive integer, it indicates the number of seconds to reload the page.
If the content attribute contains a positive integer followed by the string '; url =', then the current page will be redirected to another valid URL after XX seconds.

<meta http-equiv="refresh" content="2; URL=https://www.jb51.net/">
 //It means jump to 123WORDPRESS.COM after 2 seconds

set-cookie (deprecated)

Defines the cookie of the page. The corresponding content value must comply with the IETF HTTP Cookie Specification (https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14)

Do not use this directive, use the HTTP header Set-Cookie (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) instead

X-UA-Compatible

Used to tell the browser which version to render the page.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 //Specify IE and Chrome to use the latest version to render the current page

name

The name attribute is defined as document-level metadata and cannot be set at the same time as the following attributes: itemprop, http-equiv or charset.

This metadata name is associated with the value contained in the content attribute. Possible values ​​for the name attribute are:

application-name

Defines the name of the application that runs in the web page.

author

Used to mark the author of a web page.

description

Include a brief but accurate description of the page's content. Some browsers, such as Firefox and Opera, use this as the default description for web bookmarks.

generator

Used to indicate what software the web page is made of.

keywords

Used to tell search engines the keywords of your web page

revisit-after

If the page is not updated frequently, you can set a crawler revisit time to reduce the pressure on the server caused by search engine crawlers. If the revisit time is too short, crawlers will revisit at the default time they define. Example:

<meta name="revisit-after" content="7 days">

Renderer

Renderer is prepared for dual-core browsers and is used to specify how dual-core browsers render pages by default. For example, 360 browser. Example:

<meta name="renderer" content="webkit"> 
//Default webkit kernel <meta name="renderer" content="ie-comp"> 
//Default IE compatibility mode <meta name="renderer" content="ie-stand"> 
//Default IE standards mode

referrer

referrer controls the Referer HTTP header (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) attached to the Request request initiated by the document. The corresponding value is in the content:

Robots

Robots are used to tell crawlers which pages to index and which pages not to index.

viewport

Provides a hint about the initial size of the viewport. For mobile use only.

Common usage

Disable zooming:

<meta name=”viewport” content=”initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

Automatically refresh web pages

You can set a time period to refresh the page. meta http-equiv="refresh" can specify that the browser delays automatic page refresh for a period of time. The following meta-tag instructs the browser to automatically refresh every 5 seconds.

<meta http-equiv=”refresh” content=”5″ />

Automatic redirection

We can use the refresh meta tag to redirect the page. The following example will visit www.jb51.net after 5 seconds.

<meta http-equiv=”refresh” content=”5;url='https://www.jb51.net'” />

Disable browser caching

When we test a web page locally, the new content is not updated in time, which may be due to browser cache. At this time, we can solve it by disabling browser cache using Meta tags. The general code is as follows:

<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

Baidu transcoding is prohibited

<meta http-equiv="Cache-Control" content="no-siteapp"/>

In mobile development, the code to block numbers as phone numbers:

<meta content=”telephone=no” name=”format-detection” />

refer to

MDN HTML element (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)