The HTML5 Head header tag (next chapter) that the mobile front has to understand

SEO optimization section

Page title <title> tags (head head must)
<title>your title</title>
Page keyword Keywords
<meta name= "keywords" content= "your keywords" >
Page description Content Description
<meta name= "description" content= "Your description" >
Define page author author
<meta name= "author" content= "Author,email address" >
Define the page search engine index method, Robotterms is a set of comma, the value of the split, usually have the following values: None,noindex,nofollow,all,index and follow.
<meta name= "Robots" content= "Index,follow" >

Baidu prohibits transcoding

Baidu Mobile phone to open the page, Baidu may be on your page transcoding, to your body stickers Dogskin plaster ads, for this can be added in the head

<meta http-equiv="Cache-control" content="No-siteapp" />

Link Label

When it comes to the link tag, it is estimated that the first reaction is the same as me, that is, the introduction of external CSS style files, yes, this is the most common link tag features. But it has a lot of other uses, such as the browser Favicon icon, the touch icon, and so on.

<!--helps prevent duplication of content--
<link rel= "canonical" Href= "https://example.com/2010/06/9-things-to-do-before-entering-social-media.html" >
<!--was previously used to include icon links but was deprecated and no longer used--
<link rel= "Shortlink" href= "https://example.com/?p=42" >
<!--linked to an AMP HTML version of the current document--
<link rel= "amphtml" href= "https://example.com/path/to/amp-version.html" >
<!--shows a CSS style sheet--
<link rel= "stylesheet" href= "Https://example.com/styles.css" >
<!--a JSON file that links to a specified Web application "Install" certificate--
<link rel= "manifest" href= "Manifest.json" >
<!--linking to the author of the document--
<link rel= "author" href= "Humans.txt" >
<!--point to a copyright statement that applies to linked content--
<link rel= "copyright" href= "copyright.html" >
<!--give you the possibility of a document location reference for your other language--
<link rel= "alternate" href= "https://es.example.com/" hreflang= "es" >
<!--provides information about the author or other people--
<link rel= "Me" href= "Https://google.com/profiles/thenextweb" type= "text/html" >
<link rel= "Me" href= "Mailto:[email protected]" >
<link rel= "Me" href= "sms:+15035550125" >
<!--link to a document that contains an archive link to the current document-
<link rel= "Archives" href= "https://example.com/2003/05/" title= "May 2003" >
<!--linked to top-level resources in the hierarchy-
<link rel= "index" href= "https://example.com/" title= "DeWitt Clinton" >
<!--gives a starting point for this document--
<link rel= "Start" href= "https://example.com/photos/pattern_recognition_1_about/" title= "pattern recognition 1 ">
<!--the preceding resource sequence that guides the current document--
<link rel= "prev" href= "https://example.com/opensearch/ opensearch-and-openid-a-sure-way-to-get-my-attention/"title=" OpenSearch and OpenID? A sure to get my attention. " >
<!--give a self-reference-useful when a document has multiple possible references
<link rel= "self" type= "Application/atom+xml" href= "https://example.com/atomFeed.php?page=3" >
<!--are the first, next, previous, and last in a series of files, respectively--
<link rel= "First" href= "https://example.com/atomFeed.php" >
<link rel= "Next" href= "https://example.com/atomFeed.php?page=4" >
<link rel= "Previous" href= "https://example.com/atomFeed.php?page=2" >
<link rel= "Last" href= "https://example.com/atomFeed.php?page=147" >
<!--when you use a third-party service to maintain your blog
<link rel= "Edituri" href= "HTTPS://EXAMPLE.COM/XMLRPC.PHP?RSD" type= "Application/rsd+xml" title= "RSD" >
<!--when another WordPress blog links to your wordpress blog or article forms an automated review--
<link rel= "Pingback" href= "https://example.com/xmlrpc.php" >
<!--notify when you link to a URL on your page--
<link rel= "webmention" href= "https://example.com/webmention" >
<!--load an external HTML file into the current HTML file--
<link rel= "import" href= "component.html" >
<!--Open Search-
<link rel= "search" href= "/open-search.xml" type= "Application/opensearchdescription+xml" title= "search title" >
<!--Feeds--
<link rel= "alternate" href= "Https://feeds.feedburner.com/example" type= "Application/rss+xml" title= "RSS" >
<link rel= "alternate" href= "Https://example.com/feed.atom" type= "Application/atom+xml" title= "Atom 0.3" >< /c3>
<!--prefetch, pre-load, pre-browse-
<link rel= "Dns-prefetch" href= "//example.com/" >
<link rel= "Preconnect" href= "https://www.example.com/" >
<link rel= "prefetch" href= "https://www.example.com/" >
<link rel= "PreRender" href= "https://example.com/" >
<link rel= "preload" href= "image.png" as= "image" >
<!--more information: https://css-tricks.com/prefetching-preloading-prebrowsing/

The link tag is not recommended

<link rel= "shortcut icon" href= "Path/to/favicon.ico" >
<!--useless, exclusive and wrong, see Https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ- -
<link rel= "Subresource" href= "Styles.css" >

RSS Subscription

< Link rel= "alternate"  Span class= "ATN" >type= "application/rss+xml"  title= "RSS"  href= "/rss.xml"  />     

<!--add RSS subscriptions--

Favicon icon

ie one, Chrome, Firefox, Safari, opera support  <link>  Form settings: 
 <link rel= "icon" href= "Path/to/favicon-16.png" sizes= "16x16" Type= "Image/png";  
 <link rel= "icon" href= "path/to/ Favicon-32.png "sizes=" 32x32 "type=" image/png " 
 <link rel = "icon" href= "Path/to/favicon-48.png" sizes= "48x48" type= "image/png";  
 <link rel=" icon "href=" Path/to/favicon-62.png "sizes=" 62x62 "type=" image/png ";  
 <link rel= "icon" href= "Path/to/favicon-192.png" sizes= "192x192" type= "Image/png" > 
          

Note: The form setting is not supported for IE 10 and the following versions <link> , only by favicon.ico placing the named file in the root directory of the Web site.

More detailed Favicon introduction can be consulted:

• All about website icons (and touch icons)
• Favicon table

The HTML5 Head header tag (next chapter) that the mobile front has to understand