Examples of some usage tips for META tags in HTML

Examples of some usage tips for META tags in HTML

HTML meta tag

HTML meta tags can be used to provide information about the content of a web page to browsers or search engines. For example, the description of the content of the web page, important keywords of the web page, and the web page code are all web page information commonly marked by meta. In addition, less important information such as the author of the web page, the time when the web page was published, and the editor used can also be marked through META TAG. The function of META is only to indicate this web page information and provide it to browsers or search engines. It is not content written for "people" who browse the web page.

HTML meta tag written in head example

XML/HTML CodeCopy content to clipboard
  1. < head >   
  2. < title > Test Web Page </ title >   
  3. < meta   name = "description"   content = "Here is a brief description of the page" >   
  4. < meta   name = "keywords"   content = "Keyword 1,Keyword 2" >   
  5. </ head >    

The standard <meta> tag has no ending. You can directly write the parameters in the <meta> tag. A web page can have many different <meta> tags, all of which must be written in the head tag. The title tag in the example is used to indicate the title of the web page. It can be written before or after the <meta> tag.

1. Display and arrange Chinese characters

XML/HTML CodeCopy content to clipboard
  1. < META   http-equiv = "Content-Type"   content = "text/html; charset=big5" >   

illustrate:
Content-Type==>File content format
;==>Everything to be done in CONTENT" " is separated by semicolons
text/html ==> plain text/hypertext
charset==> character set is Chinese Traditional Big 5, such as iso-2022-jp for Japanese


2. Make it easy for search engines to find you

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "KeyWords"   CONTENT = "Computer teaching, Internet teaching, Linux teaching, CSS teaching, HTML teaching, software teaching, email teaching, SEO teaching, link exchange" >   
  2. < META   NAME = "KeyWords"   CONTENT = "css'HomePage'html'linux'seo" >   

Note: Keywords in the webpage text can be in Chinese or English


3. About the content description of the website

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "Description"   CONTENT = "This is a good place to learn web design for free, Network Institute" >   

Description: Description==>Main description of the content


4. Who is the author of this page?

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "Author"   CONTENT = "PCNET" >   

Description: Mark the author's name and other information of this webpage


5. Which editor is used to complete this webpage?

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "Generator"   CONTENT = "Mozilla/3.0Gold(Win95)[Netscape]" >   

illustrate:
Mark the author's name and other information of this webpage
Generator ==> Editor
Mozilla/3.0Gold(Win95)[Netscape]==>Editor and other version notes


6. When will this webpage be completed?

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "Creation-Date"   CONTENT = "01-jan-2003 20:40:01" >   

illustrate:
Creation-Date==>Creation Date
01-jan-2003 20:40:01 ==> Detailed date and time


7. The validity period of this webpage is not limited by cache

XML/HTML CodeCopy content to clipboard
  1. < META   NAME = "Expired"   CONTENT = "01-jan-2005 00:00:00" >   
  2. < META   HTTP-EQUIV = "Pragma"   CONTENT = "no_cache" >   

illustrate:
Expired==>Webpage expiration date
01-jan-2005 00:00:00 ==> a date and time in the past. You can also use Mon,12 Jan 2007 00:00:00 GMT
no_cache==>Not restricted by Cache, that is, the web page has no memory function.


8. Website and email address of the webpage author

XML/HTML CodeCopy content to clipboard
  1. < link   rev = "made"   href = "mailto:[email protected]" >   
  2. < link   rev = "made"   href = "http://www.pcnet.idv.tw/" >   

Description: Web page author's email or URL statement
rev==> positive association
made=>Webpage maker
href==>your email or website


9. Enable automatic page switching

XML/HTML CodeCopy content to clipboard
  1. < META   HTTP-EQUIV = "refresh"   CONTENT = "15; url = http://www.pcnet.idv.tw/" >   

illustrate:
refresh==>update or reorganize
15==>Execute the next action after 15 seconds
;==>Everything to be done in CONTENT" " is separated by semicolons
url=http://www.pcnet.idv.tw/==>Specify the conversion to this web page


10. Special effects of entering or leaving (only for IE)

XML/HTML CodeCopy content to clipboard
  1. < META   http-equiv = "Specify the situation where the page change effect occurs"   content = "Special Effect Mode (Duration=Special Effect Duration, Transition=Replaced Special Effect)" >   

illustrate:
http-equiv="Page-Enter is to enter this page, Page-Exit is to leave this page, Site-Enter is to enter this site, Site-Exit is to leave this site".
content="revealTrans (specify the page-changing effect), blendTrans (set the page-changing effect to "blended").
Duration=Set the duration of the special effect (in seconds), recommended to be between 3-5 seconds.
Transition=Replace special effects with 0-23 (omitted).


Note:

It must be placed between <HEAD> and </HEAD> and is mainly used to describe the content of this web page for the benefit of yourself or others (search engines). It can also create some special effects such as automatic page turning.
The http-equiv or NAME attribute must be used together with the content attribute, but the two can also be used interchangeably.
The usage of the META description tag varies depending on the settings of each search engine.
The presence or absence of Meta tags does not affect the normal display of the web page. Its main purpose is to provide various information on the web page and produce special effects.
For web page use, it is recommended to use the tags 1.2.3.4.8 described on this page as the main tags, and add or remove the rest as needed.
You can use the View Source code to see the actual arrangement of this example.
For more reporting information, please visit the lecturer's (author's) website.

<<:  Turn web pages into black and white (compatible with Google, Firefox, IE and other browsers)

>>:  Detailed explanation of three commonly used web effects in JavaScript

Recommend

How to install mysql5.7 in windows

First download the compressed version of mysql, t...

Using vue3+threejs to imitate the iView official website big wave special effects example

Table of contents Preface 1. Rendering 2. Code 3....

Learn the black technology of union all usage in MySQL 5.7 in 5 minutes

Performance of union all in MySQL 5.6 Part 1:MySQ...

A brief discussion on how Tomcat breaks the parent delegation mechanism

Table of contents JVM Class Loader Tomcat class l...

Index in MySQL

Preface Let's get straight to the point. The ...

Python MySQL database table modification and query

Python connects to MySQL to modify and query data...

Reasons why MySQL cancelled Query Cache

MySQL previously had a query cache, Query Cache. ...

The process of building a Jenkins project under Linux (taking CentOS 7 as an example)

Take the deployment of https://gitee.com/tengge1/...

WeChat applet implements waterfall flow paging scrolling loading

This article shares the specific code for WeChat ...

Solution to the problem of Windows Server 2008 r2 server automatically restarting for no reason

Windows Server 2008 server automatically restarts...

Linux dual network card binding script method example

In Linux operation and configuration work, dual n...

HTML uses canvas to implement bullet screen function

Introduction Recently, I needed to make a barrage...

9 super practical CSS tips to help designers and developers

A web designer's head must be filled with a lo...

How to query whether the mysql table is locked

Specific method: (Recommended tutorial: MySQL dat...

Summary of Docker configuration container location and tips

Tips for using Docker 1. Clean up all stopped doc...