A collection of common uses of HTML meta tags

The mata tag written in the head of the Web may seem inconspicuous, but in fact it can set up a variety of functions, including page encoding and other important settings. Here we will summarize the common usage of HTML meta tags:

What is mata tag
element can provide meta-information about the page (meta-information), such as description and keywords for search engines and update frequency. The
tag is located at the head of the document and does not contain any content. The tag's properties define the name/value pairs associated with the document.
meta is an auxiliary tag in the head area of ​​html language. We can see meta tags in almost all web pages, but they cannot be seen in the browser's display page. Maybe you think these codes are dispensable. In fact, the meta tag is very important and will bring practical effects to your website. For example, the website description () will be reflected in the search engine index. For example, use the meta tag to set the encoding of the website to gbk2312 or utf-8. The meta tag setting key Words

Basic Syntax

XML/HTML CodeCopy content to clipboard

<meta name="keywords" content="Keyword 1, Keyword 2, Keyword 3....">

The function of the keyword tag is to tell the search engine what the content of the website is about, so as to facilitate the search engine to define and index the website. Keywords and keywords are separated by commas under the English input method. Keywords The length generally does not exceed 100 characters.
For example, our website is a website about learning web development technology. The keyword description can be written like this:

##XML /HTML CodeCopy content to clipboard

#<

meta name="keywords" content="html tutorial, css tutorial, javascript tutorial">

When users search for these keywords in search engines, your website will appear in the results. However, because many cheaters (black hat SEO) in the early days were prone to keyword stuffing cheats, now The search engine (Baidu) is no longer so sensitive to keywords.

meta tag setting description

Grammar format:

##XML/HTML Code

Copy content to clipboard

##<

meta

name=“discription” content=“Content of description”> ## The description of the web page is very important and can be directly reflected in the search engine. For example, open the Baidu website and search for "Sina" to see the following page

meta tag setting character set

Grammar format :

##XML/HTML Code

Copy content to clipboard

<

meta

http-equiv

= “content-type” content=”text/html; charset="Encoding format"> Common encoding formats include Chinese encoding (gbk2312) and international encoding (UTF-8), gbk2312 It is a Chinese encoding. If your website content is all in Chinese, use gbk2312. UTF-8 is a universal encoding for texts around the world (including Chinese and English). The main difference between them is that gbk2312 is specially built for Chinese, and one Chinese character occupies 2 characters. UTF-8 is a universal Chinese character that occupies 3 bytes. In the early days, network bandwidth resources were scarce, so using gbk2312 encoding can save bandwidth and improve the opening speed of web pages. However, now our home bandwidth is 4M or more and completely ignores the savings. Those bytes. Example:

XML/HTML Code

Copy content to clipboard

<meta http-equiv="Content-Type" content= "text/html; charset=utf-8" >

When we browse the web, most of us encounter I have seen garbled pages. The encoding format is to let the browser parse in the set editing format. If the encoding format is incorrect, garbled characters will appear. So I recommend using the universal UTF-8 encoding so that all browsers around the world can access it. Our web pages can be displayed normally.

meta tag sets automatic refresh time
Syntax format

XML/HTML CodeCopy content to clipboard

#<meta http-equiv=“refresh” content=“Refresh interval time”>

Refresh time In seconds, for example, the forum page can only see new posts after refreshing. Pages that update quickly like this can add automatic refresh code to ensure that the latest page can be seen.

Example:

XML/HTML CodeCopy content to clipboard

<meta http-equiv=“refresh” content=“3”>

Here we demonstrate setting the time to 3 seconds, please test it yourself.

##meta tag setting to automatically jump to a new page

Syntax Format

XML/HTML Code

Copy content to clipboard

<

meta http-equiv=“refresh” content=“The number of seconds between jumps; Url ="New web page address">

Example:

##XML/HTML Code

Copy content to clipboard

##<

meta

http-equiv=“refresh” content=“3; Url="http://www.adminwang.com”>

When the browser opens this page, it will automatically jump to the homepage of our website after 3 seconds.

meta tag setting is disabled Cache

Syntax format

XML/HTML Code

Copy content to clipboard

##<

meta

http-equiv="cache-control" content ="no-cache" /> We know that browsers have a caching mechanism, that is Opening a web page will automatically save it locally. The purpose of this is to directly call the file in the cache when accessing it again within a certain period of time to improve the access speed. But for pages that change from time to time like forums, we don’t want the browser to save cache files. Above this code. There is another use in program development. When debugging a program, you need to always check the effect of code modifications. You can use this code to disable browser caching. Another way to write:

XML/HTML Code

Copy content to clipboard

##<

meta

http-equiv

="pragma" content="no-cache" > ; For more relevant articles on common usages of HTML meta tags, please pay attention to the PHP Chinese website!