Mobile front end has to understand HTML5 head tag--meta tag

Meta tags

The META tag is an accessible tag in the head of the HTML, which is located between the header of the HTML document

In desktop development, meta tags are often used for搜索引擎优化（SEO）and robots定义页面主题, or定义用户浏览器上的cookieit can be used to identify authors, format pages, annotate content feeds and keywords, and set up pages to refresh themselves at intervals you define. and set the RASC content level, and so on.

In mobile development, meta tags, in addition to the desktop side of the function settings, but also include, such as viewport settings, add to the Home screen icon, tab color and other practical settings. Detailed description can be seen in the following.

Meta tag categories

The META tag can be divided into two parts depending on the attribute: the HTTP-EQUIV and the name attribute.

• HTTP-EQUIV corresponds to the file header of HTTP, which can send back useful information to the browser to help the browser display the content of the page correctly.
• The Name property is mainly used to describe the Web page, with the corresponding property value of Content,content in the content is mainly easy to browser, search engine and other robot recognition, and so on.

Recommended META Tags

<!-- Set the character encoding of the document -->
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- The above 3 meta tags *Must* must be placed at the top of the head; any other head content must be after the * of these tags * -->

    <!-- Allows over-loading of control resources -->
    <meta http-equiv="Content-Security-Policy" content="default-src ‘self‘">
    <!-- placed in the document as early as possible -->
    <!-- only applies to the content under this tab -->

    <!-- The name of the web app (used only when the website is used as an app) -->
    <meta name="application-name" content="app name">

    <!-- A short description of the page (limited to 150 characters) -->
    <!-- In the case of *some*, this description is used as part of the search result presentation fragment -->
    <meta name="description" content="a page description">

    <!-- Control search engine crawling and indexing behavior -->
    <meta name="robots" content="index,follow,noodp"><!-- All search engines -->
    <meta name="googlebot" content="index,follow"><!-- only valid for Google -->

    <!-- Tell Google not to display the search box for website links -->
    <meta name="google" content="nositelinkssearchbox">

    <!-- Tell Google not to provide translations for this page -->
    <meta name="google" content="notranslate">

    <!-- Verify the ownership of the Google Search Console -->
    <meta name="google-site-verification" content="verification_token">

    <!-- used to name software or to build web pages (eg - WordPress, Dreamweaver) -->
    <meta name="generator" content="program">

    <!-- A short description of the theme of your website -->
    <meta name="subject" content="Your website theme">

    <!-- Very brief (less than 10 words) description. Mainly used in academic papers. -->
    <meta name="abstract" content="">

    <!-- Complete domain name or URL -->
    <meta name="url" content="https://example.com/">

    <meta name="directory" content="submission">

    <!-- Give general age rating based on website content -->
    <meta name="rating" content="General">

    <!-- Allows control over how referrer information is passed -->
    <meta name="referrer" content="never">

    <!-- Disable automatic detection and formatting of possible phone numbers -->
    <meta name="format-detection" content="telephone=no">

    <!-- Completely exit DNS prefetch by setting to "off" -->
    <meta http-equiv="x-dns-prefetch-control" content="off">

    <!-- Store cookies on the client, client recognition of the web browser -->
    <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

    <!-- Specify the page to display in a specific frame -->
    <meta http-equiv="Window-Target" content="_value">

    <!-- Geotag -->
    <meta name="ICBM" content="latitude, longitude">
    <meta name="geo.position" content="latitude;longitude">
    <!-- Country Code (ISO 3166-1): Mandatory, State Code (ISO 3166-2): Optional; eg content="US" / content="US-NY" -->
    <meta name="geo.region" content="country[-state]">
    <!-- such as content="New York City" -->
    <meta name="geo.placename" content="city/town">

For detailed instructions, please see:

• Meta tags that Google can identify
• WHATWG Wiki:meta Expansion
• icbm– Wikipedia
• Geo-tagging – Wikipedia

Add viewport to a mobile device

Viewport can make the layout appear better on a mobile browser. Will usually write

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` will cause black borders when opening the page in WebApp full screen mode after iPhone 5 is added to the home screen http://bigc.at/ios-webapp-viewport-meta.orz --> 

maximum-scale

content parameters
width	viewport Width (value/device-width)
height	viewport Height (numeric/device-height)
initial-scale	initial scaling
Max Zoom
minimum-scale	min. scale
user-scalable	whether to allow user scaling (yes/no)
minimal-ui	ios 7.1 The new properties in Beta 2 (note: IOS8 has been removed), you can minimize the upper and lower status bar when the page is loaded. This is a Boolean value that can be written directly:

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

If your site is not responsive, do not use Initial-scale or disable zooming.

<meta name="viewport" content="width=device-width,user-scalable=yes">

For iphone 6 and iphone 6plus, you need to write:

<meta name="viewport" content="width=375"> 
<meta name="viewport" content="width=414">

Most 4.7~5-inch Android devices have a viewport width of 360px,iphone 6, while the majority of 5.5-inch Android machines (such as Samsung Note) have a viewport width of 400,iphone 6 Plus 414px.

SEO optimization section

<!-- Page title <title> tag (head header must be) -->
<title>your title</title>

<!-- Page Keywords keywords -->
<meta name="keywords" content="your keywords">

<!-- Page description content description -->
<meta name="description" content="your description">

<!-- Define the author of the page author -->
<meta name="author" content="author,email address">

<!-- Defines the web search engine indexing method. Robotterms is a set of values separated by the comma ",". It usually has the following values: none, noindex, nofollow, all, index, and follow. -->
<meta name="robots" content="index,follow">

RELATED links: web1038– tag contains invalid value

Baidu prohibits transcoding

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

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

Related link: Siteapp transcoding declaration

Deprecated meta-attributes

<!-- is used to declare the document language, but the support is not very good. It's best to use <html lang=""> -->
    <meta name="language" content="en">
    
    <!-- Google ignores & Bing thinks the trash indicator -->
    <meta name="keywords" content="You, keyword, here, without spaces, separated by commas">
    <!-- There are currently no claims in any search engine -->
    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
    
    <!-- Provides an easy way for spam robots to harvest email addresses -->
    <meta name="reply-to" content="email@example.com">
    
    <!-- It is best to use the <link rel="author"> or humans.txt file -->
    <meta name="author" content="name, email@example.com">
    <meta name="designer" content="">
    <meta name="owner" content="">
    
    <!-- Tell the search robot to revisit the page after a while. This is not supported because most search engines use random time intervals to re-crawl pages -->
    <meta name="revisit-after" content="7 days">
    
    <!-- Redirect the user to the new URL after a while -->
    <!-- W3C does not recommend using this tag. Google recommends using a server-side 301 redirect. -->
    <meta http-equiv="refresh" content="300; url=https://example.com/">
    
    <!-- Describe the theme of the website -->
    <meta name="topic" content="">
    
    <!-- Company Profile or Website Purpose -->
    <meta name="summary" content="">
    
    <!-- An obsolete label that has the same effect as the keyword meta tag -->
    <meta name="classification" content="business">
    
    <!-- Is it the same URL, old and not supported -->
    <meta name="identifier-URL" content="https://example.com/">
    
    <!-- Similar to the keyword tag -->
    <meta name="category" content="">
    
    <!-- Make sure your website is displayed in all countries and languages -->
    <meta name="coverage" content="Worldwide">
    
    <!-- Same as coverage label -->
    <meta name="distribution" content="Global">
    
    <!-- Control which users on the Internet can access -->
    <meta http-equiv="Pics-label" content="value">
    
    <!-- Cache Control -->
    <!-- It is best to configure cache control on the server side -->
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache"> 

Mobile front end has to understand HTML5 head tag--meta tag