Onpage TUT – phân định thành phần website sử dụng ngôn ngữ có cấu trúc (P1)

Các bạn đã biết: Onpage tức là làm website thân thiện với người dùng và với Google. Theo mình, một website được cho là thân thiện với Google thì có thể cũng đúng vậy với người dùng, nhưng thân thiện với người dùng thì chưa chắc đã đúngvậy với Google. Vì thế, trong công việc tối ưu hóa trên trang bạn cần cố gắng làm tốt cả hai việc này, và đa phần mỗi mảng đều có những phần việc riêng của nó mà bạn cần phải tối ưu. Bản thân Google cũng đang nỗ lực thay đổi thuật toán để tính “thân thiện” của bot có thể dung hòa, đồng nhất với người dùng hơn.
Chúng ta có thể thấy điều này qua một vài công việc tối ưu cho Google cũng là cho người dùng. ví dụ: site nội dung tốt thì khách truy cập cảm thấy hứng thú và ở lại lâu hơn, Google dựa vào time on site để đánh giá tỷ lệ thoát trang và nâng hạng url đó…

[title style=’1′]Trong bài này,[/title]
Google nói rằng khi bot của họ index một url trên website của bạn thì họ cần thêm những “chỉ dẫn” trên trang để đánh giá web chính xác hơn. Nếu website được phân chia rõ ràng thành các phân vùng cụ thể hay định nghĩa các khu vực trong site rõ ràng theo một cấu trúc được định sẵn thì sẽ giúp khai báo cho Google bot nhân diện tốt hơn, từ đó điều hướng chính xác nơi mình cần Gbot ghé đến nhiều nhất. Điều này có thể giúp tăng mức độ tin tưởng cho website, tăng thứ hạng url cần SEO và khả năng thay đổi cách hiển thị kết quả trên công cụ tìm kiếm.

Cái mình đang nói đến là “Dữ liệu có cấu trúc”, sử dụng các Item được định sẵn bởi Schema. Mục tiêu của bài này là giúp website định ra được 4 cấu trúc chính: Header, webpage, footer, Site Navigation. Ngoài ra còn một số thành phần trên site cũng cần được định danh như: Profile page, Sidebar, Contact page, About page, Organization…Hay một số item mô tả các thẻ meta như meta title, meta descriptions…
Mình sẽ giải thích qua những phân vùng mình kể trên và item đi kèm với nó để dễ hiểu hơn. Chi tiết tất cả thuộc tính bạn xem tại: https://schema.org

Đầu tiên, Schema cung cấp 3 loại thẻ để định danh, ta có ví dụ:
[highlight color=’white’ backcolor=’#ff0000′]<.div itemsope="itemsope" itemprop="blogpost" itemtype="http://schema.org/BlogPosting"><./div>
[/highlight]
Trong đó:
[quote style=’1′ cite=”]Itemscope – Xác định 1 phân vùng lớn chịu ảnh hưởng bởi các thuộc tính hoặc kiểu dữ liệu bên trong nó.[/quote]
[quote style=’1′ cite=”]Itemprop – Xác định thuộc tính cần áp dụng cho phân vùng.[/quote]
[quote style=’1′ cite=”]Itemtype – Kiểu dữ liệu cần thể hiện[/quote]

Lưu ý:
– Itemscope chỉ áp dụng cho một phân vùng lớn để nhấn mạnh, những item nhỏ bên trong không nhất thiết dùng.
– Itemtype chỉ dùng khi itemprop có nhiều kiểu dữ liệu, chẳng hạn thuộc tính itemprop=”fileFormat” sẽ có 2 kiểu dữ liệu là itemtype=”https://schema.org/Text” hoặc itemtype=”https://schema.org/URL”. Tùy vào mục đích mà bạn sẽ chọn kiểu phù hợp.

1. Phân vùng Webpage – https://schema.org/WebPage
Phân vùng đánh dấu toàn bộ các thành phần chính của website bao gồm các yếu tố: Breadcrumb (breadcrumb), khu nội dung chính của page (mainContentOfPage), các liên kết được giới thiệu (relatedLink), Tiêu đề trang và tiêu đề các bài viết (headline), Các văn bản mô tả (text)… Webpage thường dùng chủ yếu trên toàn bộ các page của website.
2. Phân vùng Header – https://schema.org/WPHeader
Định danh các yếu tố giới thiệu tác giả (about), meta keywords (keywords), meta descriptions (description), Ảnh đại diện (thumbnailUrl), Video đại diện (VideoObject), các url liên quan (sameAs) như link fanpage, link twitter..
3. Phân vùng footer – https://schema.org/WPFooter
Giới thiệu tác giả (about), bình luận (comment), copyright (copyrightYear), nhà cung cấp (provider) …
4. Menu trang – https://schema.org/SiteNavigationElement
Bao gồm tên menu (name), Link menu (url), ảnh đại diện (image).
5. Sidebar – https://schema.org/WPSideBar
Bao gồm: thumbnailUrl, headline, text, url, dateModified tùy bố trí trong sidebar của bạn là gì mà chèn cho thích hợp.
6. Organization – https://schema.org/Organization
Khai báo các thông tin về đơn vị chủ quản website như các thuộc tính: priceRange, images, telephone, currenciesAccepted, openingHours, address
7. Contact page, About page, Profile page
Đây là những kiểu dữ liệu thay thế cho kiểu Webpage, nghĩa là khi người dùng click vào những page về giới thiệu, liên hệ, hồ sơ thì sẽ dùng cấu trúc những kiểu dữ liệu trên để thể hiện.

[title style=’1′]CÁCH DÙNG MỘT SỐ THUỘC TÍNH CƠ BẢN[/title]

Mình sẽ hướng dẫn bạn sử dụng 7 thuộc tính trên chèn vào website để chia bố cục web theo đúng cấu trúc mà Google đề nghị. Vì mã nguồn WordPress được sử dụng khá phổ biến nên mình sẽ chỉ hướng dẫn thao tác trên các file của source này.

Trong quá trình bạn thao tác theo hướng dẫn này, hãy sử dụng Google Structured Data Testing Tool để test những gì bạn vừa làm xem đã chuẩn chưa hay còn lỗi.

Dài rồi, qua bài tiếp theo nhé: Onpage TUT – phân định thành phần website sử dụng ngôn ngữ có cấu trúc (P2): Header.php

Ý kiến của bạn thế nào?

avatar