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

HTML page jump passing parameter problem

The effect is as follows: a page After clicking t...

MySQL Workbench download and use tutorial detailed explanation

1. Download MySQL Workbench Workbench is a graphi...

jQuery plugin to implement minesweeper game (1)

This article shares the specific code of the firs...

Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]

This article describes the MySQL single table que...

Does MySql need to commit?

Whether MySQL needs to commit when performing ope...

When to use table and when to use CSS (experience sharing)

The main text page of TW used to have a width of 8...

Front-end JavaScript housekeeper package.json

Table of contents 1. Required attributes 1. name ...

Podman boots up the container automatically and compares it with Docker

Table of contents 1. Introduction to podman 2. Ad...

JavaScript to add and delete messages on the message board

This article shares a small example of adding and...

Vue implements drag and drop or click to upload pictures

This article shares the specific code of Vue to a...

Two ways to implement text stroke in CSS3 (summary)

question Recently I encountered a requirement to ...

CSS3 realizes the mask barrage function

Recently I saw a barrage effect on B station call...

Vue2 cube-ui time selector detailed explanation

Table of contents Preface 1. Demand and Effect ne...

Analysis of the reasons why the index does not take effect when searching in the MySql range

1 Problem Description This article sorts the esta...

Why are the pictures on mobile web apps not clear and very blurry?

Why? The simplest way to put it is that pixels are...