The
element provides meta information about the page, is placed in the header of the document, and contains no content. Attributes define key/value pairs associated with the document that are not displayed on the page, but are readable to the machine.
Typically, meta elements are used to specify the page description, keywords, author of the document, when it was last modified, etc., and may also contain some information in the header header.
Here are some common uses of meta.
The header head
The most common meta tag is
. There are many similar Settings, such as setting cache, cookie, etc., of course, except charset is rarely used, some have been slowly removed, such as when using set-cookie, Chrome will give warning messages.
After testing, it is found that when the meta and header headers are set at the same time, the header overwrites the information in the meta.
For example, the index.html file is encoded in GBK format:
<html>
<head>
<meta charset="UTF-8"</body> </ HTML >Copy the code
No-referrer requests do not contain the referer header
No-referreer-when is the default, the whole URL(origin, path, queryString) will be sent as the referrer, but will not be sent if the security protocol degrades, like from HTTPS -> HTTP.
Origin to send only the origin information in the URL, https://example.com/page.html, for example, a request header referer: https://example.com/.
Origin-when -cross-origin origin request, which sends the entire URL, is the same as Origin across domains.
Same-origin Sends the referer only for same-origin cases
Strict-origin is similar to Origin, but the protocol cannot be degraded, for example, to request http://b.com or https://.. from http://a.com. Will carry the referer.
Strict-origin-when -cross-origin is similar to origin-when-cross-origin, but the protocol cannot be degraded.
Unsafe-url Sends the full URL in any case.
This test is also very simple, in the local start a server, and then request the following webpage, let the webpage inside to request content, check the request header, such as here, page load regret request A. PNG this picture, set different referrer attribute, carry the referer header information is not the same.
<html><head><metacharset="UTF-8"><metacontent="origin"name="referrer"></head><body><imgsrc="a.png"></body></html>Copy the code
Referrer is used in meta tags and referer is used in HTTP headers. The latter is not a word, it was misspelled at the time of the RFC, it was discovered too late, it was so widely used that the HTTP standard decided to stick with the misspelling, which it still does today. So when you use it, you have to pay attention. Sometimes it’s spelled correctly, sometimes it’s spelled incorrectly.
This meta tag is used to set the browser compatibility mode. This meta tag is a new attribute added to IE8, which is not recognized by other kernel browsers.
IE= Edge, Chrome =1, where IE=edge tells the browser to use the highest version of the current browser to render; Chrome =1 tells the browser that if you have the Google Chrome Frame plugin (GCF) installed, you should keep the IE appearance mode and use the Chrome kernel to render. Note that the plugin supports IE6 to IE9. < IE8 browsers do not support the attributes of the current section, so how to use it? In fact, it is very simple to add GCF: in front of the website, such as GCF :https://baidu.com.
Similarly, there is a
that makes other dual-core browsers switch to zoom mode.
Width =device-width Set the width of the page (viewport) to the same as the width of the device, so that horizontal scrolling does not appear, the user browsing experience will be greatly improved; The latter Settings do not allow the user to scale manually.
Phone detection
<meta name="format-detection" ... >
The following is the setting of tmall home page, which is used to prohibit automatic identification of phone number, date and address. Phone number may be encountered by all of you. On ios, a string of numbers will be automatically linked, and the dialing will be started when you click on it.
The Open Graph Protocol is a social network sharing Protocol developed by Facebook. With the above content, users can share more information and display images to make the content more attractive. Open Facebook, post, type in the link, property=”og:…” Property, something like the following is automatically generated:
Tmall
jingdong
As you can see, if the Open Graph Protocol is not set, Facebook will automatically get the description display in the title and meta, and no image display. In fact, this is just like the self-defined title, link, picture and so on when sharing on wechat, but it can be recognized by Facebook and other websites directly without invoking JS. You can check out the site’s support for the Open Graph Protocol here.
robots SEO
tag was found in the source code of Google’s homepage. According to robots, it is speculated that the search engine crawls robots. After consulting data, sure enough, related to search engine crawler, used to do SEO.
Meta Robots can take the following values
Index allows the page to be indexed by search engines.
Follow allows search engines to crawl all the links on the current page.
Noindex forbids the page from being indexed by search engines.
Nofollow prevents search engines from grabbing links on the current page.
Noarchive does not save a snapshot of the current page in the search results
All equals index, follow, which is the default value.
Noodp does not use summary descriptions of web pages in the open directory.
Noydir does not use summaries of web pages in the Yahoo category.
The last two may not be easy to understand, noodp stands for NO Open Directory Project and noydir stands for NO Yahoo Directory. He two are similar, both can let everyone input the website, summary, record the information of the website, two differences: the former is open, everyone can maintain, the latter is submitted after the audit effect, you can see here.
Some websites will set information in the open directory, causing search engines to display information set in the open directory, which does not match the existing information of the website. Noodp and noydir forbid search engines to use the information in the open directory and use the existing information on the website page.
The last two are not used much domestically.
The public,
advertising
Xi ‘an Juchang hires a large number of Java and Python development engineers, cloud computing department, responsible for openstack, desktop cloud and other related work
