Sử dụng nhiều thẻ H1 trên một trang có ảnh hưởng tới...

Sử dụng nhiều thẻ H1 trên một trang có ảnh hưởng tới SEO website hay không?

0 107
the h1 tren 1 trang trong seo

Có thể sử dụng bao nhiêu thẻ H1 trên cùng 1 trang? Và sử dụng chúng như thế nào cho hợp lý? Chúng ta nên chỉ sử dụng 1 thẻ H1 trên một trang. Đây có thể nói là quy tắc cơ bản cho bất kỳ ai khi tìm hiểu về SEO, dù bạn là người lập trình web cũng phải biết (để tạo ra các giao diện theo đúng chuẩn SEO, đúng chuẩn W3C). Không chỉ thế, thẻ H1 chỉ được dùng cho tiêu đề chính của trang. Với trang chủ bạn thấy thẻ H1 nằm ở đâu? Nó nằm ở headline – tức là phần tiêu đề của website, hay nơi mà bạn có thể thay thế bằng logo.

Còn với bài viết/trang – thẻ H1 đặt ở tiêu đề của chúng. Bạn cứ thử xem trang web của mình hay rất rất nhiều trang web khác xem điều đó đúng hay sai?

Thẻ h1 ở tiêu đề chính của trang

Vì sao lại có nguyên tắc này? Điều này giúp công cụ tìm kiếm có thể nhận biết được phần quan trọng của một trang, các bot tìm kiếm dễ dàng “đọc” trang web của bạn, từ đó cải thiện sự chính xác của các cụm từ khóa khác nhau, và rõ ràng, thứ hạng trang web của bạn cũng sẽ được cải thiện theo. Xét về phía người dùng, ví dụ bạn đọc 1 bài mà có tới mấy chỗ dùng thẻ H1 – độ to của chữ như nhau, bạn không rõ đâu là các phần trong bài viết, đâu là tiêu đề. Cách trình bày như vậy đã đủ khiến chúng ta rối mắt rồi.

Ý nghĩa các thẻ Heading – Document outlines

Thẻ H1 là quan trọng nhất đối với một trang nội dung, nhưng nó chưa bao giờ hoạt động một cách độc lập tách rời những phần còn lại của trang. Nó kết hợp với các thẻ heading khác tạo ra Document Outline. Document Outline là khái niệm chỉ cấu trúc của văn bản HTML, giống như bảng nội dung của trang web và được tạo ra tự động thông qua các thẻ có trên trang web.

Trước HTML5, Document outlines được tạo ra từ việc nhận diện các thẻ heading từ h1 tới h6. Mỗi khi xuất hiện một thẻ heading, đồng nghĩa với việc ta có một phần nội dung mới. Hãy xem ví dụ mã HTML dưới đây:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mã HTML trước khi có HTML5</title>
</head>
<body>
<h1>Tiêu đề của trang web</h1>
<p>Nội dung trong bài viết</p>
<h2>Mục lớn trong trang web</h2>
<p>Nội dung trong bài viết</p>
<p>Nội dung trong bài viết</p>
<h3>Mục con trong trang web</h3>
<p>Nội dung trong bài viết</p>
<p>Nội dung trong bài viết.</p>
<h2>Mục lớn thứ 2 có trong trang web</h2>
</body>
</html>

Với văn bản HTML4 ở trên, ta có Document Outlines như sau:

1. (document)Tiêu đề của trang web
1. (h2)Mục lớn trong trang web
1. (h3)Mục con trong trang web
2. (h2)Mục lớn thứ 2 có trong trang web

Thẻ H1 được xem như tiêu đề chính của cả văn bản, các tiêu đề tiếp theo được đặt theo cấp giảm dần, tạo thành hệ thông phân cấp bên dưới tiêu đề chính. Ví dụ trên là tương đơn giản, nhưng trong thực tế chúng ta gặp một văn bản HTML sẽ có cấu trúc phức tạp hơn, và nảy sinh vấn đề lớn (trước khi có HTML5) khi chỉ sử dụng 1 thẻ H1 trên một trang.

Trong ví dụ trên, chúng ta chỉ có 1 bài viết, nhưng sẽ ra sao nếu trên 1 mục có nhiều bài viết, như bạn thường gặp kiểu giao diện blog với bài nối tiếp bài? Hãy xem đoạn mã HTML sau – mỗi bài nằm gọn trong 1 cặp thẻ DIV

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mã HTML trước khi có HTML5</title>
</head>
<body>
<div>
<h1>Tiêu đề bài viết thứ nhất</h1>
<p>Nội dung trong bài viết</p>
<h2>Mục lớn trong trang web</h2>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
<h3>Mục con trong trang web</h3>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
<h2>Mục lớn thứ 2 có trong trang web</h2>
</div>

<div>
<h1>Tiêu đề bài viết thứ hai</h1>
<p>Nội dung trong bài viết.</p>
<h2>Mục lớn trong trang web</h2>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
</div>
</body>
</html>

Với đoạn mã HTML4 trên, ta có Document Outlines như sau:

1. (document)Tiêu đề bài viết thứ nhất
1. (h2)Mục lớn trong trang web
1. (h3)Mục con trong trang web
2. (h2)Mục lớn thứ 2 có trong trang web
2. (h1)Tiêu đề bài viết thứ hai
1. (h2)Mục lớn trong trang web

Và thế là hai bài viết khác nhau nhưng lại không được đánh giá như nhau khi áp dụng nguyên tắc chỉ có 1 thẻ H1 trên một trang. Thẻ h1 đầu tiên với “Tiêu đề bài viết thứ nhất” sẽ được xem là tiêu đề chính của toàn bộ trang web (với 2 bài viết), vì nó nằm ở trên cùng, còn bài viết thứ hai chẳng liên quan gì tới bài viết đầu thì lại được xem như cùng tiêu đề với bài viết đầu tiên.

Cách dễ dàng nhất để thoát khỏi điều này là nhóm các thẻ H1 tại nơi nào có các phần nội dung với mức độ quan trọng ngang nhau, đặt trong một thẻ h1 duy nhất, như ví dụ sau đây

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mã HTML trước khi có HTML5</title>
</head>
<body>
<div>
<h1>Tiêu đề chung - Tiêu đề website</h1>
</div>

<div>
<h2>Tiêu đề bài viết thứ nhất</h2>
<p>Nội dung trong bài viết.</p>
<h3>Mục lớn trong trang web</h3>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
<h4>Mục con trong trang web</h4>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
<h3>Mục lớn thứ 2 có trong trang web</h3>
</div>

<div>
<h2>Tiêu đề bài viết thứ hai</h2>
<p>Nội dung trong bài viết.</p>
<h3>Mục lớn trong trang web</h3>
<p>Nội dung trong bài viết.</p>
<p>Nội dung trong bài viết.</p>
</div>
</body>
</html>

Và với mã trên, ta có Document Outlines như sau:

1. (document)Tiêu đề chung – Tiêu đề website
1. (h2)Tiêu đề bài viết thứ nhất
1. (h3)Mục lớn trong trang web
1. (h4)Mục con trong trang web
2. (h3)Mục lớn thứ 2 có trong trang web
2. (h2)Tiêu đề bài viết thứ hai
1. (h3)Mục lớn trong trang web

Các vấn đề gặp phải trước khi có HTML5

Qua một vài ví dụ trên bạn chắc hẳn thấy được những bất cập khi áp dụng nguyên tắc chỉ có 1 thẻ h1 duy nhất trên một trang cho nhiều trường hợp thực tế, ta có thể liệt kê một số vấn đề sau

1. Tiêu đề tổng quát cho những phần không liên quan với nhau là không khả thi – như ở ví dụ trên, ta có tiêu đề cho toàn bộ trang (site title), nhưng tiêu đề này lại không đưa ra nội dung tông quát cho cả trang. Điều này làm giảm khả năng tìm kiếm của các bot trong việc nhận biết nội dung có trên trang web và biến nó thành từ khóa hay cụm từ khóa quan trọng của trang.

2. Các bài viết riêng biệt được xem như một phần riêng về một mảng nội dung nào đó, nhưng thực tế mỗi bài lại mang nội dung riêng biệt, có khi không hề liên quan với nhau.

3. Yêu cầu những mã markup khác nhau cho tiêu đề website trên nhưng trang khác nhau. Độc giả có thể đọc trọn nội dung của từng bài viết riêng biệt ngay trên trang chủ khi áp dụng hiển thị đầy đủ bài viết theo dạng blog, và do đó, thẻ h1 sẽ được thêm vào tiêu đề từng bài viết thay vì tiêu đề của cả site như giải thích ở phần đầu bài viết này.

4. Hạn chế về bản chất của tiêu đề website. Trong nhiều trường hợp, tiêu đề của website có thể chẳng liên quan gì tới nội dung cả trang. Và như thế, tiêu đề website lúc này chẳng thể coi là tiêu đề chính, nói lên nội dung của các bài viết trên website. Vậy ta phải thay đổi không đặt tiêu đề website cho phù hợp với nội dung? Đây chính là vấn đề hạn chế ta nhắc tới. Ta cần một tiêu đề website ngắn gọn, thể hiện thương hiệu, trong khi lại cần thể hiện cả nội dung xuyên suốt của các bài viết.

Giải pháp nào cho các vấn đề trên? HTML5 chính là câu trả lời ở đây!

Cách tạo Document Outline trong HTML5

Xem xét từng vấn đề ở trên và bạn sẽ nhận thấy một điểm chung: giả định mỗi trang web là một văn bản riêng biệt thuộc một chủ đề riêng và yêu cầu tiêu đề riêng. Giải pháp đơn giản cho các vấn đề này xuất phát từ khả năng phát hiện nếu một rằng có nhiều phần nội dung khác nhau và mỗi chủ đề lại có một tiêu đề riêng cho chúng. Khi xác định được mỗi bài viết trên trang là riêng biệt, ta có thể đặt tiêu đề cho chúng đúng với nội dung mà chúng đề cập và mỗi bài, mỗi tiêu đề có tầm quan trọng như nhau.

Hơn nữa, nếu làm rõ được rằng, tiêu đề trang web (site title) không biểu thị tất cả nội dung của trang đó, vấn đề thứ 4 ở trên sẽ được giải quyết. Và ta có thể giữ tiêu đề trang web trong cặp thẻ H1 ở tất cả các trang khác nhau của website. Do đó, các tiêu đề mà không biểu thị nội dung bài viết thì ta có thể đặt thẻ h1 và cho chúng nằm ở đâu cũng được. Bạn có thể thấy ngay, tiêu đề Author Box trên blog của mình được đặt trong thẻ H1 và tất nhiên nó chẳng nói lên nội dung bài viết này!

Các khía cạnh quan trọng của HTML5 trong việc tạo Document Outlines

Trước khi HTML5 ra đời, Document Outlines được lập ra phần lớn dựa vào các thẻ Heading (h1-h6), và HTML5 đã tối ưu những điểm sau để thuận tiện trong việc tạo Document Outlines:

Sectioning Root – là các container nhằm xác định phạm vi giành cho từng phần nội dung riêng biệt được định nghĩa bên trong nó. Mỗi mục gốc này sẽ có một outline của riêng nó. Mục gốc cao nhất của bất kỳ trang web nào cũng được hình thành dựa trên thẻ body, vì vậy luôn có 1 Document Outlines cho bất kỳ trang web nào, bắt đàu từ thẻ body, rồi đến các phần bên trong nó. Ta có các thẻ khác thuộc Sectioning root là <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>

Sectioning Content – Mỗi mục gốc lại chia ra bởi các mục nhỏ hơn chứa nội dung. Nhưng mục này được tạo ra bởi các thẻ như bởi các thẻ <section>, <article>, <nav>, <aside> bao quanh những phần nội dung khác của trang web. Tùy vào ý nghĩa của từng nội dung mà sử dụng các thẻ trên cho phú hợp.

Heading Content – gồm các thẻ heading từ h1 tới h6 mà chúng ta đã quen thuộc, đại diện cho tiêu đề của từng phần nội dung. Khi không có các thẻ thuộc “Sectioning Content”, sự xuất hiện của một thẻ heading được hiểu là bắt đầu của một phần nội dung mới.
Cách sử dụng các thành phần trong HTML5 khá đơn giản, thường sẽ như sau:

  • Mục gốc của văn bản được tạo bởi thẻ body;
  • Bên trong mục gốc, văn bản html được chia nhỏ thành nhiều phần khác nhau;
  • Các thẻ Heading được đặt vào vị trí mà mỗi mục nội dung yêu cầu, với thẻ heading đầu tiên trong mỗi phần nội dung sẽ được xem như dấu hiệu bắt đầu phần đó.

HTML5 không chỉ có từng đó, các bạn có thể tìm hiểu thêm tại W3C, tuy nhiên, với các yếu tố trên đã giúp chúng ta giải quyết được tất cả những vấn đề đã nêu ở phần trên.

Chưa có bình luận

Vui lòng để lại bình luận của bạn vào ô bên dưới