Trang chủ » Tài liệu Seo

Sử dụng nhiều thẻ H1 trên một trang HTML5 liệu có hại cho SEO?

910 99

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

loading...

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ị full 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í dụ tiêu đề blog của mình là “Ngọc Tú Blog” mang tính chất cá nhân hơn và chẳng có sự “liên quan nhẹ” nào tới nội dung mà blog hướng tới, hay nội dung của bất kỳ bài viết nào. 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.

Cách giải quyết vấn đề tạo Document Outlines

Hãy quay ví dụ ở phần trước, ta sẽ chuyến nó sang sử dụng HTML5 và sẽ cần thay đổi sau:

  1. <!DOCTYPE html> thêm vào để khai báo đây là một tài liệu HTML5
  2. <article> đặt bao quanh bài viết thay cho thẻ <div>
  3. Các thẻ tiêu đề khác đều chỉnh tăng thêm 1 level
  4. Tiêu đề mang tính thương hiệu (tiêu đề website chẳng hạn) cũng được sử dụng.

Ta sẽ có mã ví dụ như sau:

<!DOCTYPE html>
<html>
<head>
    <title>Mã HTML trước khi có HTML5</title>
</head>
<body>
    <div>
        <h1>Tiêu đề chung - Tiêu đề website</h1>
    </div>

    <article>
        <h1>Tiêu đề bài viết thứ nhất</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <h2>Mục lớn trong trang web</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <h3>Mục con trong trang web</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <h2>Mục lớn thứ 2 có trong trang web</h2>
    </article>

    <article>
        <h1>Tiêu đề bài viết thứ hai</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <h2>Mục lớn trong trang web</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </article>
</body>
</html>

Và Document Outlines sẽ có dạng

  • 1. (document)Tiêu đề chung – Tiêu đề website
    • 1. (article)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. (article)Tiêu đề bài viết thứ hai
      • 1. (h2)Mục lớn trong trang web

Điều khác biệt đầu tiên chúng ta nhận thấy là sự xuất hiện của thẻ <article> trong Document Outlines, và ngay bên cạnh là heading của mỗi bài viết. Chú ý rằng, trong HTML5,  thẻ <article> được sử dụng để chỉ ra sự “hoàn thành hay khép kín” của các thành phần trong một tài liệu, trang, ứng dụng hay cả trang web và đó là nguyên tắc phân phối độc lập hay tái sử dụng. Đó có thể là bài viết trên forum, bài báo trên trang tạp chí, tin tức, hay bài viết trên blog, thậm chí bình luận của bạn đọc, hay bất kỳ mục độc lập nào khác của nội dung (tìm hiểu thêm trên W3C)

Chính sự xuất hiện của thẻ <article> ngay bên cạnh tiêu đề bài viết thay vì thẻ heading như trước đây, giúp chúng ta thấy được rằng:

  • Mỗi bài viết được xem như một phần riêng biệt của trang, có tầm quan trọng như nhau;
  • Tiêu đề bài viết được thay bằng các từ có ý nghĩa, biểu thị nội dung của bài đó
  • Bởi vì mỗi bài viết có một tiêu đề riêng biểu thị nội dung của nó, nên tiêu đề website (site title) sẽ không đại diện cho các bài đăng trên trang nữa.

Điều này có nghĩa là tất cả các vấn đề chúng ta nêu ra trước đó đã được giải quyết

  • Chúng ta không còn bất kỳ sự không thống nhất nào giữa nội dung và các tiêu đề. Chúng đều được liên kết rất rõ ràng – vấn đề 1 được giải quyết;
  •  thẻ <article> chỉ rõ các mục riêng trong một trang và các bài viết là hoàn toàn độc lập thay vì được xem như một phần riêng về một mảng nội dung nào đó trên trang – vấn đề 2 được giải quyết;
  • Bởi vì tất cả các thẻ  thẻ <h1> được sử dụng để đánh dấu đã được nhận diện một cách chính xác, chúng ta không còn phải lo lắng về những thẻ khác nhau và không thống nhất nữa, cũng như không cần thêm thẻ khác nhau vào site title khi ở những trang riêng biệt (trang chủ và trang bài viết…)- nó có thể được đánh dấu bằng  thẻ <h1> trên tất cả các trang – Vấn đề 3 được giải quyết;
  • Site Title không còn được coi là tiêu đề nội dung của bài đăng, chúng ta có thể đặt chúng là gì ta thích, ví dụ thương hiệu, tên blog của bạn. Nó không còn mang vai trò là thẻ đại diện cho tất cả các nội dung liên quan – vấn đề 4 được giải quyết.

 

10 Thủ thuật SEO cơ bản cho người mới bắt đầu học

10 Thủ thuật SEO cơ bản cho người mới bắt đầu học Đăng bởi: Tài Liệu Tin Học 18-06-2014 mục Tài liệu Seo
Ngày nay, cùng với sự phát triển chóng mặt của công nghệ và Internet, lượng người dùng Internet cũng tăng lên với một con số khổng lồ. Internet trở thành một thị trường tiềm năng và vẫn đang phát triển không ngừng. Đặc biệt, nhu cầu tìm kiếm thông tin của người dùng Internet ngày càng nhiều hơn. Do đó, nếu như bạn chỉ thiết kế web mà không quan tâm đến việc marketing trên Internet thì bạn đang có một thiếu sót rất lớn và đồng thời khiến cho website của bạn được thiết kế một cách vô ích.

10 Thủ thuật SEO cơ bản cho người mới bắt đầu học

514 Lượt xem

Hướng dẫn SEO onpage cho website

Hướng dẫn SEO onpage cho website Đăng bởi: Tài Liệu Tin Học 18-10-2014 mục Tài liệu Seo
SEO onpage tức là công việc đầu tiên trong quá trình làm seo của bạn. Bằng cách làm nội dung trực tiếp trên website của mình nhằm giúp website có được những bài viết tối ưu nhất trên các công cụ tìm kiếm có thể tìm thấy bài viết của bạn một cách chính xác và nhanh nhất

Hướng dẫn SEO onpage cho website

479 Lượt xem