Trong thế giới kỹ thuật số ngày nay, việc website của bạn xuất hiện trên top tìm kiếm của Google là vô cùng quan trọng. Để đạt được điều này, một trong những yếu tố then chốt chính là cấu trúc HTML chuẩn SEO. Bài viết này sẽ giúp bạn hiểu rõ hơn về cấu trúc này và cách áp dụng nó để tối ưu hóa website của mình.
1. Khai báo doctype và thẻ html
- Khai
báo doctype: Luôn bắt đầu file HTML bằng khai báo doctype để trình duyệt
hiểu rõ phiên bản HTML đang được sử dụng. Ví dụ: <!DOCTYPE html>
- Thẻ
html: Thẻ <html> là thẻ gốc của trang HTML, bao bọc tất cả các thẻ
khác.
2. Thẻ head
Thẻ <head> chứa các thông tin meta về trang web, không
hiển thị trực tiếp trên trình duyệt. Tuy nhiên, chúng lại đóng vai trò quan trọng
trong SEO:
- Thẻ
title: Tiêu đề của trang web, hiển thị trên thanh tiêu đề của trình duyệt
và trong kết quả tìm kiếm. Tiêu đề nên chứa từ khóa chính và hấp dẫn để
thu hút người dùng nhấp vào.
- Thẻ
meta: Cung cấp thông tin về trang web cho các công cụ tìm kiếm.
- Thẻ
meta description: Mô tả ngắn gọn về nội dung trang web, hiển thị dưới
tiêu đề trong kết quả tìm kiếm.
- Thẻ
meta keywords: Liệt kê các từ khóa liên quan đến nội dung trang web (hiện
nay không còn được Google sử dụng nhiều nhưng vẫn nên có).
- Thẻ
meta viewport: Đảm bảo trang web hiển thị đúng trên các thiết bị di động.
- Thẻ
link: Liên kết đến các file CSS bên ngoài để định dạng trang web.
- Thẻ
style: Chứa CSS được nhúng trực tiếp vào trang web.
- Thẻ
script: Chứa JavaScript được nhúng trực tiếp vào trang web.
3. Thẻ body
Thẻ <body> chứa nội dung hiển thị của trang web. Đây
là nơi bạn cần tập trung tối ưu SEO:
- Thẻ
h1: Tiêu đề chính của trang web, chỉ nên có một thẻ <h1> trên mỗi
trang.
- Thẻ
h2 - h6: Các tiêu đề phụ, giúp phân chia nội dung thành các phần nhỏ hơn
và dễ đọc hơn.
- Thẻ
p: Đoạn văn bản, nội dung chính của trang web.
- Thẻ
img: Hình ảnh, cần có thuộc tính alt để mô tả nội dung của hình ảnh cho
các công cụ tìm kiếm.
- Thẻ
a: Liên kết, sử dụng các anchor text (văn bản liên kết) chứa từ khóa để
liên kết đến các trang web khác hoặc các phần khác trong trang web.
- Thẻ
ul, ol: Danh sách không thứ tự và danh sách có thứ tự, giúp trình bày
thông tin một cách rõ ràng.
- Các
thẻ semantic HTML5: <article>, <aside>, <nav>, <section>,
<footer>... giúp định nghĩa rõ ràng hơn về cấu trúc nội dung của
trang web.
4. Các yếu tố quan trọng khác
- URL:
URL của trang web nên ngắn gọn, dễ hiểu và chứa từ khóa.
- Sitemap:
File XML chứa danh sách tất cả các trang web trên website, giúp các công cụ
tìm kiếm dễ dàng tìm kiếm và index trang web của bạn.
- Robots.txt:
File văn bản cho phép bạn chỉ định những phần nào của website không muốn
các công cụ tìm kiếm truy cập.
- Tối
ưu tốc độ tải trang: Tốc độ tải trang là một yếu tố quan trọng trong SEO.
- Thiết
kế responsive: Đảm bảo website hiển thị tốt trên tất cả các thiết bị.
- Nội
dung chất lượng: Nội dung là yếu tố quan trọng nhất trong SEO. Hãy tạo ra
nội dung độc đáo, hữu ích và đáp ứng nhu cầu của người dùng.
Cấu trúc HTML chuẩn SEO là nền tảng vững chắc để website của
bạn đạt được thứ hạng cao trên các công cụ tìm kiếm. Bằng cách áp dụng các kiến
thức trong bài viết này, bạn đã trang bị cho mình những công cụ cần thiết để tối
ưu hóa website của mình và thu hút lượng truy cập lớn.
Ví dụ: Cấu trúc file HTML chuẩn SEO
<!DOCTYPE html>
<html lang="vi">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content="Mô tả ngắn gọn về nội dung của trang web để cải thiện khả năng tìm kiếm.">
<meta
name="keywords" content="từ khóa1, từ khóa2, từ khóa3">
<meta
name="author" content="Tên tác giả">
<title>Tiêu
đề Trang Web - Từ Khóa Chính</title>
<link
rel="stylesheet" href="styles.css"> <!-- Liên kết đến
file CSS -->
</head>
<body>
<h1>Đây
là tiêu đề chính</h1>
<p>Văn bản này có thể là phần giới thiệu cho phần còn lại của trang. Và nếu trang dài, nó có thể được chia thành nhiều tiêu đề phụ.</p>
<h2>Đây
là tiêu đề phụ</h2>
<p>Nhiều bài viết dài có tiêu đề phụ để giúp bạn theo dõi cấu trúc của nội dung đang được viết. Thậm chí có thể có các tiêu đề phụ (hoặc các tiêu đề cấp thấp hơn).</p>
<h2>Một tiêu đề phụ khác</h2>
<p>Tại
đây, bạn có thể thấy một tiêu đề phụ khác.</p>
</body>
</html>
