HTML tag meta summary, HTML5 head meta attribute summary

Preface

meta is an auxiliary tag in the head area of html language. Maybe you think these codes are unnecessary. In fact, if you can make good use of meta tags, it will bring you unexpected results. The functions of meta tags include: search engine optimization (SEO), defining the language used by the page, automatically refreshing and pointing to new pages, achieving dynamic effects when converting web pages, controlling page buffering, web page rating and evaluation, controlling the window in which the web page is displayed, etc.!

HTML meta summary

Composition of meta tag: meta tag has two attributes, namely http-equiv attribute and name attribute. Different attributes have different parameter values, and these different parameter values realize different web page functions.

<!DOCTYPE html> <!-- Use HTML5 doctype, case-insensitive -->
<html lang="zh-cmn-Hans"> <!-- A more standard way to write the lang attribute http://zhi.hu/XyIa -->
<head>
    <!-- Declare the character encoding used by the document -->
    <meta charset='utf-8'>
    <!-- Give priority to the latest version of IE and Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- Page Description -->
    <meta name="description" content="No more than 150 characters"/>
    <!-- Page keywords-->
    <meta name="keywords" content=""/>
    <!-- Page Author-->
    <meta name="author" content="name, [email protected]"/>
    <!-- Search Engine Crawl -->
    <meta name="robots" content="index,follow"/>
    <!-- Add viewport for mobile devices -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` will cause a black border to appear when opening the page in WebApp full-screen mode after adding it to the home screen on iPhone 5 upload/2022/web/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone and iTouch, default 57x57 pixels, required -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad, 144x144 pixels, optional but recommended -->
    <!-- iOS Icon end -->
 
    <!-- iOS startup screen begin -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad vertical screen 768 x 1004 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad vertical screen 1536x2008 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad horizontal screen 1024x748 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad horizontal screen 2048x1496 (Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch vertical screen 320x480 (standard resolution) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch vertical screen 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 vertical screen 640x1136 (Retina) -->
    <!-- iOS startup screen end -->
 
    <!-- iOS devices end -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 tile color -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 Tile Icons-->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- Add RSS subscription -->
    <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
    <!-- Add favicon icon -->

    <!-- sns social tag begin -->
    <!-- Refer to Weibo 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="Description" />
    <!-- sns social tag end -->
 
    <title>Title</title>
</head>

Some commonly used meta attributes are given above. The following is an understanding of the use of meta.

1. Name attribute

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

The name attribute syntax of the meta tag is:

<meta name="parameter" content="specific parameter value">.

The name attribute mainly has the following parameters:

A. Keywords

Description: Keywords are used to tell search engines what the keywords of your web page are.

Example:

<meta name="keywords" content="meta summary, html meta, meta attribute, meta jump">

B. description (website content description)

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

Example:

<meta name="description" content="haorooms blog, html meta summary, meta is an auxiliary tag in the head area of html language.">

C. robots (robot guides)

Description: robots are used to tell search robots which pages need to be indexed and which pages do not need to be indexed.

The parameters of content are all, none, index, noindex, follow, and nofollow. The default is all.

Example:

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

The specific parameters are as follows:

The information parameter is all: the files will be retrieved and the links on the page can be queried;

The information parameter is none: the file will not be retrieved, and the links on the page cannot be queried;

The information parameter is index: the file will be retrieved;

The information parameter is follow: the links on the page can be queried;

The information parameter is noindex: the file will not be indexed, but the links on the page can be queried;

The information parameter is nofollow: the file will be retrieved, but the links on the page will not be queried;

D. author

Description: Mark the author of the web page

Example:

<meta name="author" content="root,[email protected]">

E. generator

<meta name="generator" content="Information parameters"/>

The generator information parameter of the meta tag indicates what software was used to create the website.

F. COPYRIGHT

<META NAME="COPYRIGHT"CONTENT="Information parameters">

The COPYRIGHT information parameter of the meta tag represents the copyright information of the website.

G. revisit-after

<META name="revisit-after"CONTENT="7days">

revisit-after means revisiting the website, 7days means 7 days, and so on.

2. http-equiv attribute

As the name suggests, http-equiv is equivalent to the file header of http. It can transmit some useful information back to the browser to help display the content of the web page correctly and accurately. The corresponding attribute value is content. The content in content is actually the variable value of each parameter.

The syntax format of the http-equiv attribute of the meta tag is:

<meta http-equiv="parameter" content="parameter variable value">;

The http-equiv attribute mainly has the following parameters:

A. Expires

Description: Can be used to set the expiration time of a web page. Once a web page expires, it must be retransmitted to the server.

usage:

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">

Note: The time format must be GMT.

B. Pragma (cache mode)

Description: Prevents the browser from accessing page content from the local computer's cache.

usage:

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

Note: With this setting, visitors will not be able to browse offline.

C. Refresh

Description: Automatically refresh and point to a new page.

usage:

<meta http-equiv="Refresh"content="2;URL=https://www.jb51.net"> //(Note the quotation marks at the end, which are before the seconds and after the URL)

Note: The 2 means that it will automatically refresh to the URL after staying for 2 seconds.

D. Set-Cookie (cookie setting)

Note: If the web page expires, the saved cookies will be deleted.

usage:

<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

Note: The time format must be GMT.

E. Window-target (display window settings)

Description: Force the page to be displayed as an independent page in the current window.

usage:

<meta http-equiv="Window-target" content="_top">

Note: Used to prevent others from calling your own pages in the frame.

F. content-Type (display character set settings)

Description: Set the character set used by the page.

usage:

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

The details are as follows:

When the charset parameter of the meta tag is GB2312, it means that the encoding used by the website is simplified Chinese.

When the charset parameter of the meta tag is BIG5, it means that the encoding used by the website is Traditional Chinese.

When the charset parameter of the meta tag is iso-2022-jp, it means that the encoding used by the website is Japanese;

When the charset information parameter of the meta tag is ks_c_5601, it means that the encoding used by the website is Korean;

When the charset parameter of the meta tag is ISO-8859-1, it means that the encoding used by the website is English.

When the charset information parameter of the meta tag is UTF-8, it represents the universal language encoding;

G. content-Language (display language setting)

usage:

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

H. Cache-Control specifies the cache mechanism followed by requests and responses.

Cache-Control specifies the cache mechanism that the request and response follow. Setting Cache-Control in a request or response message does not modify the cache handling of the other message. The cache directives during the request include no-cache, no-store, max-age, max-stale, min-fresh, on
ly-if-cached, the instructions in the response message include public, private, no-cache, no-store, no-transform, must-revalidate, proxy-revalidate, and max-age. The meaning of the instructions in each message is as follows
Public indicates that the response can be cached by any cache
Private indicates that the entire or partial response message for a single user cannot be processed by the shared cache. This allows the server to describe only part of the response message to the current user, which is not valid for other users' requests.
no-cache indicates that the request or response message cannot be cached
no-store is used to prevent important information from being accidentally released. Sending it in a request message will cause both the request and response messages to not use the cache.
max-age indicates that the client can accept responses with an age no greater than the specified time (in seconds).
min-fresh indicates that the client can receive responses whose response time is less than the current time plus the specified time
max-stale indicates that the client can receive response messages beyond the timeout period. If you specify a max-stale message value, the client can receive response messages that exceed the specified timeout period.

J. http-equiv="imagetoolbar"

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

Specifies whether to display the image toolbar. When false, it means it is not displayed, and when true, it means it is displayed.

K. Content-Script-Type

<Meta http-equiv="Content-Script-Type"Content="text/javascript">

W3C web page specification that specifies the type of scripts in a page.

HTML <base> Tag

Specify the default opening method for all links on the page:

For example:

<base target="_self">

All tabs in the specified page are opened on this page!

<<: Preventing SQL injection in web projects

>>: Analysis of log files in the tomcat logs directory (summary)

Nginx rtmp module compilation arm version problem

HTML tag meta summary, HTML5 head meta attribute summary

Nginx rtmp module compilation arm version problem

How to install mysql5.7.24 binary version on Centos 7 and how to solve it

Vue implements infinite loading waterfall flow

Add and delete table information using javascript

Detailed explanation of CSS margin overlap and solution exploration

Using JavaScript difference to implement a comparison tool

Pure CSS meteor shower background sample code

Using Nginx to implement grayscale release

Vue implements a small weather forecast application

How to use ES6 class inheritance to achieve a gorgeous ball effect

Recommend

A brief discussion on MySQL user permission table

Docker time zone issue and data migration issue

Detailed explanation of the principles and usage of MySQL data types and field attributes

Several principles for website product design reference

Summary of some common uses of refs in React

JavaScript drag time drag case detailed explanation

How to write the introduction content of the About page of the website

Vue realizes adding watermark to uploaded pictures (upgraded version)

WeChat applet implements simple calculator function

How to use Greek letters in HTML pages

Detailed explanation of the usage of the alias command under Linux

How to reset Zabbix password (one-step)

How to use the Linux md5sum command

When catalina.bat is set to UTF-8 in Tomcat, garbled characters appear on the console

Detailed explanation of how to use Tomcat Native to improve Tomcat IO efficiency