Summary of usage of meta tags in HTML5

Keywords: Mobile IE iOS Javascript

< meta > tags in front-end interfaces of major websites on June 11, 2020

The meet object represents an element of HTML and provides meta information of HTML elements, such as description, keyword, refresh rate. Object properties:

Content sets or returns the content attribute of an element

httpEquiv connects the content attribute to an HTTP header

Name connects the content attribute to a name

scheme sets or returns the format used to interpret the content property

  • Baidu Homepage
  • Ali Homepage
  • Meituan Homepage
  • Didi Homepage
  • Byte runout
  • Taobao Homepage
  • Jingdong Homepage
  • Huawei Homepage
  • Microsoft official website

Baidu Homepage

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta content="always" name="referrer">
<meta name="theme-color" content="#2932e1">
<meta name="description" content="The world's largest Chinese search engine is dedicated to making Internet users more convenient to get information and find what they want. Baidu's more than 100 billion Chinese Web databases can instantly find relevant search results.">

Ali Homepage

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="ahot-aplus" content="1">
<meta name="aplus-rate-ahot" content="0.5">
<title>Alicloud-Go to Alibaba cloud</title>

<!-- TRACK Burying point-->
<meta name="data-spm" content="5176" />
<meta name="description" content="230 Ten thousand users are enjoying the cloud server, cloud database, cloud storage CDN,Big data and other services, 7 x24 Hours of after-sales support, professional and rapid filing, help enterprises worry free cloud.">
<meta name="keyword" content="Alicloud, cloud database, cloud server, cloud computing, domain name registration">

<!-- SHARE share-->
<meta property="og:title" content="Alicloud-Go to Alibaba cloud" />
<meta property="og:description" content="230 Ten thousand users are enjoying the cloud server, cloud database, cloud storage CDN,Big data and other services, 7 x24 Hours of after-sales support, professional and rapid filing, help enterprises worry free cloud." />
<meta property="og:image" content="https://img.alicdn.com/tfs/TB1qNVdXlGw3KVjSZFDXXXWEpXa-620-620.png" />

Meituan Homepage

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Meituan.com-delicious food_Group buying_take-out food_hotel_Travel?_cinema ticket_Food, drink and play</title>
<meta name="description" content="Meituan.com:Food introduction,Take out online ordering,hotel reservation ,Tour group buying,Air ticket train ticket,cinema ticket,ktv Group buying, eating, drinking and playing!Store information query,Merchant rating/Evaluate one stop life service website">
<meta name="keywords" content="delicious food,Group buying,take-out food,Ordering online,hotel,Travel?,cinema ticket,Train tickets,a plane ticket">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="lx:category" content="group">
<meta name="lx:cid" content="">
<meta name="lx:appnm" content="mtpc">
<meta name="lx:autopv" content="off"> 

Didi official website

<meta charset="utf-8">
<meta name="baidu-site-verification" content="9YtFhXJtQL" />
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="https://website.didiglobal.com/manifest.json">
<link rel="shortcut icon" href="https://website.didiglobal.com/DDlogo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://common.diditaxi.com.cn https://view.officeapps.live.com ">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control:no-cache" content="max-age=0">
<meta http-equiv="expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes"> //Whether IOS Safari starts from desktop icon into full screen state (APP mode)
<meta name="renderer" content="webkit">  //Rendering mode setting of dual core browsing
<meta name="HandheldFriendly" content="true">  // Handset optimization
<meta name="screen-orientation" content="portrait"> //uc forced vertical screen
<meta name="x5-orientation" content="portrait"> //QQ forced vertical screen
<meta name="full-screen" content="yes"> // Force full screen
<meta name="x5-fullscreen" content="true"> //QQ force full screen
<meta name="browsermode" content="application"> //Browse mode
<meta name="x5-page-mode" content="app">  //QQ application mode
<meta name="msapplication-tap-highlight" content="no"> //Whether the semi transparent gray background generated when the input tag of mobile winphone system a is clicked is removed, and there is no highlight when clicking
<meta name="format-detection" content="telephone=no"> //Specifies whether mobile numbers in web content are displayed as dialing hyperlinks.
<meta name="apple-touch-fullscreen" content="yes"> // apple touch to enter, whether to enter the full screen
<title>home page-Didi official website</title>
<meta name="description" content="Didi travel, Didi taxi, Didi taxi official website ">
<meta name="Keywords" ontent="Didi travel,Didi taxi,Didi taxi official website,Didi taxi official website ">

Byte runout

<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="applicable-device" content="pc,mobile" /> //Application equipment
<meta name="robots" content="index, follow" /> //Search engine capture
<meta name="google" content="notranslate" /> //Google Translate
<meta name="format-detection" content="telephone=no" /> //Specifies whether mobile numbers in web content are displayed as dialing hyperlinks.

Taobao Homepage

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>TaoBao - Amoy! I like it</title>
<meta name="spm-id" content="a21bo" />
<meta name="description"
    content="TaoBao - Asia's largest online trading platform, providing all kinds of clothing, beauty, home furnishing, digital, telephone charges/Top up the card Hundreds of millions of high-quality goods with guaranteed transactions(Receipt before payment)Such as security transaction security services, and by businesses to provide return commitment, damage and other consumer security services, so that you can enjoy the fun of online shopping!" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword"
    content="TaoBao,Dig out treasure,Online shopping,C2C,Online transactions,Trading market,Online transactions,Trading market,Buy online,Sell online,Shopping website,Group buying,Online trade,Safe shopping,Electronic Commerce,Buy at ease,supply,Trading information,Online shop,Price ,auction,online shop ,Online shopping,Discount,Free shop,online shopping,channel,shop" />

Jingdong official website

<meta charset="utf8" version='1'/>
<title>JD.COM(JD.COM)-Genuine low price, quality assurance, timely delivery, easy shopping!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description"
      content="JD.COM JD.COM-Professional comprehensive online shopping mall,Sales of home appliances, digital communications, computers, home furnishing department stores, clothing, mother and baby, books, food and other high-quality products of tens of thousands of brands.Convenient and honest service, providing you with a pleasant online shopping experience!"/>
<meta name="Keywords" content="Online shopping,E-Shop,mobile phone,notebook,computer,MP3,CD,VCD,DV,camera,Digital,parts,Wrist watch,Memory card,JD.COM"/>

Huawei official website

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>[Huawei mall super 618]</title>
<meta name="keywords" content="Huawei mall, 618, Huawei mall 618, Huawei 618, glory 618 Vmall, Huawei, glory, 5 G,5G Mobile phone, Huawei 5 G,Glory 5 G,Huawei 5 G Mobile phone, glory 5 G Mobile phone, folding screen, Huawei MateXs,Huawei Mate30,Huawei Mate30 Pro,Huawei P40,Huawei P40 Pro,Enjoy Z,n Huawei nova 7,Huawei nova 7Pro,Huawei P30,Huawei P30 Pro,Huawei Mate 20,Huawei P20,Huawei Mate10,Huawei Porsche HUAWEI Mate RS Porsche design, Huawei nova 5,Huawei nova 5Pro,Huawei nova 5i,nova 5iPro,nova 5Z,Huawei nova 4,Huawei nova 4e,Huawei Changxiang 10 Plus,Huawei Changxiang 10, Huawei Changxiang 10 S,Huawei Changxiang 9, Huawei Changxiang 9 e,Huawei Changxiang 9 s,Huawei Changxiang 9 Plus,Huawei Changxiang MAX,Huawei maimang 8, Huawei notebook, Huawei tablet, Huawei smart screen, Huawei watch, Huawei bracelet, Huawei wear, Huawei body fat scale, Huawei official website, Huawei, Huawei mobile phone, Huawei mobile phone official website, Huawei mall official website, Huawei mall official website, glory V30,glory V30PRO,Glory 20, glory 20, glory 20 PRO,Glory 9 X,Glory 9 X PRO,glory V20,Glory 20 youth, glory 20 S,Glory 20 i,glory Magic2,glory Play3,Glory 10 youth, glory NOTE 10,Glory 8 X,Glory wisdom screen, glory MagicBook,Wisdom screen, glory notebook, glory mall, glory official website, glory mall, glory mobile phone, glory bracelet, glory Watch" />
<meta name="description" content="HUAWEI Huawei mall is a proprietary e-commerce platform of Huawei Company, which provides Huawei 5 G mobile phone(Huawei P40 Series Mate30 Series, glory 30 series, glory V30 Series, glory 30 S etc.),Huawei notebook, Huawei tablet, Huawei wearable, Huawei smart screen, Huawei accessories, Huawei smart home and other full scene smart life products and services" />
<meta name="mobile-agent" content="format=xhtml;url=http://M. vmall.com/ "> / / mobile agent

Microsoft official website

<meta charset="UTF-8" />

<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Microsoft - Official Home Page</title>

<meta name="twitter:url" content="https://www.microsoft.com/zh-cn" />
<meta property="og:url" content="https://www.microsoft.com/zh-cn" />
<meta name="twitter:title" content="Microsoft - Official Home Page" />
<meta property="og:title" content="Microsoft - Official Home Page" />
<meta name="twitter:description" content="At Microsoft our mission and values are to help people and businesses throughout the world realize their full potential." />
<meta property="og:description" content="At Microsoft our mission and values are to help people and businesses throughout the world realize their full potential." />
<meta name="twitter:card" content="summary" />
<meta property="og:type" content="website" />

summary

< meta > has 2 attributes: http equiv and name

http-equiv

1. Content type sets the character set of the web page, indicating the language and text used for making the web page, and the browser will call it accordingly.
    < meta http equiv = "content type" content = "text / HTML; charset = UTF-8" / > / / old HTML, not recommended
    < meta charset = "UTF-8" >

2. X-UA-Compatible tells the browser how to render the current page
    < meta http equiv = "x-ua-compatible" content = "ie = edge, Chrome = 1" / > / / the latest version of IE and Chrome are preferred

3. Pragma cache control expires various http strong caching methods, priority P > C > e
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache- Control:no-cache "Content =" Max age = 0 "> / / do not cache
    < meta http equiv = "cache control" content = "Max age = 7200" >
    < meta http equiv = "expires" content = "Mon, 12 May 2001 00:20:00 GMT" > 
    <meta http-equiv= "Pragma" contect= "no-cache" > / / prohibits browser from local cache information, once left the page, it can not be called from Cache.

4. refresh let the web page refresh in a certain time, or jump to other pages after a certain time
    Refresh yourself after < meta http equiv = "Refresh" content = "30" > / / 30s
    <meta http-equiv="Refresh" contect="n;url= http://yourlink "> regularly make the web page Jump to the page within the specified time n http://yourlink ;

5. Cache control prevents Baidu and other browsers from transcoding when opening web pages, such as posting advertisements
    < meta http equiv = "cache control" content = "no siteapp" / > / / send the request first and confirm with the server whether the resource has been changed. If not, use the cache

6. Content security policy content security policy, specifies that the browser intelligently loads js code in content, and all others are rejected
    <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

    Base URI: used to restrict the URL that can be displayed in the < base > element of the page.
    Child SRC: used to list URLs for worker threads and embedded frame content. For example: child SRC https://YouTube.com  Embedded video from YouTube, not other sources, will be enabled. Use this instruction instead of the deprecated frame SRC instruction.
    Connect SRC: used to restrict the sources that can be connected (via XHR, WebSockets, and EventSource).
    Font SRC: used to specify the source of web page fonts. Google's web page fonts can be accessed through font SRC https://themes.googleusercontent.com  Enable.
    Form action: used to list valid endpoints that can be submitted from the < form > tag.
    Frame ancestors: used to specify the source from which the current page can be embedded. This instruction applies to < frame >, < iframe >, < embed > and < applet > tags. This instruction cannot be used in < meta > tags and is only available for non HTML resources.
    Frame SRC: deprecated. Use child SRC instead.
    IMG SRC: used to define the source from which images can be loaded.
    Media SRC: used to restrict the sources that allow video and audio to be transmitted.
    Object SRC: controls Flash and other plug-ins. 
    Plugin types: used to limit the types of plug-ins that a page can call.

    Specifies that a default SRC instruction replaces the default behavior of most instructions:
    <meta http-equiv="Content-Security-Policy"
            content="default-src 'self' https://common.diditaxi.com.cn https://view.officeapps.live.com ">
    Other instructions obey the rule of default SCR, and there are four Keywords:
    none means no match is performed.
    self 'indicates a match with the current source, not its subdomain.
    Unsafe inline means that inline JavaScript and CSS are allowed.
    Unsafe eval means that text to JavaScript mechanisms like eval are allowed. 

7. date when the original server message was sent
    <meta http-equiv="date" content="Wed, 16 Feb 2011 22:34:13 GMT">

8. location is used to redirect the receiver to a location other than the requested URL to complete the request or identify a new resource
    <meta http-equiv="location" content="URL=http://www.runoob.com">

name

1. keywords tell search engine page keywords
    < meta name = "Keywords" content = "didi travel, Didi taxi, Didi taxi official website, Didi taxi official website" >

2. description of the website, tell the main content of the search engine website
    < meta name = "description" content = "didi travel, Didi taxi, Didi taxi official website" >

3. author

4. The viewport is used to display the page on the mobile end, set the width of the web page as the width of the viewport, set the zoom scale, and allow the user to zoom, etc.
    < meta name = "viewport" content = "width = device width, initial scale = 1.0, maximum scale = 1.0, user scale = no" >
    < meta name = "viewport" content = "width = device width, initial scale = 1 shrink to fit = no" >
    But in IOS 9, if you want to remember the function, you need to add "shrink to fit = no"

5. renderer: the rendering method of dual core browser, which specifies the default rendering method of dual core browser
    < meta name = "render" content = "webkit / IE comp / IE stand" / > / / default webkit kernel / default ie compatibility mode / default ie standard mode

6. Four parameters of reference page information:
    never: delete the referer in http head;
    default: if the current page uses the https protocol, and the loading resource uses the normal http protocol, set the amount of referer in the http header to null;
    Origin: only the origin part is sent;
    always: do not change the value of the referer in the http header;

    When the face value of page a of Baidu homepage is always, page B can get the page from which it came.

7. Theme color browser address bar changes color
    Baidu home page < meta name = "theme color" content = "E1" >

8. Generator
    < meta name = "generator" content = "" > to describe the generation tools (such as Microsoft FrontPage 4.0);

9. <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow">
    all: the file will be retrieved, and the links on the page can be queried
    none: the file will not be retrieved, and the links on the page cannot be queried
    index: the file will be retrieved
    follow: the links on the page can be queried
    noindex: the file will not be retrieved, but the links on the page can be queried
    nofollow: the file will not be retrieved and the links on the page can be queried.

10. Visit after informs the browser how many days to visit
    <meta name="revisit-after" CONTENT="7 days" > 

11. Copyright coperight
    < meta name = "copyright" content = "copyright" > 

Subtotal of name

1. <!-- SEO -->
    <meta name="keywords" content="your, tags"/>
    <meta name="description" content="150 words"/>
    <meta name="subject" content="your website's subject">
    <meta name="copyright"content="company name">

    <meta name="language" content="ES">
    <meta name="robots" content="index,follow" />
    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
    <meta name="abstract" content="">
    <meta name="topic" content="">
    <meta name="summary" content="">
    <meta name="Classification" content="Business">
    <meta name="author" content="name, email@hotmail.com">
    <meta name="designer" content="">
    <meta name="copyright" content="">
    <meta name="reply-to" content="email@hotmail.com">
    <meta name="owner" content="">
    <meta name="url" content="http://www.websiteaddrress.com">
    <meta name="identifier-URL" content="http://www.websiteaddress.com">
    <meta name="directory" content="submission">
    <meta name="category" content="">
    <meta name="coverage" content="Worldwide">
    <meta name="distribution" content="Global">
    <meta name="rating" content="General">
    <meta name="revisit-after" content="7 days">

    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">

2. In order to improve the communication efficiency, through Open Graph(Open picture agreement)Connect networks built by other social networks
    <meta name="og:title" content="The Rock"/>
    <meta name="og:type" content="movie"/>
    <meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>
    <meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
    <meta name="og:site_name" content="IMDb"/>
    <meta name="og:description" content="A group of U.S. Marines, under command of..."/>

    <meta name="fb:page_id" content="43929265776" />

    <meta name="og:email" content="me@example.com"/>
    <meta name="og:phone_number" content="650-123-4567"/>
    <meta name="og:fax_number" content="+1-415-123-4567"/>

    <meta name="og:latitude" content="37.416343"/>
    <meta name="og:longitude" content="-122.153013"/>
    <meta name="og:street-address" content="1601 S California Ave"/>
    <meta name="og:locality" content="Palo Alto"/>
    <meta name="og:region" content="CA"/>
    <meta name="og:postal-code" content="94304"/>
    <meta name="og:country-name" content="USA"/>

    <meta property="og:type" content="game.achievement"/>
    <meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>

    <meta property="og:video" content="http://example.com/awesome.swf" />
    <meta property="og:video:height" content="640" />
    <meta property="og:video:width" content="385" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:video" content="http://example.com/html5.mp4" />
    <meta property="og:video:type" content="video/mp4" />
    <meta property="og:video" content="http://example.com/fallback.vid" />
    <meta property="og:video:type" content="text/html" />

    <meta property="og:audio" content="http://example.com/amazing.mp3" />
    <meta property="og:audio:title" content="Amazing Song" />
    <meta property="og:audio:artist" content="Amazing Band" />
    <meta property="og:audio:album" content="Amazing Album" />
    <meta property="og:audio:type" content="application/mp3" />

3. company/Service tag
    <meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />

    APPLE META TAGS::
    <!-- From desktop icon start-up IOS Safari Enter full screen( APP Mode) -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <!-- Full screen when added to home screen -->
    <meta name="apple-touch-fullscreen" content="yes" >

    <!-- Specify the color of the status bar -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- ios Do not recognize numbers as clickable on the device telephone link -->
    <meta name="format-detection" content="telephone=no">

    <!-- page CSS The width is 320 and the initial scale is 2.3, Do not allow users to zoom, The maximum scale factor is 1 -->
    <meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no, maximum-scale=1 ">

    <!-- page CSS The width used in calculation is adaptive to the given value of the device -->
    <meta name= "viewport" content = "width = device-width">

    INTERNET EXPLORER META TAGS Network extension meta tag label:
    <meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
    <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
    <meta name="mssmarttagspreventparsing" content="true">

    <!-- tell IE What mode does the browser display the web page -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/>
    <meta name="msapplication-window" content="width=800;height=600"/>
    <meta name="msapplication-navbutton-color" content="red"/>
    <meta name="application-name" content="Rey Bango Front-end Developer"/>
    <meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/>
    <meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
    <meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />
    <meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
    <meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />

    <!-- Tab label icon -->
    <link rel="shortcut icon" href="/images/favicon.ico" />

Mobile head label###

< meta name = "description" content = "no more than 150 characters" / > page description

< meta name = "Keywords" content = "/ > page keywords

<meta name=”author” content=”name, email@gmail.com ”/>Web Author

< meta name = "robots" content = "index,follow" / > search engine capture

< meta name = "viewport" content = "initial scale = 1, maximum scale = 3, minimum scale = 1, user scale = no" > add a viewport to a mobile device

< meta name = "Apple Mobile Web App title" content = "title" > IOS device begin

< meta name = "Apple Mobile Web App capable" content = "yes" / > whether the title added to the main screen (new in iOS 6) enables WebApp full screen mode, and deletes Apple's default toolbar and menu bar

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
Add Smart App Banner (iOS 6+ Safari)

< meta name = "Apple Mobile Web App status bar style" content = "black" / > set Apple toolbar color

< meta name = "format detection" content = "telphone=no, email=no" / > it is forbidden to change the number on the web page into the link of telphone and email

< meta name = "render" content = "webkit" > enable 360 browser's fast mode (webkit)

< meta http equiv = "X-UA-Compatible" content = "IE=edge" > avoid IE using compatibility mode

< meta http equiv = "cache control" content = "no siteapp" / > do not allow Baidu to transcode

< meta name = "HandheldFriendly" content = "true" > optimized for handheld devices, mainly for some old browsers that don't recognize viewport, such as BlackBerry

< meta name = "MobileOptimized" content = "320 ″ > Microsoft's old browser

< meta name = "screen orientation" content = "portrait" > UC force vertical screen

< meta name = "X5 orientation" content = "portal" > QQ forced vertical screen

< meta name = "full screen" content = "yes" > UC force full screen

< meta name = "X5 fullscreen" content = "true" > QQ force full screen

< meta name = "browsermode" content = "application" > UC application mode

< meta name = "X5 page mode" content = "app" > QQ application mode

< meta name = "msapplication tap highlight" content = "no" > no highlight for Windows Phone Click

Posted by nova912 on Wed, 10 Jun 2020 23:28:36 -0700