META tags for common SEO optimization

Posted by groovything on Sun, 16 Jan 2022 03:26:03 +0100

Before right meta The understanding of the label is only

<meta charset="UTF-8">

And mobile end palatability

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


The meta tag has two attributes: http equiv attribute and name attribute

1. name attribute

The name attribute is mainly used to describe Web pages, such as keywords and descriptions of web pages. The corresponding attribute value is content. The content in content is a specific description of the type filled in by name, which is convenient for search engines to capture.  
The syntax format of the name attribute in the meta tag is:

<meta name="parameter" content="Specific description">

The name attribute has the following parameters. (A-C are common attributes)

A. Keywords

Description: used to tell search engines the keywords of your web page.  
give an example:

<meta name="keywords" content="XX Network, automobile, owner, selection">

B. Description (description of website content)

Description: used to tell search engines the main content of your website.

<meta name="description" content="XX Tens of millions of car owners, XX Tens of millions of online car owners, XX Annual car selection of tens of millions of online car owners, car selection, XX network

C. Viewport (viewport at the mobile end)

Note: this property is often used to design mobile web pages.

Examples (common examples):

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

D. Robots (defines how search engine crawlers are indexed)

Description: robots are used to tell crawlers which pages need index and which pages do not need index.  
The parameters of content include all,none,index,noindex,follow,nofollow. The default is all.

give an example:

<meta name="robots" content="none">

Specific parameters are as follows:

1.none: the search engine will ignore this page, which is equivalent to noindex and nofollow.  
2.noindex: the search engine does not index this page.  
3.nofollow: the search engine will not continue to search other pages through the link index of this page.  
4.all: the search engine will index this page and continue to index links through this page, which is equivalent to index and follow.  
5.index: search engine indexes this page.  
6.follow: the search engine continues to search other pages through the link index of this page.

E. Author (author)

Description: used to label web page author
give an example:

<meta name="author" content="Lxxyx,">

F. Generator (web page making software)

Description: used to indicate what software the web page is made of
For example: (I don't know if I can write it like this):

<meta name="generator" content="Sublime Text3">

G. Copyright

Description: used to mark copyright information
give an example:

<meta name="copyright" content="Lxxyx"> //On behalf of Lxxyx, all rights reserved.

H. Revisit after (search engine crawler revisit time)

Note: if the page is not updated frequently, in order to reduce the pressure of search engine crawlers on the server, you can set a crawler revisit time. If the revisit time is too short, the crawlers will access at the default time they define.  
give an example:

<meta name="revisit-after" content="7 days" >

1. Renderer (dual core browser rendering mode)

Note: renderer is prepared for dual core browsers. It is used to specify how dual core browsers render pages by default. For example, 360 browser.  
give an example:

<meta name="renderer" content="webkit"> //Default webkit kernel
<meta name="renderer" content="ie-comp"> //Default IE compatibility mode
<meta name="renderer" content="ie-stand"> //Default IE standard mode

2. HTTP equiv attribute

HTTP equiv is equivalent to the function of HTTP, such as defining some HTTP parameters.

The syntax format of HTTP equiv attribute in meta tag is:

<meta http-equiv="parameter" content="Specific description">

The HTTP equiv attribute mainly has the following parameters:

A. Content type (set Web page character set) (HTML5 is recommended)

Description: used to set the web page character set to facilitate the browser to parse and render the page
give an example:

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //Old HTML, not recommended

<meta charset="utf-8"> //HTML5 sets the web page character set. UTF-8 is recommended

B. X-ua-compatible (what version of browser is used to render the current page)

Description: used to tell the browser what version to render the page. (it is generally set to the latest mode, which is also common in major frameworks.)  
give an example:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //Specifies that IE and Chrome render the current page with the latest version

C. Cache control (specify the caching mechanism followed by requests and responses)

Usage 1

Description: instruct the browser how to cache a response and how long to cache it. I've been looking for this paragraph on the Internet for a long time, but I haven't found anything satisfactory.  
Finally, I found the answer I wanted in Google Developers.

give an example:

<meta http-equiv="cache-control" content="no-cache">

There are several uses:

No cache: first send a request to confirm with the server whether the resource has been changed. If it has not been changed, the cache will be used.  
No store: caching is not allowed. Go to the server every time and download the complete response. (safety measures)

public: cache all responses, but not required. Because Max age can do the same
Private: cache only for a single user, so no relay is allowed to cache. (for example, CDN does not allow caching of private responses)
maxage: indicates the start of the current request and how long the response can be cached and reused without re requesting from the server. For example, Max age = 60 indicates that the response can be cached and reused for another 60 seconds.  
Reference link: HTTP cache
Usage 2 (Baidu automatic transcoding is prohibited)

Note: it is used to prohibit the current page from being automatically transcoded by Baidu when browsing on the mobile terminal. Although Baidu's original intention is good, the transcoding effect is often unsatisfactory. So you can add the sentence in the example to the head to avoid Baidu automatic transcoding.  
give an example:

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

D. Expires (page expiration time)

Description: used to set the expiration time of web pages. After expiration, web pages must be retransmitted to the server.  
give an example:

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

E. Refresh (automatically refresh and point to a page)

Note: the web page will be automatically refreshed and transferred to the set web address within the set time.  
give an example:

<meta http-equiv="refresh" content="2;URL=http://www.lxxyx. Win / "> / / it means to jump to my blog in 2 seconds

F. Set cookie

Description: if the web page expires. Then local cookies on this web page will be automatically deleted.

<meta http-equiv="Set-Cookie" content="name, date"> //format

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //specific

SEO optimization

<!-- Page title<title>label(head Head must) -->
<title>your title</title>
<!-- Page keywords keywords -->
<meta name="keywords" content="your keywords">
<!-- Page description content description -->
<meta name="description" content="your description">
<!-- Define Web Author author -->
<meta name="author" content="author,email address">
<!-- Define the indexing method of web search engine, robotterms Is a set of English commas「,」The values of segmentation usually have the following values: none,noindex,nofollow,all,index and follow.  -->
<meta name="robots" content="index,follow">
Geographical location marker

<meta name="location" content="province=Hubei;city=Wuhan">
Specify preferences URL,Declare an authoritative web page as the standard version of the copied web page

<link rel="canonical" href="" >
Prohibit Baidu transcoding

<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" /> 
Site adaptation 
[wml|xhtml|html5]Select one of them according to the protocol language of the mobile phone page; url="url" The latter represents the current PC Mobile page corresponding to page URL,The two must be one-to-one correspondence.

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
Web page adaptation

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

applicable-device tagging 
Help Baidu submit the correctness of verification and identification results and reduce Baidu spiders PC Stand as M Stand, or put M Stand as PC Station for grabbing.

<!-- PC station -->
<meta name="applicable-device"content="pc">
<!-- M station -->
<meta name="applicable-device"content="mobile">
<!-- Adaptive or code adaptation -->
<meta name="applicable-device"content="pc,mobile">
<!-- Adaptive site is using Baidu webmaster platform link submission tool sitemp What to do when submitting mobile type Mark, specific value: -->
<mobile:mobile type="pc,mobile"/>
<!-- The values of other pages are as follows: --> 
<mobile:mobile/> : Mobile web page
<mobile:mobile type="mobile"/> : Mobile web page
<mobile:mobile type="htmladapt"/>: Code adaptation
 No such label indicates PC Webpage

Optimized for handheld devices, mainly for some old unrecognized devices viewport Browser, such as BlackBerry

<meta name="HandheldFriendly" content="true">
<!-- Microsoft's old browser -->
<meta name="MobileOptimized" content="320">
<!-- uc Force vertical screen -->
<meta name="screen-orientation" content="portrait">
<!-- QQ Force vertical screen -->
<meta name="x5-orientation" content="portrait">
<!-- UC Force full screen -->
<meta name="full-screen" content="yes">
<!-- QQ Force full screen -->
<meta name="x5-fullscreen" content="true">
<!-- UC Application mode -->
<meta name="browsermode" content="application">
<!-- QQ Application mode -->
<meta name="x5-page-mode" content="app">
<!-- windows phone Click No highlight -->
<meta name="msapplication-tap-highlight" content="no">

in the light of IOS equipment

<!-- this meta The function of is to delete the default Apple toolbar and menu bar. -->
<!-- content "There are two values" yes"And " no",This line is used when we need to display the toolbar and menu bar meta You don't need to add it. The default is display. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- hide the status bar/Set status bar color -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- It is forbidden to convert phone, email and map into clickable. It is on by default. -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<!-- Title added after home screen -->
<meta name="apple-mobile-web-app-title" content="title">
<!-- Add intelligence App Advertising strip Smart App Banner: Tell the browser the corresponding app,And display the download on the page banner(As shown below).  -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argum

Browser adaptation 
Browser kernel control: many domestic browsers have dual cores( webkit and Trident),webkit Kernel high-speed browsing, IE The kernel is compatible with web pages and legacy websites.

<meta name="renderer" content="webkit|ie-comp|ie-stand">

priority of use IE Latest version and Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- about X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- use IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- use IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- use IE8 -->

 <!-- sns Social Tags begin -->
        <!-- Reference microblog API -->
        <meta property="og:type" content="type" />
        <meta property="og:url" content="URL address" />
        <meta property="og:title" content="title" />
        <meta property="og:image" content="picture" />
        <meta property="og:description" content="describe" />
 <!-- sns Social Tags end -->

9,This code is used to set up a browser to prohibit browsers from accessing the contents of the local machine cache. Once the web page is set, it will not be able to follow. Cache Call it up again in.

<meta http-equiv="Pragma" content="no-cache" />
11,This code can force the page to be displayed as an independent page in the current window to prevent your web page from being regarded as a frame Call. Content Options:_blank,_top,_self,_parent

<meta http-equiv="windows-Target" content="_top" />

JD home page Meta set up:

<meta charset="gbk">
<meta name="description" content="JD.COM JD.COM-Professional comprehensive online shopping mall,It sells tens of thousands of brand high-quality commodities such as home appliances, digital communications, computers, home department stores, clothing, mother and baby, books and food.Convenient and honest services provide 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">

Taobao home page Meta set up:

Copy code
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="TaoBao - Asia's largest and safest online trading platform provides all kinds of clothing, beauty, home, digital and telephone charges/Point card recharge... 800 million high-quality special offer commodities, and provide guarantee transactions at the same time(Receipt before payment),First compensation, three or seven days of false one compensation, no reason to return and exchange goods, digital free maintenance and other security transaction guarantee services, so that you can fully enjoy the fun of online shopping!">
<meta name="keyword" content="">
Copy code
youku Homepage Meta set up:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="Youku-China's leading video website,Provide video playback,Video Publishing,Video search - Youku Video" />
<meta name="keywords" content="video,Video sharing,Video search,Video playback,Youku Video" />
<meta name="description" content="Video service platform,Provide video playback,Video Publishing,Video search,Video sharing" />
Betta home page Meta set up:

Copy code
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<name="keywords" content="DOTA2,Live broadcast of popular games,Live game,HD Game Live,Mobile game live broadcast,Live broadcast of E-sports" />
<meta name="description" content="Betta - The national live broadcasting platform provides high-definition, fast and smooth video live broadcasting and game live broadcasting services, including DOTA2 Live broadcast of various popular game events and various famous great god games, rich in content and timely push, bring you different audio-visual experience, everything is in fish fighting - National live broadcasting platform." />
Copy code
 Tencent Homepage Meta set up:

Copy code
<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="News Center factual news channel,Current affairs report">
<meta name="description" content="Tencent News, fact school. News Center,A professional current affairs report portal including current political news, domestic news, international news, social news, current affairs comments, news pictures, news topics, news forums, military, history and">
<meta name="author" content="skeetershi" />
Copy code
 Home page of starting point novel network Meta set up:

Copy code
<meta name="keywords" content="novel,Novel network,Romantic novel,Youth novel,fantasy novels ,martial arts novel,Urban novel,historical novel,Network novel,Original network literature" />
<meta name="description" content="Novel reading,Wonderful novels are all at the starting point. Starting point novels provide fantasy novels,martial arts novel,Original novel,Online game novel,Urban novel,Romantic novel,Youth novel,historical novel,military novel,Online game novel,science fiction,Horror novel,Free reading of the latest chapters of the first novel,Wonderful at the beginning of the novel! ver:071011 Popular novel:. " />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="Copyright on this page Starting point Chinese network all. All Rights Reserved" />
<meta http-equiv="mobile-agent" content="format=wml; url=" /><meta http-equiv="mobile-agent" content="format=xhtml; url=" /><meta http-equiv="mobile-agent" content="format=html5; url=" />
<meta name="application-name" content="Starting point Chinese novel network" /
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="Novel reading_Starting point Chinese novel network|Free novel,fantasy novels ,martial arts novel,Romantic novel,Youth novel,Download all kinds of Novels" />
<meta name="msapplication-task" content="name=Starting point games;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=Hidden bookshelf;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=Reading client;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=Ranking List;action-uri=;icon-uri=" />
<meta name="msapplication-task" content="name=search;action-uri=;icon-uri=" />
<meta property="qc:admins" content="204236767661141166375" />

Topics: Front-end Design Pattern meta