preface

Open VSCode, type HTML :5, press TAB, and a basic HTML structure comes out, without ever noticing the meaning of some of the elements. Today we’ll summarize these important but obscure elements: the tag meta.

Various meta meanings in head

First of all, what are the meta elements for? See w3schools in English

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

The
element tag provides metadata about the HTML document that is not displayed on the page, but can be recognized by the machine.

All in all, meta tags are for machine recognition, and they play an important role in SEO.

charset

Specifies the encoding format for HTML documents. Commonly used are UTF-8 (Unicode character encoding) and ISO-8859-1(Latin character encoding). There are others, of course, but they are not commonly used and I will not introduce them

<meta charset="utf-8">
Copy the code

name & content

Specify the name of the metadata (this part is very useful for SEO)

author— defines the author of the page

<meta name="author" content="Tony">
Copy the code

keywordsProvide keywords for search engines

<meta name="keywords" content="HTML, CSS, JavaScript">
Copy the code

description— A general description of the web page

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">
Copy the code

viewportDefine page view dependencies

  • width=device-width— Set the page width to match the screen width
  • Initial - scale = 1.0— Set the initial zoom for the first time the browser loads the page (0.0-10.0 positive)
  • Maximum - scale = 1.0— The maximum scale that allows the user to zoom (0.0-10.0 positive) must be greater than or equal tominimum-scale
  • Minimum - scale = 1.0— The minimum scale that allows the user to zoom (0.0-10.0 positive), must be less than or equal tomaximum-scale
  • user-scalable=no— Allow users to scale manually (yes or no)
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, minmum - scale = 1.0">
Copy the code

generatorContains the identifier of the software that generated the page

which contains the identifier of the software that generated the page.

<meta name="generator" content="Hexo 3.8.0." ">
Copy the code

theme-colorDefine theme colors

<meta name="theme-color" content="# 222">
Copy the code

http-equiv & content

Provides an HTTP header for the information/value of the content attribute

refresh— Refresh the document every 30 seconds

<meta http-equiv="refresh" content="30">
Copy the code

X-UA-CompatibleTell the browser which version to render the interface. The following example uses the latest version of Internet Explorer only

<meta http-equiv="X-UA-Compatible" content="ie=edge">
Copy the code

There is some debate on Stack Overflow about whether this is necessary. Personally, if you don’t want to be compatible with older versions of IE, you can simply ignore this clause.

Cache-ControlRequest and response follow the caching mechanism, can declare the cache content, modify the expiration time, can be declared more than once

  • no-transformNo conversion or transformation of resources is allowed.
  • no-siteapp— Baidu is prohibited from transcoding
<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
Copy the code

Why am I introducing these two? Because my blog exists in head, I checked the reason, as mentioned before, this is for Baidu transcoding. See github issue for details

For more information, see MDN

property & content

You can make a web page a rich media object, allow web content to be referenced by other sites, and at the same time when the application is not just a link, it will extract the corresponding information to show the user.

<meta property="og:type" content="website">
<meta property="og:url" content="https://zjgyb.github.io/index.html">
<meta property="og:site_name" content="tony's blog">
Copy the code

See The Open Graph Protocal for details

conclusion

I’ve just summarized some of the most common meta tags, but I’ll leave the rest of the less common meta tags out for the time being. At last we have some understanding.

Refer to the tutorial

  • w3school
  • MDN-meta
  • Net web tutorial
  • Segmentfault -Lxxyx Development Notes
  • MDN-Cache-Control
  • The first screen images