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

Tiếp theo bài trước Onpage TUT – phân định thành phần website sử dụng ngôn ngữ có cấu trúc (P1), phần này mình hướng dẫn thiết lập schema từng phần cho website sử dụng WordPress. Mình nhắc lại là Schema nó có nhiều thuộc tính để áp dụng tùy thuộc nội dung website của bạn, ở đây mình chỉ đưa ra ví dụ cho website dạng tin tức nhé, bạn có thể vào trang của họ để tìm thuộc tính phù hợp cho kiểu website của mình bằng nền tảng đã có ở bài 1 của phần này.

[title style=’1′]1. Header.php[/title]

Phần này đầu tiên chúng ta khai báo kiểu dữ liệu của toàn trang là gì: webpage hay profile page, contact page, about page… Thông thường ở trang chủ chúng ta sẽ để dạng định danh là webpage nhằm khai báo toàn bộ các thành phần có trên trang một cách đầy đủ nhất. Khi vào các trang Liên hệ, giới thiệu hay thông tin cá nhân … sẽ thay đổi sang kiểu dữ liệu tương ứng.
– Chúng ta sẽ khai báo thuộc tính này vào thẻ đầu tiên của trang. Một thẻ HTML đầu đầy đủ thông tin nó giống thế này:

– Tiếp theo là các thẻ Meta của trang, chúng ta có 3 thẻ thường dùng và sau khi thêm Schema vào nó sẽ giống thế này:

– Giờ đến phần khai báo thông tin trang (logo, link ảnh logo, chủ đề website, có thể kèm theo link dẫn đến một số trang như giới thiệu, đội ngũ nhân viên, cơ sở vật chất….
Cả đoạn này sau khi thêm Schema sẽ giống thế này:

Hầu hết các bạn dùng WP thường sử dụng Plugin Yoast SEO nên mình chỉ thêm vài đoạn như thế thôi vì Yoast SEO nó đã hỗ trợ bạn khai báo các thành phần còn lại rồi.

– Một thành phần thường thấy trên header nữa là Menu header. Chúng ta sử dụng Itemtype là kiểu http://schema.org/SiteNavigationElement để định nghĩa. Hãy tìm đến phần code menu trong trang để thêm kiểu dữ liệu vào. Sau khi thêm cấu trúc thì sẽ giống thế này:

– Và cuối cùng là định danh các page thương hiệu profile page, contact page, about page…

Theo thứ tự: là trang liên hệ, thông tin cá nhân, giới thiệu và trang tìm kiếm. Bạn sẽ thay đổi các item phù hợp với chủ đề mỗi page. Trong WordPress bạn có thể viết hàm sau để tự động thay giá trị trên thẻ HTML, bạn thêm vào file function.php xuống dưới cùng trong thẻ ?> đoạn code sau:

Trên thẻ HTML bạn cắm hàm này lên sẽ thành:

Xong template Header nhé, chuyển qua phần tiếp theo sẽ tối ưu các template còn lại : Onpage TUT – phân định thành phần website sử dụng ngôn ngữ có cấu trúc (P3)

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

avatar