HTML (HyperText Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn để tạo nên cấu trúc của một trang web. Hiểu rõ và sử dụng thành thạo các thẻ trong HTML là yếu tố then chốt để xây dựng một website có cấu trúc tốt, thân thiện với người dùng và bot tìm kiếm. Bài viết này sẽ cung cấp một cái nhìn toàn diện về các thẻ trong HTML quan trọng nhất, cách sử dụng chúng và cách tối ưu hóa chúng để đạt hiệu quả SEO cao nhất.
Thẻ trong HTML là gì?
Thẻ HTML là các mã đặc biệt được sử dụng để đánh dấu các phần tử khác nhau trên một trang web. Mỗi thẻ được bao quanh bởi dấu ngoặc nhọn < and >. Chúng báo cho trình duyệt biết cách hiển thị nội dung. Ví dụ: thẻ <p> được sử dụng để đánh dấu một đoạn văn bản, thẻ <h1> được sử dụng cho tiêu đề cấp độ một, và thẻ <img> được sử dụng để nhúng hình ảnh. Thẻ HTML thường đi theo cặp: thẻ mở (ví dụ: <p>) và thẻ đóng (ví dụ: </p>). Nội dung nằm giữa hai thẻ này sẽ được trình duyệt diễn giải theo chức năng của thẻ đó.
Cú pháp và cách sử dụng thẻ HTML
Cú pháp cơ bản của một thẻ HTML bao gồm:
- Thẻ mở: Bắt đầu bằng dấu < theo sau là tên thẻ và kết thúc bằng dấu >. Ví dụ: <h1>.
- Nội dung: Nội dung mà thẻ sẽ định dạng hoặc xử lý. Ví dụ: Chào mừng đến với trang web của tôi!.
- Thẻ đóng: Tương tự như thẻ mở, nhưng có thêm dấu / trước tên thẻ. Ví dụ: </h1>.
Vì vậy, một đoạn mã HTML hoàn chỉnh sử dụng thẻ <h1> sẽ như sau:
<h1>Chào mừng đến với trang web của tôi!</h1>
Nhiều thẻ HTML cũng có thể chứa thuộc tính (attributes). Thuộc tính cung cấp thêm thông tin cho thẻ. Ví dụ, thẻ <img> sử dụng thuộc tính src để chỉ định đường dẫn đến hình ảnh:
<img src=”image.jpg” alt=”Mô tả hình ảnh”>
Trong ví dụ trên, src=”image.jpg” là thuộc tính chỉ định vị trí của hình ảnh, và alt=”Mô tả hình ảnh” là thuộc tính cung cấp mô tả văn bản về hình ảnh, quan trọng cho SEO và khả năng tiếp cận.
10 thẻ HTML quan trọng nhất cho SEO
Để tối ưu hóa trang web cho công cụ tìm kiếm, việc sử dụng chính xác và hiệu quả các thẻ trong HTML sau đây là vô cùng quan trọng:
1. Thẻ Tiêu Đề (Title)
Thẻ <title> nằm trong phần <head> của tài liệu HTML và xác định tiêu đề của trang web. Tiêu đề này hiển thị trên thanh tiêu đề của trình duyệt và được sử dụng bởi các công cụ tìm kiếm như Google để hiển thị tiêu đề của trang trong kết quả tìm kiếm.
- Tầm quan trọng: Là yếu tố SEO quan trọng bậc nhất. Tiêu đề nên ngắn gọn (dưới 60 ký tự), chứa từ khóa mục tiêu, và mô tả chính xác nội dung trang.
- Ví dụ: <title>Mua Giày Thể Thao Chính Hãng Giá Rẻ | ABC Sport</title>
2. Thẻ Meta Description
Thẻ <meta name=”description”> nằm trong phần <head> và cung cấp một mô tả ngắn gọn về nội dung của trang web. Mặc dù không còn là yếu tố xếp hạng trực tiếp, meta description vẫn quan trọng vì nó ảnh hưởng đến tỷ lệ nhấp chuột (CTR) trong kết quả tìm kiếm.
- Tầm quan trọng: Giúp người dùng hiểu rõ hơn về nội dung trang khi họ nhìn thấy nó trong kết quả tìm kiếm. Nên viết hấp dẫn, chứa lời kêu gọi hành động (call to action), và bao gồm từ khóa chính một cách tự nhiên.
- Ví dụ: <meta name=”description” content=”Tìm mua giày thể thao chính hãng với giá ưu đãi nhất tại ABC Sport. Giao hàng tận nơi, đổi trả dễ dàng!”>
3. Các thẻ tiêu đề (H1-H6)
Các thẻ <h1> đến <h6> được sử dụng để tạo cấu trúc cho nội dung trang. <h1> là tiêu đề quan trọng nhất, thường được sử dụng cho tiêu đề chính của trang. Các thẻ <h2> đến <h6> được sử dụng cho các tiêu đề phụ và tiêu đề thứ cấp.
- Tầm quan trọng: Giúp bot tìm kiếm hiểu rõ cấu trúc nội dung. Nên sử dụng <h1> một lần duy nhất trên mỗi trang và sử dụng các thẻ <h2> đến <h6> một cách logic để phân cấp nội dung. Từ khóa nên được tích hợp tự nhiên vào các thẻ tiêu đề này.
- Ví dụ: <h1>Hướng dẫn chọn giày thể thao phù hợp với từng môn tập</h1>, <h2>Các loại giày chạy bộ phổ biến</h2>
4. Thẻ ALT cho hình ảnh
Thuộc tính alt trong thẻ <img> cung cấp mô tả văn bản thay thế cho hình ảnh. Văn bản này sẽ được hiển thị nếu hình ảnh không tải được, và nó cũng được đọc bởi các trình đọc màn hình (screen readers) cho người khiếm thị.
- Tầm quan trọng: Cải thiện khả năng tiếp cận (accessibility) và giúp bot tìm kiếm hiểu rõ hơn về nội dung hình ảnh. Nên sử dụng mô tả ngắn gọn, chính xác, và chứa từ khóa liên quan.
- Ví dụ: <img src=”giay-chay-bo-nike.jpg” alt=”Giày chạy bộ Nike Air Zoom Pegasus”>
5. Thẻ liên kết (Anchor Tag)
Thẻ <a> (anchor tag) được sử dụng để tạo liên kết đến các trang web khác (external links) hoặc đến các phần khác nhau trong cùng một trang web (internal links). Thuộc tính href chỉ định đích của liên kết.
- Tầm quan trọng: Giúp điều hướng người dùng và bot tìm kiếm giữa các trang. Sử dụng “anchor text” (văn bản hiển thị của liên kết) mô tả rõ ràng trang đích và chứa từ khóa liên quan. “Do-follow” và “No-follow” thuộc tính cũng ảnh hưởng đến SEO.
- Ví dụ: <a href=”https://www.nike.com/vn/running” title=”Giày chạy bộ Nike”>Xem thêm các mẫu giày chạy bộ Nike</a>
6. Thẻ Robots
Thẻ <meta name=”robots”> cho phép bạn kiểm soát cách các bot tìm kiếm thu thập dữ liệu và lập chỉ mục trang web của bạn.
- Tầm quan trọng: Cho phép bạn ngăn chặn các bot tìm kiếm truy cập và lập chỉ mục các trang không quan trọng hoặc có nội dung trùng lặp, giúp tập trung vào các trang quan trọng hơn cho SEO.
- Ví dụ: <meta name=”robots” content=”index, follow”> (cho phép index và follow), <meta name=”robots” content=”noindex, nofollow”> (không cho phép index và follow).
7. Thẻ Canonical
Thẻ <link rel=”canonical”> được sử dụng để chỉ định phiên bản “chính thức” của một trang web khi có nhiều phiên bản tương tự hoặc trùng lặp.
- Tầm quan trọng: Giúp công cụ tìm kiếm hiểu phiên bản nào của trang nên được ưu tiên lập chỉ mục và tránh bị phạt vì nội dung trùng lặp.
- Ví dụ: <link rel=”canonical” href=”https://www.example.com/product-page”>
8. Schema Markup
Schema markup là một loại mã đánh dấu (markup code) mà bạn có thể thêm vào trang web của mình để cung cấp thêm thông tin chi tiết về nội dung của trang cho các công cụ tìm kiếm.
- Tầm quan trọng: Giúp công cụ tìm kiếm hiểu rõ hơn về nội dung trang web, từ đó hiển thị kết quả tìm kiếm phong phú (rich snippets) như đánh giá, giá cả, sự kiện, v.v., giúp tăng CTR.
- Ví dụ: Sử dụng JSON-LD hoặc Microdata để đánh dấu sản phẩm, địa điểm, sự kiện, v.v.
9. Thẻ Ngôn ngữ
Thẻ <html lang=”vi”> xác định ngôn ngữ chính của trang web.
- Tầm quan trọng: Giúp công cụ tìm kiếm và trình duyệt hiển thị trang web chính xác cho người dùng có ngôn ngữ phù hợp.
- Ví dụ: <html lang=”vi”> (cho tiếng Việt), <html lang=”en”> (cho tiếng Anh).
10. Thẻ ngữ nghĩa trong HTML5
HTML5 giới thiệu nhiều thẻ ngữ nghĩa mới như <article>, <aside>, <nav>, <header>, <footer>, và <section>.
- Tầm quan trọng: Giúp xác định rõ hơn cấu trúc và ý nghĩa của các phần khác nhau trên trang web, giúp bot tìm kiếm hiểu rõ hơn về nội dung. Sử dụng các thẻ này thay vì chỉ sử dụng các thẻ <div> để mang lại lợi ích SEO tốt hơn.
Ví dụ: <article><h1>Tiêu đề bài viết</h1><p>Nội dung bài viết…</p></article>, <nav><ul><li><a href=””>Trang chủ</a></li></ul></nav>
Kết luận
Hiểu rõ và sử dụng hiệu quả các thẻ trong HTML là yếu tố then chốt để xây dựng một website thân thiện với người dùng và tối ưu hóa cho công cụ tìm kiếm. Bằng cách sử dụng đúng các thẻ trong HTML được đề cập ở trên, bạn có thể cải thiện đáng kể SEO cho trang web của mình và thu hút nhiều lưu lượng truy cập hơn. Hãy nhớ luôn tập trung vào việc tạo ra nội dung chất lượng cao và cung cấp trải nghiệm người dùng tốt nhất, vì đây là những yếu tố quan trọng nhất để thành công trong SEO.
