Meta tags are used to describe attributes of an HTML web document, such as author, date and time, page description, keywords, page refresh, etc. It provides information that is not visible to the user, but is the most basic metadata of the document.
For web pages, meta data describes the current web page through some field information, so that browsers and search engines can use the description information to know how to parse the web page data when visiting the web page.
The meta tag has four attributes: HTTP-equiv, Name, Scheme, and Content. Different attributes and different parameter values, these different parameter values to achieve different web page functions. Http-equiv, as its name implies, is used to restrict HTTP by associating the Content property with the HTTP header. The scheme property is used to specify the scheme to be used to translate the property value.
The meta tag provides a key-value pair, with name/ HTTP-equiv as the key and Content as the value.
Based on the above concepts, meta tags are often used as a powerful SEO provider.
Common meta identifiers are:
// Declare the character encoding used in the document<meta charset="utf-8">// Page description<meta name="description" content="Page Description"/>// Page keywords<meta name="keywords" content=""/>// Web page author<meta name="author" content="name, [email protected]"/>
Copy the code< span style = “box-sizing: border-box; color: RGB (51, 51, 51); charset=UTF-8
These are the most formal uses of meta, supported by almost every browser, and defined in the tag specification.
Awkwardly, however, just as script tags were not intended to be used as jSONP tags, modern browsers support meta tags that go completely beyond their original definition.
As mentioned above, meta tags are invisible to users, and their simple key-value structure is undoubtedly the easiest way to convey information on a web page. This is why browser manufacturers have finally started to use meta tags. In addition, each browser wants to express its own characteristics, resulting in a messy meta tag.
There is a meta identity that is specific to a particular browser. Ex. :
// UC forces portrait<meta name="screen-orientation" content="portrait">//QQ forced portrait<meta name="x5-orientation" content="portrait">//UC forces full screen<meta name="full-screen" content="yes">// Set the apple toolbar color<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
Copy the codeThese are custom versions of the meta from the browser manufacturer, which are not common, but can be used to reduce the complexity of the requirements.
As a front-end developer, I have to say that I am looking forward to the early realization of a unified browser 🤣.
Escape…
The following is a collection of meta tags, more collection will be updated in the future, also hope that netizens have more meta tags to give advice:
// Declare the character encoding used in the document<meta charset="utf-8">// Use the latest version of IE and Chrome first<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>// Page description<meta name="description" content="Page Description"/>// Page keywords<meta name="keywords" content=""/>// Web page author<meta name="author" content="name, [email protected]"/>// Search engine crawls<meta name="robots" content="index,follow"/>// Add viewPort for mobile devices<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">// Add Smart App Banner (iOS 6+ Safari)<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">// Set the apple toolbar color<meta name="apple-mobile-web-app-status-bar-style" content="black"/>// Enable webKit mode for 360 browser<meta name="renderer" content="webkit">// Avoid compatibility mode in IE<meta http-equiv="X-UA-Compatible" content="IE=edge">// don't let baidu transcode<meta http-equiv="Cache-Control" content="no-siteapp" />// Optimized for handheld devices, mainly for older browsers that don't recognize viewports, such as blackberry<meta name="HandheldFriendly" content="true">// Microsoft's old browser<meta name="MobileOptimized" content="> screen-orientation" content="portrait">//QQ forced portrait<meta name="x5-orientation" content="portrait">//UC forces full screen<meta name="full-screen" content="yes">//QQ forces full screen<meta name="x5-fullscreen" content="true">//UC mode<meta name="browsermode" content="application">//QQ application mode<meta name="x5-page-mode" content="app">// Windows Phone click no highlights<meta name="msapplication-tap-highlight" content="no">// Set the page not to be cached<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
Copy the code– The End