HTML

Sử dụng thẻ Meta trong HTML

nguyen.le , 15 min read

Giới thiệu nội dung bài viết

Những kiến thức về thẻ meta trong lập trình web HTML sẽ được trình bày tóm gọn lại trong bài viết. Từ việc giúp bạn hiểu được thẻ meta trong HTML là gì? Mục đích sử dụng thẻ meta đối với người học lập trình web? Đồng thời hướng dẫn bạn các cách thao tác với thẻ meta trong lập trình web HTML như chuyển hướng trang tới một trang web khác, thêm author hay thiết lập mã hoá ký tự cho website.


Hi vọng với những chia sẻ dưới đây, các bạn sẽ hiểu được vai trò quan trọng của thẻ meta trong lập trình web HTML và biết cách sử dụng thẻ meta tối ưu nhất để mang lại hiệu quả cho quá trình làm các dự án lập trình web hơn nữa.

1. Thẻ meta trong lập trình web HTML

Chúng ta sử dụng thẻ meta để thêm các thông tin mô tả cho trang web. Thông thường các trang web sử dụng thẻ meta để tăng thứ hạng SEO trong google. Nó là một tiêu chí để google có thể hiểu rõ về website của mình.

Thẻ meta được khai báo trong thẻ head. Nó gồm có các thuộc tính name, content, schema và http-equiv.

2. Mô tả từ khóa chính về trang web

Chúng ta sử dụng thẻ meta để chỉ ra những từ khoá nào là quan trọng mà website chúng ta đang làm về nó. Điều này giúp google có thể đánh index lại. Chúng ta sử dụng thuộc tính keyword như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>
  • content : chính là các từ khoá mà website chúng ta đang làm. Ví dụ như làm về các website du lịch thì content sẽ chứa đựng các từ khoá về du lịch.

3. Mô tả về nội dung trang web

Chúng ta dùng description để mô tả nội dung website mình làm về cái gì.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

4. Mô tả thời gian cập nhật trang web

Chúng ta dùng revised để mô tả thời gian nội dung website được cập nhật.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

5. Làm mới lại trang web

Chúng ta có thể cấu hình để trang web tự động refresh (làm mới) sau một khoản thời gian bằng thuộc tính refresh như sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

6. Chuyển hướng trang tới một trang web khác

Chúng ta có thể thiết lập trang web sau một khoản thời gian cố định nó sẽ chuyển qua một trang web khác bằng cách thêm thuộc tính content và đường link trang web khác như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

7. Thêm author cho website

Chúng ta sử dụng thuộc tính author để thêm tên mà người làm ra trang web như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

8. Thiết lập mã hoá ký tự cho website

Chúng ta có thể sử dụng bảng mã UTF8 để viết tiếng Việt hoặc đối với các ngôn ngữ khác như Campuchia hay Thailand thì dùng bảng chữ cái khác. Bằng cách set thuộc tính charset như sau. Trong ví dụ này ta dùng UTF-8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>
  • Ví dụ như viết chữ Trung Quốc thì ta dùng charset Big5 như sau
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

9. Video Demo

10. Thực hành online và source code

Sourcecode

Sourcecode

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments