Thẻ meta trong HTML giúp bạn cung cấp thông tin ẩn về trang web cho các trình duyệt, công cụ tìm kiếm và mạng xã hội.
Dù người dùng không nhìn thấy, nhưng Google, Facebook, và các hệ thống phân tích lại dựa vào thẻ này rất nhiều.
1. Thẻ meta là gì?
Thẻ meta được viết trong phần <head> của trang web.
<meta name="description" content="Trang web học HTML từ cơ bản đến nâng cao.">
Mỗi thẻ meta gồm:
name: tên của loại thông tincontent: nội dung tương ứng
2. Một số thẻ meta phổ biến nhất
1. Thẻ mô tả trang (description)
<meta name="description" content="Khóa học HTML miễn phí, dễ hiểu, dành cho người mới.">
Công dụng: mô tả ngắn gọn nội dung của trang.
Google có thể dùng đoạn này làm phần mô tả trên trang kết quả tìm kiếm (SERP).
2. Thẻ từ khóa (keywords)
<meta name="keywords" content="html, học html, lập trình web, html cơ bản">
Lưu ý: Google không còn sử dụng thẻ này để xếp hạng nữa, nhưng vẫn có thể dùng cho các công cụ tìm kiếm khác.
3. Tác giả trang
<meta name="author" content="Nguyễn Văn A">
Hiển thị thông tin người tạo ra nội dung, có thể dùng cho kiểm tra bản quyền.
4. Thiết lập mã hóa ký tự
<meta charset="UTF-8">
Giúp hiển thị tiếng Việt và nhiều ký tự khác chính xác.
Cần có trong mọi trang HTML.
5. Cài đặt hiển thị trên thiết bị di động (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thẻ này cực kỳ quan trọng khi làm web responsive (hiển thị tốt trên điện thoại).
Không có thẻ này, trang web của bạn sẽ hiển thị sai kích thước trên di động.
3. Vị trí của các thẻ meta
Tất cả thẻ meta phải nằm trong phần <head> của tài liệu HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Học HTML nhanh chóng và dễ hiểu.">
<meta name="keywords" content="html, học html, html cơ bản">
<meta name="author" content="Trang Học Lập Trình">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang học HTML</title>
</head>
<body>
<h1>Chào mừng bạn đến với khóa học HTML</h1>
</body>
</html>
4. Ghi nhớ nhanh
| Thẻ meta | Vai trò |
|---|---|
meta charset | Khai báo bảng mã ký tự, nên dùng UTF-8 |
meta description | Mô tả ngắn về trang, hỗ trợ SEO |
meta keywords | Từ khóa liên quan (không còn quá quan trọng) |
meta author | Tác giả trang |
meta viewport | Thiết lập tỷ lệ hiển thị trên mobile |
5. SEO là gì và tại sao meta lại quan trọng?
SEO (Search Engine Optimization) là quá trình giúp trang web xuất hiện cao hơn trên Google và các công cụ tìm kiếm khác.
Thẻ meta, đặc biệt là description và viewport, giúp:
- Google hiểu nội dung trang.
- Tăng khả năng hiển thị đúng người dùng cần.
- Cải thiện trải nghiệm người dùng trên thiết bị khác nhau.
Khóa học
SEO - Đưa trang web lên top Googletại đây.
Thảo luận