Thẻ title trong HTML: tiêu đề trang, độ dài và SEO

Thẻ title nằm ở đâu

Mỗi trang cần đúng một phần tử <title> bên trong <head>. Chữ trong đó là tên trang mà trình duyệt hiển thị trên tab và dấu trang, và công cụ tìm kiếm thường hiển thị làm tiêu đề kết quả:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

Bản thân title không bao giờ xuất hiện bên trong trang. Bản xem trước này cũng chạy bên trong trang tài liệu của Coddy, nên tab trình duyệt của bạn vẫn hiển thị tiêu đề của trang tài liệu; đoạn script nhỏ in ra những gì tab sẽ hiển thị nếu bạn mở ví dụ thành một tệp riêng. Sửa chữ trong <title> và dòng kết quả sẽ cập nhật.

Viết một title tốt

Title thường là thứ đầu tiên người ta đọc về trang của bạn, trong kết quả tìm kiếm hay trên một hàng tab. Vài quy tắc sau áp dụng cho hầu hết các trang:

• Cụ thể và không trùng lặp. Mỗi trang trong website nên có title riêng mô tả đúng trang đó: "Chocolate Chip Cookies Recipe", không phải "Home" hay "Page 1".
• Đặt từ quan trọng lên đầu. Tab thì hẹp và kết quả tìm kiếm cắt bớt title dài. Giữ cụm từ chính trong khoảng 50 đến 60 ký tự đầu.
• Thêm tên website ở cuối, ngăn cách bằng | hoặc :, để chủ đề trang vẫn đứng trước.
• Viết cho người đọc. Một title nhồi đầy từ khóa lặp lại trông như spam, và công cụ tìm kiếm có thể viết lại nó.

Tab mô phỏng này cắt title ở khoảng độ rộng của một tab thật. Thử một title ngắn hơn hoặc dài hơn:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Khi tên website nằm cuối, tab bị cắt vẫn cho thấy trang nói về gì. Đảo thứ tự ("Bake Club | How to...") thì mọi tab từ website của bạn sẽ bắt đầu bằng cùng hai từ.

Thẻ title, h1 và thuộc tính title

Title và <h1> thường cùng ý nghĩa, nhưng title có thể viết cho việc tìm kiếm và kèm tên website, còn tiêu đề trên trang có thể ngắn hơn. Thuộc tính title thì không liên quan, dù trùng tên. Rê chuột lên từ được gạch chân:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

Tooltip từ thuộc tính title không hiện trên màn hình cảm ứng và không phải lúc nào cũng được trình đọc màn hình đọc, nên đừng đặt thông tin quan trọng chỉ ở đó.

Title chỉ chứa chữ

Trình duyệt đọc mọi thứ giữa <title> và </title> như chữ thuần. Thẻ không được phân tích, nhưng tham chiếu ký tự như & được giải mã, và các khoảng trắng liền nhau gộp lại thành một dấu cách:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

Kết quả là Salt & Pepper <b>Bold?</b>: thực thể trở thành &, ba dấu cách trở thành một, còn các thẻ <b> giữ nguyên thành ký tự. Không thể in đậm hay nhấn mạnh trong title.

Đổi title bằng JavaScript

document.title vừa đọc được vừa gán được. Các ứng dụng web dùng nó để hiển thị số tin chưa đọc hoặc trạng thái hiện tại trên tab:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

Trên một trang thật, tab trình duyệt thay đổi cùng lúc với tab mô phỏng ở đây. Công cụ tìm kiếm có chạy JavaScript có thể thấy title do script đặt, nhưng title viết sẵn trong HTML mới là lựa chọn đáng tin cậy cho mọi thứ cần được lập chỉ mục.

Lỗi thường gặp

• Không có title. Trình duyệt dùng URL hoặc tên tệp thay thế, và trang thành HTML không hợp lệ. Thêm title cho mọi trang, đặt cạnh thẻ meta viewport trong template.
• Mọi trang dùng cùng một title. Tab, dấu trang và kết quả tìm kiếm sẽ không thể phân biệt được.
• Đặt <title> trong <body>. Trình duyệt vẫn dùng nó, nhưng chỗ của nó là <head>, và một số công cụ sẽ bỏ sót.
• Hai phần tử <title>. Chỉ phần tử đầu tiên có tác dụng. Hãy xóa các phần tử còn lại.
• Bắt đầu mọi title bằng tên website. Đặt chủ đề trang lên trước; tên website để cuối.