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

Analyze MySQL replication and tuning principles and methods

1. Introduction MySQL comes with a replication so...

A brief analysis of the four import methods and priorities in CSS

First: 4 ways to introduce CSS There are four way...

Three ways to configure JNDI data source in Tomcat

In my past work, the development server was gener...

Node+socket realizes simple chat room function

This article shares the specific code of node+soc...

How to filter out certain libraries during mysql full backup

Use the --all-database parameter when performing ...

Example code for implementing triangles and arrows through CSS borders

1. CSS Box Model The box includes: margin, border...

Explanation of Linux kernel optimization configuration for high-concurrency nginx server

Since the default Linux kernel parameters are bas...

Detailed explanation of how to use the Vue date time picker component

This article example shares the specific code of ...

How to connect to Alibaba Cloud Ubuntu 16.04 server from local Windows remote desktop

Local Windows remote desktop connects to Alibaba ...

Use of TypeScript Generics

Table of contents 1. Easy to use 2. Using generic...

Implementation of Vue large file upload and breakpoint resumable upload

Table of contents 2 solutions for file upload Bas...

SQL insert into statement writing method explanation

Method 1: INSERT INTO t1(field1,field2) VALUE(v00...

Detailed explanation of JavaScript progress management

Table of contents Preface question principle test...

Explanation of nginx load balancing and reverse proxy

Table of contents Load Balancing Load balancing c...

A brief understanding of the relevant locks in MySQL

This article is mainly to take you to quickly und...