HTML lang attributes

< HTML lang=” zh-cn “> or < HTML lang=”zh”> are commonly used, but actually W3 Language Tags recommend using zh-Hans simplified Chinese and zh-hant traditional Chinese to improve consistency and accuracy.

Meta tags

  • 1. Declare the character encoding used in the document

    • <meta charset="utf-8">Used forHTML5
    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">Used forHTML4orXHTMLOr for outdated DOM parsers

    Usually we use short ones. In fact, in HTML5, the two are equivalent, but the shorter one is easier to remember. See StackOverflow for more comparisons

  • 2. Use Internet Explorer and Chrome first

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
Copy the code

  • 3.360 Use Google Chrome Frame

    <! -- If you have not installed GCF(Google Chrome Frame), use the highest version of IE kernel rendering -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
Copy the code

    See 360 Browser Kernel Control for details

    <! -- Force webKit rendering -->
<meta name="renderer" content="webkit"> 
<meta name="force-rendering" content="webkit">
Copy the code

  • Baidu forbids transcoding when using Baidu mobile search, Baidu will automatically transcode the website and add some annoying ads. If we do not do Baidu advertising, we can prohibit the website from being transcoding through the meta tag

    <meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<! -- Indicates that the page is suitable for viewing on both mobile devices and PCS -->
<meta name="applicable-device" content="pc,mobile">
Copy the code

    Related websites:

    • Baidu Mobile Search
    • Take-off page website
    • blog

  • 5. SEO optimization

    • Page Title
    <title>your title</title>
Copy the code
    • Page Keywords keywords
    <meta name="keywords" content="your keywords">
Copy the code
    • Page Description Description
    <meta name="description" content="your description">
Copy the code
    • Define web page author author
    <meta name="author" content="author,email address">
Copy the code
    • Define web search engine indexing SEO- Robots
    <meta name="robots" content="index,follow">
Copy the code

  • 6. Add viewPort for mobile devices to make layouts look better on mobile browsers

    <meta
    name ="viewport"
    content ="Width =device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no"
>
Copy the code

    Width =device-width will cause black edges to appear when the WebApp page is opened in full screen mode after iPhone5 is added to the home screen

    Note: minimal-ui in iOS8 has been removed

  • 7. The ios device

    • Titles added to the home screen (new for iOS 6)
    <meta name="apple-mobile-web-app-title" content="Title">
Copy the code
    • Whether to enable the WebApp full-screen mode and delete apple’s default toolbar and menu bar
    <meta name="apple-mobile-web-app-capable" content="yes"/>
Copy the code
    • Sets the background color of the status bar
    <! -- Valid when "apple-mobile-web-app-capable" content="yes" -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Copy the code

    The content parameter

    Default Default value. Black The background of the status bar is black. The background of the black-always status bar is translucent black. If set to Default or Black, the content of the web page starts at the bottom of the status bar. If set to Black-always, the page content always fills the screen, the top obscured by the status bar.Copy the code
    • Do not automatically identify digits as telephone numbers
    <meta name="format-detection" content="telephone=no" />
<! -- Phone number, email -->
<meta name="format-detection" content="telephone=no,email=no" />
Copy the code
    • Add Smart App Banner (iOS 6+ Safari)
    <meta
    name="apple-itunes-app"
    content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
> 
Copy the code

    The Content attribute can take three arguments, separated by commas:

    App-id (Mandatory) Specifies the ID of the app on APPStrore. Attrander-data (optional) is the ID of the iTunes affiliate program. App-argument (Optional) Click open to pass parameters to the appCopy the code

  • 8. Close the Translate plug-in in Chrome

    <meta name="google" value="notranslate" />
Copy the code

  • 9. Remove the translucent background of the phone

    • When ios clicks on the link, a translucent gray mask appears
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Copy the code
    • Android click the link, there will be a border or translucent gray mask, different manufacturers define the effect is different, you can make Settings to remove part of the machine’s own effect
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
Copy the code
    • For Windows Phone, click the label to create a grey translucent background and addmetaLabel to remove
    <meta name="msapplication-tap-highlight" content="no">
Copy the code

    Note: some models may not be removed. For buttons, you can avoid using a and INPUT and use div instead

  • 10. Refresh browser content — time; The url

    <meta http-equiv="Refresh" content="2; URL=http://www.baidu.com">
Copy the code

  • 11. Mandatory portrait and full-screen landscape — landscape; Portrait, portrait

    <! -- UC forced portrait -->
<meta name="screen-orientation" content="portrait">
<! -- QQ forced portrait screen -->
<meta name="x5-orientation" content="portrait">
<! -- UC mandatory full screen -->
<meta name="full-screen" content="yes">
<! -- QQ mandatory full screen -->
<meta name="x5-fullscreen" content="true">
Copy the code

  • 12. Application patterns

    <! UC application mode: default full screen, no long press menu, no gesture, standard layout, mandatory picture display -->
<meta name="browsermode" content="application">
<! -- QQ application mode -->
<meta name="x5-page-mode" content="app">
Copy the code

    Browsermode role:

    <! -- UC uses adaptive display mode -->
<meta name="layoutmode" content="fitscreen">
<! -- UC force image display -->
<meta name="imagemode" content="force">
<! - UC ban night mode shows the enable | disable - >
<meta name="nightmode" content="disable">
<! -- UC Disable zooming when the page has too much text -->
<meta name="wap-font-scale" content="no">  
Copy the code

  • 13.UC layout mode

    UC Browser provides two typesetting modes, fitScreen and Standard. Fitscreen simplifies the processing of some pages, making them more suitable for page reading, saving traffic, and responding faster. The standard mode enables page typesetting and rendering according to standard specifications.

    <meta name="layoutmode" content="fitscreen|standard">
Copy the code

  • 14. Cookies will be deleted after the specified time is set

    <! -- set-cookie: If the page expires, the saved Cookie will be deleted in GMT format -->
<meta
    http-equiv="Set-Cookie"
    content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT; path=/"
>
Copy the code

3. Reference links

  • SEO–Robots
  • Mobile header meta Complete