Tìm hiểu cách sử dụng phần tử HTML <title>.
Phần tử HTML <title> đại diện cho tiêu đề trang của trang web bạn.
Để xem tiêu đề trang của bất kỳ trang web nào bạn đang truy cập, hãy di chuyển chuột đến thẻ tab trình duyệt và giữ yên vài giây, tiêu đề trang đầy đủ sẽ hiện ra.
Đây là minh họa trên YouTube:
Để tạo phần tử title, chúng ta dùng thẻ mở và đóng <title>, đặt văn bản bên trong:
<title>Tiêu đề trang tài liệu</title>Phần tử <title> chỉ được chứa văn bản!
Phần tử <title> nằm bên trong phần tử <head> của tài liệu:
<!DOCTYPE html> <html> <head> <title>Tiêu đề trang tài liệu</title> </head> <body> ... </body> </html><title> ảnh hưởng đến SEO
<title> là một trong những phần tử quan trọng nhất cho SEO (Tối ưu hóa công cụ tìm kiếm), vì thuật toán của công cụ tìm kiếm sử dụng tiêu đề trang (ngoài các yếu tố khác) để xác định thứ hạng của bạn trong kết quả tìm kiếm.
Với mục đích SEO và UX, văn bản bạn đặt bên trong phần tử <title> nên mô tả trang của bạn càng chi tiết càng tốt. Tuy nhiên, không nên vượt quá tổng cộng 60 ký tự (kể cả khoảng trắng giữa các từ), nếu không công cụ tìm kiếm sẽ không thể hiển thị tiêu đề đầy đủ của bạn.
Cũng đừng chỉ nhồi nhét một danh sách từ khóa vào đó, cho rằng nó sẽ giúp SEO. Thay vào đó, hãy viết một tiêu đề mô tả, bao gồm từ khóa chính của trang đó.
Dưới đây là ví dụ về tiêu đề trang mô tả:
<title>Cách xây dựng trang web đơn giản với HTML, CSS và JavaScript</title>Tiêu đề trên mượt mà, mô tả rõ ràng và bao gồm 4 từ khóa chính cho một trang web hướng dẫn như TechStacker:
- trang web
- HTML
- CSS
- JavaScript
Một mẫu phổ biến trên web là các trang web sử dụng văn bản của thẻ tiêu đề chính <h1>Tiêu đề chính</h1> làm tiêu đề trang. Một số CMS như WordPress sẽ tự động làm điều này cho bạn. Cách tiếp cận này thường hoạt động tốt, trừ khi bạn cần phân biệt giữa tiêu đề chính và mô tả tiêu đề trang — vì bất kỳ lý do nào.