Thẻ <head> và vai trò của nó
Phần <head> chứa thông tin về trang (metadata) — không hiển thị trực tiếp cho người dùng, nhưng có tác động lớn đến SEO, sharing và hành vi trình duyệt.
Các thẻ meta quan trọng
Bắt buộc
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tiêu đề trang — Tên thương hiệu</title>
charset="UTF-8"— mã hoá ký tự, đảm bảo tiếng Việt hiển thị đúngviewport— quy định tỉ lệ zoom ban đầu trên mobile, cần thiết cho responsive<title>— hiển thị trên tab trình duyệt và kết quả tìm kiếm (50–60 ký tự)
SEO cơ bản
<meta name="description" content="Mô tả trang web, dài khoảng 150–160 ký tự.">
<meta name="keywords" content="từ khoá, lập trình, web">
<meta name="author" content="Nguyễn Văn A">
<meta name="robots" content="index, follow">
description— đoạn mô tả hiển thị trong kết quả Google Searchkeywords— ít được Google coi trọng ngày nay nhưng vẫn nên córobots— cho phép (index) hay cấm (noindex) công cụ tìm kiếm lập chỉ mục
Open Graph — Chia sẻ mạng xã hội
<meta property="og:title" content="Tiêu đề khi chia sẻ">
<meta property="og:description" content="Mô tả khi chia sẻ">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com/trang-nay">
<meta property="og:type" content="website">
Khi chia sẻ lên Facebook, LinkedIn… chúng đọc thẻ og:* để hiển thị preview đẹp.
Twitter Card
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Tiêu đề">
<meta name="twitter:description" content="Mô tả">
<meta name="twitter:image" content="https://example.com/img.jpg">
Favicon và icon
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Ví dụ: Trang với đầy đủ meta tags
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ Meta Tags — Web Tutorial</title>
<!-- SEO -->
<meta name="description" content="Bài học về meta tags trong HTML5 cho SEO và mạng xã hội.">
<meta name="keywords" content="meta tags, HTML5, SEO, Open Graph">
<meta name="author" content="Nguyễn Văn A">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="Ví dụ Meta Tags">
<meta property="og:description" content="Hướng dẫn sử dụng thẻ meta trong HTML5.">
<meta property="og:image" content="https://picsum.photos/1200/630">
<meta property="og:url" content="https://example.com/meta">
<meta property="og:type" content="article">
<style>
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.meta-card { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-top: 1rem; }
.meta-card h3 { margin-top: 0; color: #4472c4; }
</style>
</head>
<body>
<h1>✅ Meta Tags đã được cài đặt đúng</h1>
<p>Trang này có đầy đủ meta tags. Mở DevTools → tab <strong>Elements</strong> để xem phần <code><head></code>.</p>
<div class="meta-card">
<h3>📋 Tóm tắt meta đã dùng</h3>
<ul>
<li><code>charset</code> — UTF-8 cho tiếng Việt</li>
<li><code>viewport</code> — responsive mobile</li>
<li><code>description</code> — SEO snippet</li>
<li><code>og:title / og:image</code> — chia sẻ mạng xã hội</li>
</ul>
</div>
</body>
</html>
Thứ tự ưu tiên trong <head>
Đặt các thẻ theo thứ tự:
<meta charset>— phải đứng đầu tiên<meta name="viewport"><title>- Các meta SEO và OG
<link rel="stylesheet">- Sau cùng:
<script>(hoặc dùngdefer)
Bình luận