Kết nối

Những thẻ meta mà bất kỳ trang web nào cũng cần phải có

6.448 lượt xem 
 
Thể loại: Thiết kế Web 

Thẻ meta cung cấp một tập dữ liệu chứa thông tin về tài liệu HTML như mô tả trang, từ khóa, tác giả, nhãn thời gian lần cuối chỉnh sửa nội dung trang và nhiều thông tin đáng lưu ý khác. Mặc dù các thông tin này không được hiển thị trên giao diện website, nhưng chúng lại có ý nghĩa rất quan trọng với các cơ chế tìm kiếm (robot), điển hình như Google, Bing, Yahoo, Baidu, Yandex hay Coccoc và thậm chí cả người dùng. Tên thẻ meta không phân biệt hoa thường, vì vậy thẻ DESCRIPTION cũng tương đương với thẻ meta description.

Đối với bất kỳ Webmaster, bạn bắt buộc phải biết đến một số thẻ meta cần thiết để triển khai cho các website trên môi trường Internet.

Vị trí thẻ meta

Thẻ meta chắc chắn phải nằm trong phần tử head của một trang web để mô tả các thông tin về trang web đó. Ví dụ sau cho bạn thấy rõ một số thẻ cơ bản nằm trong phần tử head.

<!DOCTYPE html>
<html>
<head>
  <title>Tiêu đề Web --- DAMMIO.COM</title>
  <meta charset="UTF-8">
  <meta name="description" content="Nội dung mô tả website">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript,PHP,ASP.NET,C#,TOEIC,TOEFL iBT">
  <meta name="author" content="Danmio">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<p>Nội dung trang web ở đây --- dammio.com</p>

</body>
</html>

Số lượng thẻ meta

Bàn về số lượng thẻ meta thì số lượng kết quả có thể làm bạn khá bối rối khi chọn lựa thẻ nào áp dụng cho website. Theo thống kê của DAMMIO, tính đến tháng 11 năm 2018 thì có 716 thẻ meta được tổ chức WHATWG công nhận, 46 thẻ meta chưa đạt được tiêu chuẩn đăng ký và có 6 thẻ không được công nhận. Nếu sử dụng thuộc tính http-equiv áp dụng cho một thẻ meta thì được gọi là một chỉ thị pragma. Chúng ta có 7 chỉ thị pragma gồm content-language, content-type, default-style, refresh, set-cookie, x-ua-compatible và content-security-policy.

Các thẻ meta cần có ở trang web

Với số lượng meta quá lớn thì tất nhiên bạn không thể nào áp dụng hết “tất tần tật” các thẻ cho website. Tổ chức W3 liệt kê 5 thẻ meta tiêu chuẩn đó application-name, author, description, generator, và keywords. Tuy nhiên, theo chúng tôi, bạn chỉ nên áp dụng các thẻ meta sau cho website.

Thẻ meta khai báo nội dung tiếng Việt

Nếu bạn muốn khai báo website có nội dung tiếng Việt, bạn có thể chọn 1 trong 2 cách khai báo sau.

<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

Thẻ title và favicon

Thẻ title không được xem là một thẻ meta, nhưng nó lại có ý nghĩa với SEO và độc giả. Thẻ title hiển thị nội dung ở tiêu đề thanh Tab giúp người dùng nhận diện nhanh nội dung website của bạn. Bên cạnh nội dung thẻ title chính là favicon, một logo thu nhỏ của website giúp người dùng có thể nhận diện ra website của bạn. Favicon được thể hiện bằng thẻ link với thuộc tính rel là icon và href chứa đường dẫn hình ảnh icon của bạn.

Tiêu đề và favicon website DAMMIO ở khung màu cam.
<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>

<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Thẻ meta description

Có lẽ đây là một trong những thẻ meta quan trọng mà bạn bắt buộc phải dùng. Thẻ này chứa mô tả ngắn về nội dung website, không nên dài quá 160 ký tự và chỉ sử dụng 1 lần thẻ này trong trang web. Đoạn mô tả về website của bạn nên mang tính mạch lạc, nội dung rõ ràng, dễ hiểu, không trùng lặp hay sử dụng ký tự lạ quá nhiều. Hãy xét ví dụ sau để bạn có thể thấy cách trình bày thẻ meta description.

<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<meta name="description" content="Chuyên trang thiết kế web, lập trình web, tin học cơ bản, tin tức công nghệ và chứng chỉ tiếng Anh quốc tế" />

<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>

<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Thẻ meta keywords

Thẻ meta keywords chứa tập các từ khóa mô tả chung về website được trình bày thành một chuỗi dài tách nhau bằng dấu phẩy.

<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<meta name="description" content="Chuyên trang thiết kế web, lập trình web, tin học cơ bản, tin tức công nghệ và chứng chỉ tiếng Anh quốc tế" />
<meta name="keywords" content="lập trình web,thiết kế web,HTML,JavaScript,Boostrap,JQuery,PHP,ASP.NET, TOEIC,IELTS,TOEFL iBT">

<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>

<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Nhiều cơ chế tìm kiếm, trong đó có Google không sử dụng nội dung thẻ meta keywords trong các thuật toán xếp hạng website. Lý do chính là do nhiều webmaster lạm dụng thẻ meta keywords để chèn từ khóa quá nhiều khiến nhiều website bị đánh dấu là spam.

Theo chúng tôi, thẻ meta keywords không có tác dụng gì với SEO vì vậy không cần phải sử dụng. Bạn có thể chú ý hiện nay vẫn còn rất nhiều website sử dụng và một số website báo chí thì sử dụng thẻ thay thế đó là thẻ meta news_keywords.

Liên quan:  Các mẫu trang admin đẹp nhất năm 2018

Thẻ meta author

Thẻ này chứa giá trị tên tác giả của trang web. Thông thường, nhiều website để tên tác giả chính là tên của website đó. Ví dụ, website dammio.com thì để tên tác giả là “dammio”.

<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<meta name="description" content="Chuyên trang thiết kế web, lập trình web, tin học cơ bản, tin tức công nghệ và chứng chỉ tiếng Anh quốc tế" />
<meta name="keywords" content="lập trình web,thiết kế web,HTML,JavaScript,Boostrap,JQuery,PHP,ASP.NET, TOEIC,IELTS,TOEFL iBT">
<meta name="author" content="Dammio" />

<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>

<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Thẻ meta viewport

Viewport (hay còn gọi là cổng nhìn) là vùng trang web mà người dùng có thể thấy trên giao diện. Vùng này khác nhau trên các thiết bị, có diện tích nhỏ hơn ở mobile so với màn hình máy tính. Thẻ meta viewport dùng để định nghĩa vùng cổng nhìn cho trang web.

<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<meta name="description" content="Chuyên trang thiết kế web, lập trình web, tin học cơ bản, tin tức công nghệ và chứng chỉ tiếng Anh quốc tế" />
<meta name="keywords" content="lập trình web,thiết kế web,HTML,JavaScript,Boostrap,JQuery,PHP,ASP.NET, TOEIC,IELTS,TOEFL iBT">
<meta name="author" content="Dammio" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>
 
<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Trong thẻ này, bạn có thể thấy thuộc tính width có giá device-width (width=device-width), tức là thiết lập độ rộng trang theo kích thước màn hình của thiết bị. Thuộc tính initial-scale thiết lập độ phóng (zoom) khi trang lần đầu được tải. Nếu initial-scale=1.0, tức là độ phóng là 100%.

Nhóm thẻ bản quyền Dublin Core

Nếu website của bạn là tờ báo điện tử hay nhà xuất bản thì bạn áp dụng nhóm thẻ bản quyền Dublin Core để đánh dấu bản quyền. Sau đây là bảng chứa các thẻ meta bản quyền.

  • DC.TITLE
  • DC.CREATOR
  • DC.SUBJECT
  • DC.DESCRIPTION
  • DC.PUBLISHER
  • DC.CONTRIBUTORS
  • DC.DATE
  • DC.TYPE
  • DC.FORMAT
  • DC.IDENTIFIER
  • DC.SOURCE
  • DC.LANGUAGE
  • DC.RELATION
  • DC.COVERAGE
  • DC.RIGHTS

Sau đây là ví dụ cách sử dụng một số thẻ meta DC.

<!DOCTYPE html>
<html>
<head>
<title>Kiến thức công nghệ và ngôn ngữ</title>
<meta name="description" content="Chuyên trang thiết kế web, lập trình web, tin học cơ bản, tin tức công nghệ và chứng chỉ tiếng Anh quốc tế" />
<meta name="keywords" content="lập trình web,thiết kế web,HTML,JavaScript,Boostrap,JQuery,PHP,ASP.NET, TOEIC,IELTS,TOEFL iBT">
<meta name="author" content="Dammio" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="DC.description" lang="vi" content="Mô tả bản quyền nội dung ở đây.">
<meta name="DC.publisher" content="Dammio" />
<meta name="DC.rights" content="/terms-of-use.htm">
<meta name="DC.creator" content="Dammio">
<meta name="DC.language" content="vi-VN" />

<link rel="icon" href="https://www.dammio.com/wp-content/uploads/2017/08/cropped-dammio_icon-32x32.png" sizes="32x32" />
</head>
 
<body>
<p>Nội dung trang web --- dammio.com
</body>
</html>

Nhóm thẻ meta mạng xã hội

Nếu website của bạn có liên kết với trang Twitter, bạn cũng có thể sử dụng nhóm thẻ meta Twitter như ở đây.

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Kết nối công nghệ và ngôn ngữ" />
<meta name="twitter:description" content="Lập trình web, thiết kế web, học lập trình, học thiết kế web, dạy lập trình, PHP, C#, ASP.NET, tiếng Anh, English, TOEIC, TOEFL, IELTS, MVC, HTML, Bootstrap" />
<meta name="twitter:image" content="https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png" />

Nếu bạn chia sẻ nội dung website thông qua các URL trên Facebook thì bạn nên chú ý hơn một số thẻ meta og (Open Graph) giúp tùy chỉnh cách đường dẫn URL từ website của bạn hiển thị trên Facebook. Bạn có thể tham khảo thêm ở đây.

<meta property="og:title" content="Kết nối công nghệ và ngôn ngữ" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.dammio.com/" />
<meta property="og:image" content="https://www.dammio.com/wp-content/uploads/2016/11/no-image-410x260.png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:site_name" content="Dammio" />

Ngoài ra, còn rất nhiều thẻ meta khác mà bạn có thể dùng cho việc khai báo thông tin website. Việc sử dụng thẻ meta nào là tùy theo yêu cầu của từng nội dung website. Bạn chỉ cần lưu ý nếu lạm dụng quá nhiều meta có thể khiến dung lượng trang của bạn phình to ra và chưa chắc đã mang lại hiệu quả nhất với SEO.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). Những thẻ meta mà bất kỳ trang web nào cũng cần phải có. https://www.dammio.com/2018/11/25/nhung-the-meta-ma-bat-ky-trang-web-nao-cung-can-phai-co.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {Những thẻ meta mà bất kỳ trang web nào cũng cần phải có},
    year = {2018},
    url = {https://www.dammio.com/2018/11/25/nhung-the-meta-ma-bat-ky-trang-web-nao-cung-can-phai-co},
    urldate = {2024-03-13}
    }
Thẻ: , , , ,
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Mai Quốc Khánh
Mai Quốc Khánh
5 năm trước

Cảm ơn. Bài viết rất hay và bổ ích

1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x