Tối ưu hóa HTML5 cho Seo Onpage

Hiện tại HTML5 đã hoàn thiện vì thế đối với bất cứ một chuyên gia SEO nào biết nhìn xa trông rộng thì kiến thức về HTML5 và sự ảnh hưởng của nó đến SEO là những thông tin rất cần thiết và không thể bỏ qua. Trên thực tế những thay đổi, khái niệm mới của HTML5 sẽ ảnh hưởng đến các nhà phát triển và thiết kế web nhiều hơn các chuyên gia SEO nhưng sẽ thật là sai lầm nếu nói rằng HTML5 sẽ không ý có nghĩa trong việc thay đổi các thủ thuật SEO.

Xác định tư tưởng thay đổi tối ưu trang dùng HTML5

Là một chuyên gia SEO, bạn có chỉ cần quan tâm chủ yếu đến những thay đổi về đặc điểm kỹ thuật trong HTML5 sẽ ảnh hưởng đến công việc (SEO) của bạn nhất.

- Chia trang thành nhiều phân khúc: Các công cụ tìm kiếm đang được nhận định là ngày càng thông minh hơn và chúng có khả năng hiểu được các phần của 1 trang. Về cơ bản, phân khúc trang nghĩa là một trang được chia thành nhiều phần riêng biệt (nội dung chính, menu, tiêu đề, footers, liên kết, …vv) và các bộ phận đó được coi là các mục riêng biệt. Trong phiên bản HTML trước không có cách nào cho một chủ web cho công cụ tìm kiếm biết như thế nào để phân biệt các phần của một trang nhưng điều này đã thay đổi trong HTML5.

- Các thẻ ngữ nghĩa: Phiên bản HTML trước đây chúng ta sử dụng các thẻ không ngữ nghĩa như <div>, <span>,... để thể hiện nội dung, việc cần làm là chuyển sang sử dụng thẻ ngữ nghĩa có sẵn và những thẻ bổ xung trong phiên bản HTML5 như <form>, <table>, <article> ... Thẻ ngữ nghĩa chính là tư tưởng chính và thông suốt của HTML5 và chắc chắn rằng google bot sẽ hiểu nội dung nhanh hơn nhờ vào cấu trúc chuẩn HTML5

Thay vì dùng các thẻ div để dàn trang như rất nhiều website vẫn đang làm(<div id="nav"> <div class="header"> <div id="footer">) hãy dùng HTML5 để dàn trang

Các thẻ HTML5 chính mà SEOER cần chú ý và ảnh hưởng của chúng đến SEO

Mặc dù HTML5 có rất nhiều thay đổi tuy nhiên bạn không cần biết hết chúng, chỉ cần chú ý đến những thẻ quan trọng thường dùng trong tối ưu OnPage mà tôi sắp liệt kê sau đây:

- Thẻ <section>: Dùng để chứa, bao một phần của trang, tài liệu

- Thẻ <nav>: Định nghĩa, chứa naviagtion link của trang web hay thậm chí của một bài viết

- Các thẻ <header>, <footer>, <main>: Định nghĩa đầu trang, chân trang, phần chính (main) của một trang, một bài viết hay một section

- Thẻ <article>: Định nghĩa một bài viết ở bên trong nó, thẻ này bạn nên dùng để bao toàn bộ bài viết trong trang chi tiết hoặc bao các bài trong một list các bài viết ở trang danh sách.

Ví dụ:

<article>
 <h1>Tiêu để của bài báo hay blog chắc chắn nên nắm trong thẻ h1</h1>
 <p>Còn đây là nội dung của bài báo, nằm trong một thẻ p (paragraph). Và thật tuyệt vời toàn bộ nội dung của bài báo nằm trong thẻ article</p>
</article>

- Thẻ <aside>: Định nghĩa phần nội dung riêng hoặc ở bên của một trang, thẻ này bạn nên dùng cho các phần như sidebar, phần nội dung chứa bài liên quan, các box quản cáo, mạng xã hội ở bên cạnh trang.

Ví dụ: Ngoài ví dụng ở hình 1 dùng để bao nội dung của sidebar khi dàn trang, chúng ta có thể lấy ví dụ về ý nghĩa thực tế của thẻ aside như sau: Bạn viết blog về kỳ nghỉ của gia đình bạn về mùa hè vừa qua

<article>
 <h1>Hè 2016 bên những người mà tôi thương yêu nhất ...</h1>
 <p>Những ngày hè thật nóng nực bla bla ...</p>
 <p>Bla bla ... Gia đình tôi đã tới Thung Nham và có một kỳ nghỉ thật tuyệt vời ...</p>
 <aside>
 <h4>Thung Nham</h4>
 <p>Khu du lịch sinh thái Vườn Chim Thung Nham cách thành phố Ninh Bình khoảng 12km về phía đông, nằm trọn trong vùng lõi của quần thể danh thắng Tràng An, cạnh khu du lịch nổi tiếng Tam Cốc - Bích Động. Từ chùa Bích Động theo tuyến đường bộ khoảng 4km là du khách đã đặt chân tới Thung Nham - xứ sở của các loài chim.</p>
 </aside>
 <p>Bla bla ... viết tiết bla ...</p>...
</article>

Ok cái Thung Nham kia không liên quan đến nội dung của bài lắm nên mô tả nó cho những người không biết thì cho vào thẻ <aside>

- Thẻ <figure>: Dùng để chứa các nội dung khép kín như hình minh họa, sơ đồ, ảnh, danh sách mã ... ở trong nó có thể dùng thêm thẻ <figcaption> để chứa mô tả hay chú thích

Ví dụ:

<figure>
  <img src="/media/2016/10/toi-uu-website.jpg" alt="Tối ưu website" width="500" height="320">
  <figcaption>Tối ưu trang website thật đơn giản</figcaption>
</figure>

Một số thẻ tạo điểm nhấn khác trong HTML5

- Thẻ <bdi>: Tách một phần của đoạn text ra như một thành phần đặc biệt trong đoạn text đó

Ví dụ: Tôi có một bảng xếp hạng người dùng là list tên của họ và điểm số thứ hạng của họ trên trang của tôi:

<ul>
 <li>Thành viên <bdi>Tú Cao</bdi>: 69 điểm</li>
 <li>Thành viên <bdi>Trần Lê Hải</bdi>: 40 points</li>
 <li>Thành viên <bdi>Linh Suri</bdi>: 30 points</li>
</ul>

Như vậy tên của thành viên được tách ra như một thành phần đặc biệt trong đoạn nội dung trong thẻ <li>, vì sao nên tách - vì tối chắc rằng nó đặc biệt, ngoài ra bạn cũng có thể style bôi đậm hoặc màu sắc,... cho nó mà bình thường vẫn dùng là thẻ <span> hoặc <div>

- Thẻ <details>: Chỉ định thêm các chi tiết mà người dùng có thể xem hoặc ẩn. Thẻ này thường để bao nội dung mà bạn có thể thấy trong các trang có một nút ẩn hiện chi tiết, nội dung trong thẻ sẽ mô tả thêm cho nội dung nào đó trong bài.

Ví dụ:

<p>Sách hướng dẫn SEO từ A-Z tác giả Giàng A Đú <button click="hienDetail();">Chi tiết</button>
<details>
  <summary>Hướng dẫn Seo từ A-Z</summary>
  <p>Tác giả: Giàng A Đú</p>
  <p>Xuất bản: 2016</p>
  <p>Thông tin chi tiết về cuốn sách ...</p>
</details>

- Thẻ <summary>: Bạn coi nó như heading của thẻ <details>

- Thẻ <mark>: Tạo điểm nhấn trong nội dung (cách mà trước đây ta dùng bôi đậm chữ của thẻ <b> hoặc <strong>), bây giờ hãy thử dùng thẻ <mark> và style cho nó

Một số thẻ định nghĩa đối tượng (đã có trong HTML4)

- Thẻ <time>: Định nghĩa ngày giờ

Ví dụ:

<p>Tôi có một cuộc hẹn trong <time datetime="2017-02-14">ngày Valentines</time>.</p>

- Thẻ <address>: Định nghĩa địa chỉ

Ví dụ:

<address>99 Nguyễn Phong Sắc, Cầu Giấy, Hà Nội</address>

- Thẻ <abbr>: Định nghĩa từ viết tắt

Ví dụ:

<p>Nghiêm túc chấn chỉnh các <abbr title="Cảnh sát giao thông">CSGT</abbr> nhận mãi lộ</p>

Như bạn thấy, các thẻ mới theo cấu trúc chung của một trang tiêu chuẩn và mỗi bộ phận (ví dụ: đầu, chân, chính phần) đều có thẻ riêng biệt. Các thẻ chúng ta vừa nói ở trên chỉ là một số (nhưng chắc chắn không phải tất cả) những thẻ mới trong HTML5, sẽ ảnh hưởng đến SEO. Có rất nhiều thẻ khác ví dụ như <audio>, <video> hoặc <dialogue> … cũng là một phần của chuẩn HTML5 và chúng sẽ cho phép tách và chỉ định nội dung thích hợp.