Một website đẹp nhưng không ai tìm thấy trên Google thì cũng khó phát huy giá trị. Vì vậy, ngay từ khi viết HTML, chúng ta cần xây dựng cấu trúc thân thiện với công cụ tìm kiếm (SEO - Search Engine Optimization).
SEO không chỉ là thêm từ khóa hay cài plugin. Nền tảng của SEO bắt đầu từ HTML chuẩn, Semantic HTML, nội dung rõ ràng và cấu trúc hợp lý.
Trong bài học này, chúng ta sẽ tìm hiểu cách xây dựng một trang HTML dễ hiểu đối với Google và các công cụ tìm kiếm khác.
🎯 Mục tiêu bài học
Sau bài này bạn sẽ:
Hiểu SEO Friendly HTML là gì.
Biết cách sử dụng đúng các thẻ Heading.
Viết Title và Meta Description hiệu quả.
Tối ưu hình ảnh và liên kết.
Xây dựng cấu trúc HTML giúp Google dễ thu thập dữ liệu.
Tránh những lỗi SEO HTML phổ biến.
SEO Friendly HTML là gì?
SEO Friendly HTML là việc viết mã HTML theo các tiêu chuẩn giúp công cụ tìm kiếm:
Hiểu nội dung trang.
Thu thập dữ liệu nhanh hơn.
Xác định chủ đề chính.
Hiển thị kết quả tìm kiếm chính xác hơn.
Một HTML được tổ chức tốt cũng giúp cải thiện trải nghiệm người dùng, từ đó gián tiếp hỗ trợ SEO.
Vì sao HTML ảnh hưởng đến SEO?
Google không "nhìn" website giống con người.
Thay vào đó, Google sẽ phân tích:
Tiêu đề trang.
Các thẻ Heading.
Nội dung văn bản.
Hình ảnh.
Liên kết.
Cấu trúc HTML.
Nếu HTML lộn xộn, thiếu ý nghĩa hoặc sai cấu trúc, công cụ tìm kiếm sẽ khó hiểu nội dung của trang.
Thẻ Title
Đây là một trong những yếu tố SEO quan trọng nhất.
Ví dụ:
<head>
<title>
Học HTML5 từ cơ bản đến nâng cao | Lớp Học Vi Tính
</title>
</head>
Title nên:
mô tả đúng nội dung
ngắn gọn
chứa từ khóa chính
không quá dài
Meta Description
Đây là đoạn mô tả thường xuất hiện dưới tiêu đề trên Google.
<meta
name="description"
content="Khóa học HTML5 Enterprise giúp bạn xây dựng website chuẩn SEO, Responsive và hiện đại.">
Meta Description không trực tiếp tăng thứ hạng, nhưng có thể giúp tăng tỷ lệ người dùng nhấp vào kết quả tìm kiếm.
Heading
HTML có sáu cấp Heading.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
H1
Mỗi trang chỉ nên có một thẻ <h1>.
Ví dụ:
<h1>
Khóa học HTML5 Enterprise
</h1>
Đây là tiêu đề chính của trang.
H2
Dùng cho các mục lớn.
Ví dụ:
<h2>
Nội dung khóa học
</h2>
<h2>
Giảng viên
</h2>
<h2>
Học phí
</h2>
H3
Dùng cho các mục con.
<h3>
HTML5
</h3>
<h3>
CSS3
</h3>
Không nên dùng Heading để phóng to chữ
Sai:
<h2>
Khuyến mãi
</h2>
chỉ vì muốn chữ to.
Heading phải phản ánh cấu trúc nội dung, không phải để trang trí. Nếu muốn thay đổi kích thước chữ, hãy sử dụng CSS.
Semantic HTML
Google hiểu rất tốt các thẻ:
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Đây cũng là lý do Semantic HTML được học đầu tiên trong khóa học.
Hình ảnh chuẩn SEO
Luôn có thuộc tính alt
Ví dụ:
<img
src="html5.jpg"
alt="Khóa học HTML5 Enterprise">
Nếu ảnh không hiển thị, nội dung alt sẽ được dùng thay thế.
Đối với công cụ tìm kiếm, alt giúp hiểu nội dung của hình ảnh.
Đặt tên tệp rõ ràng
Tốt:
html5-course.jpg
Không tốt:
IMG001.jpg
Tên tệp nên phản ánh nội dung của hình ảnh.
Liên kết
Ví dụ:
<a href="/khoa-hoc-html">
Khóa học HTML
</a>
Nội dung liên kết nên mô tả rõ điểm đến.
Không nên:
<a href="/html">
Click tại đây
</a>
Thay vào đó:
<a href="/html">
Xem khóa học HTML5
</a>
Danh sách
Khi liệt kê nội dung, hãy sử dụng:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Hoặc:
<ol>
<li>Bài 1</li>
<li>Bài 2</li>
</ol>
Điều này giúp cấu trúc nội dung rõ ràng hơn.
Nội dung dễ đọc
Nên chia bài viết thành nhiều đoạn ngắn.
Ví dụ:
<p>
HTML là ngôn ngữ đánh dấu.
</p>
<p>
CSS dùng để tạo giao diện.
</p>
Không nên dồn toàn bộ nội dung vào một đoạn quá dài.
URL thân thiện
Tốt:
/khoa-hoc-html5
Không tốt:
/?id=123
URL ngắn gọn, dễ hiểu sẽ thân thiện hơn với người dùng và công cụ tìm kiếm.
Ví dụ cấu trúc HTML chuẩn SEO
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>
Học HTML5 Enterprise
</title>
<meta
name="description"
content="Khóa học HTML5 dành cho lập trình viên PHP.">
</head>
<body>
<header>
<h1>
HTML5 Enterprise
</h1>
</header>
<main>
<section>
<h2>
Giới thiệu
</h2>
<p>
Nội dung...
</p>
</section>
</main>
<footer>
© 2026
</footer>
</body>
</html>
Đây là cấu trúc cơ bản nhưng đã đáp ứng nhiều yêu cầu SEO.
Những lỗi SEO HTML phổ biến
❌ Không có thẻ <title>.
❌ Thiếu meta description.
❌ Có nhiều thẻ <h1> trên cùng một trang.
❌ Bỏ trống thuộc tính alt cho hình ảnh quan trọng.
❌ Đặt tên tệp hình ảnh không có ý nghĩa.
❌ Sử dụng "Click here" hoặc "Xem thêm" làm nội dung liên kết mà không có ngữ cảnh.
❌ Dùng <div> thay cho các thẻ Semantic HTML.
❌ Không khai báo ngôn ngữ của tài liệu bằng lang.
Thực hành
Tạo một trang giới thiệu khóa học với:
Title
Meta Description
Một thẻ
<h1>Ba thẻ
<h2>Một hình ảnh có
altMenu điều hướng bằng
<nav>Nội dung chính trong
<main>Chân trang
<footer>
Yêu cầu:
Sử dụng Semantic HTML.
Không dùng nhiều hơn một thẻ
<h1>.Đặt tiêu đề và mô tả phù hợp với nội dung.
Tổng kết
SEO bắt đầu từ những điều rất cơ bản. Một cấu trúc HTML rõ ràng, sử dụng đúng Heading, kết hợp với Semantic HTML và các thẻ Meta sẽ giúp công cụ tìm kiếm hiểu website tốt hơn.
Đây là nền tảng quan trọng trước khi chúng ta tối ưu CSS, JavaScript hay xây dựng các hệ thống lớn bằng PHP, Laravel hoặc các framework khác.
📌 Kiến thức đạt được
✅ Hiểu SEO Friendly HTML là gì.
✅ Biết cách sử dụng
titlevàmeta description.✅ Phân biệt vai trò của các thẻ Heading (
h1đếnh6).✅ Tối ưu hình ảnh với thuộc tính
alt.✅ Viết liên kết và URL thân thiện với SEO.
✅ Xây dựng cấu trúc HTML chuẩn cho công cụ tìm kiếm.
✅ Nhận biết các lỗi SEO HTML thường gặp.
➡️ Bài tiếp theo: Bài 04 — Accessibility & ARIA: Xây dựng Website thân thiện với mọi người dùng.
Không có nhận xét nào:
Đăng nhận xét