“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

Meta tags are all too familiar to a front-end engineer. When I first learned the front end, I wrote most of the following sentence:

<meta charset="UTF-8" />
Copy the code

But most front-end er’s understanding of meta basically stops there, don’t underestimate it, small tag can achieve big function. In this article, we will take a look at the often neglected meta tags

What is themeta

  • Meta is an auxiliary tag in the HEAD section of THE HTML language. It is located in the header of the document and contains no content. Its attributes define the name/value pairs associated with the document.

  • Meta elements provide meta-information about relevant pages, such as descriptions and keywords for search engines and update frequency.

  • The meta tag has two properties: HTTP-Equiv and NAME. Each of these properties has a different parameter value. These different parameter values enable different web functions.

In almost any web page, we can see HTML code like this:

<head>
  <meta http-equiv="content-Type" content="text/html; charset=gb2312" />
</head>
Copy the code

You may think this code is dispensable. In fact, if you use meta tags well, you can have unexpected effects. For example, when you add keywords, they will be automatically collected by large search sites. You can format the page, refresh it, etc.

metaIn thenameattribute

The name attribute is mainly used to describe web pages, and the corresponding attribute value is content. The content in content is mainly used for search engine robots to find information and classify information.

Syntax for the name attribute of the meta tag:

<meta name="Parameters" content="Specific parameter values" />
Copy the code

The name attribute mainly has the following parameters:

Keywords

Keywords are used to tell search engines what your web page’s keywords are.

<meta name ="keywords" content="Public account, front-end development enthusiasts, front-end technology sharing, video tutorial resources, front-end learning" />
Copy the code

Description (A description of the site’s content)

Description is used to tell search engines what your site is about.

<meta name="description" content="Front-end Development enthusiast is a public account to share front-end technology resources." />
Copy the code

Viewport (Mobile window)

Most front-end engineers would call this viewport, and this property is often used to design mobile web pages, allowing developers to control the size and scaling of the page

  • The meta ViewPort has six attributes:
    • width: Sets the viewport width, the default viewport width
    • height: Sets the viewport height
    • initial-scale: Sets the initial zoom value for the page
    • minimum-scale: The minimum zoom value allowed for the user
    • maximum-scale: Maximum zoom value allowed for the user
    • user-scalable: Indicates whether to allow users to zoom in and out. The value is"no"or"yes"“, “no”, “yes”, “yes”
<meta name="viewport" content="width=device-width, initial-scale=1" />
Copy the code

Robots (indexing methods that define search engine crawlers)

Robots are used to tell crawlers which pages need indexing and which pages do not

<meta name="robots" content="none" />
Copy the code

Content Specific parameters are as follows:

  • none: The search engine will ignore this page, equivalent to noindex, nofollow.
  • noindex: Search engines do not index this page.
  • nofollow: Search engines do not continue to search other pages through the link index of this page.
  • all: The search engine will index the page and continue through the page of the link index, equivalent to index, follow.
  • index: Search engine index this page.
  • follow: Search engines continue to search for other pages through the link index of this page.

The author (the author)

Used to tag page authors

<meta name="author" content="Front-end development enthusiast. Xy." />
Copy the code

Generator (Web page Creation software)

What software is used to indicate the web page is made

<meta name="generator" content="Vscode" />
Copy the code

Copyright (copyright)

Used to mark copyright information

// indicates xy personal copyright<meta name="copyright" content="xy" />
Copy the code

Revisit – After (Search engine crawler revisit time)

If the page is not updated frequently, in order to reduce the pressure of search engine crawler on the server, we can set a crawler revisit time. If the revisit time is too short, the crawlers will visit at the default time they define

<meta name="revisit-after" content="30 days" />
Copy the code

metaIn thehttp-equivattribute

Http-equiv is, as the name suggests, the equivalent of HTTP headers.

It can return some useful information to the browser to help display the content of the web page correctly and accurately, corresponding to the property value of content, content is actually the variable value of each parameter.

The syntax for the HTTP-equiv attribute of the meta tag is:

<meta http-equiv="Parameters" content="Parameter variable value" />
Copy the code

The http-equiv attribute has the following parameters:

Content-type (display character set Settings)

It is used to set the character set of the web page for the browser to parse and render the page

// Old HTML, not recommended<meta http-equiv="content-Type" content="text/html; charset=utf-8" />//HTML5 is recommended to use UTF-8 to set the character set for web pages<meta charset="utf-8">
Copy the code

Expires

This parameter is used to set the expiration time of a web page. After the expiration time, the web page must be retransmitted to the server. The GMT time format must be used.

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

Pragma (cache mode)

Disallow the browser to access the page content from the cache on the local computer, so that visitors cannot view it offline.

<meta http-equiv="Pragma" content="no-cache" />
Copy the code

Refresh

The web page will automatically refresh and redirect to the specified url within the specified time

// 2s refresh jumps to Baidu<meta http-equiv="refresh" content="2; URL=https://www.baidu.com/" />
Copy the code

Set the Set – cookies (cookies)

If a web page expires, cookies that exist locally in the web page are automatically deleted

<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/" />
Copy the code

Window-target (display Window Settings)

Forces the page to appear as a separate page in the current window

<meta http-equiv="Window-target" content="_top" />
Copy the code

Content-language (Display Language Settings)

<meta http-equiv="Content-Language" content="zh-cn" />
Copy the code

Imagetoolbar (imagetoolbar)

Specifies whether to display the image toolbar. False indicates no display and true indicates display.

<meta http-equiv="imagetoolbar" content="false" />
Copy the code

Meta Animation effects

When it comes to animation, most people will think of CSS3 animation and using JS, Canvas, etc. Would you believe me if I told you that meta can also achieve animation effects??

Using meta tags, we can also animate the page as soon as we enter the page or leave the page, just by in the HTML code of the page; Add the following code between the tags:

<meta http-equiv="Page-Enter" content="RevealTrans (20) duration = 5.0, the transition =" />
Copy the code

Once the code has been added to a page, we will see some special effects as we enter and exit the page, but be careful not to add a Frame page

Page-Enter, Page-Exit, Site-Enter and Site-Exit, as shown in the following code:

<meta http-equiv="Page-Enter" content="Transition effect on entry." />
<meta http-equiv="Page-Exit"  content="Transition effect on exit." />
<meta http-equiv="Site-Enter" content="Transition effect on entry." />
<meta http-equiv="Site-Exit"  content="Transition effect on exit." />
Copy the code

Content attribute value:

  • BlendTrans (Duration = number of seconds): If used in the page is a fade in transition effect; If used to fade out when exiting the page, you can only set the duration of the transition in seconds
  • Revealtrans (duration= seconds of transition duration, transition= type of transition effect): duration: Sets the transition duration in seconds, and transition sets the type of transition to use. There are 24 types of transition effects.

24 overeffects:

  • transitionThe value is0—23, numbers start at 0 and end at 23. One is 24 transition effects, each number corresponds to a transition effect

Examples of usage:

<meta http-equiv="Page-Enter" content="BlendTrans (Duration = 1.0)" />
Copy the code

The above Settings are page-Enter transition effect, so, is the fade transition effect into the web Page.

<meta http-equiv="Page-Enter" content="Revealtrans (duration = 2, the transition = 0"/>
Copy the code

Duration =2 transition=0, duration=2, duration=2

For example, if you use the rectangle expansion effect, you just need to set the transition=1, because the number 1 represents the rectangle expansion effect, and the code looks like this:

<meta http-equiv="Page-Enter" content="Revealtrans (duration = 2, the transition = 1"/>
Copy the code

You can also use the circle shrink transition effect, which corresponds to the number 2, with the following code:

<meta http-equiv="Page-Enter" content="Revealtrans (duration = 2, the transition = 2"/>
Copy the code

And so on, whatever transition effect you want to set, just set the corresponding value.

Write in the last

Public number: front-end development enthusiasts focus on sharing web front-end related technical articles, video tutorial resources, hot information, etc., if you like my share, to 🐟🐟 point a like 👍 or ➕ attention is my biggest support.