Tối ưu breadcrumb giúp Google hiểu cấu trúc website tốt hơn potx

Tối ưu breadcrumb giúp
Google hiểu cấu trúc
website tốt hơn

Vấn đề này có lẽ cũng không mấy mới mẻ, các bạn làm SEO
chắc cũng hay để ý khi tìm kiếm trên Google có một
số website Google hiển thị cấu trúc breadcrumb trên snippets.
Trước hết mời các bạn xem hình dưới đây nếu chưa hình
dung được điều này:


Click vào đây để xem ảnh gốc.


Hình mô tả Google hiển thị breadcrumb của website

Ngoài ra, bạn có thể bấm vào đường dẫn dưới đây để có được
cái nhìn thực tế hơn:


ddress&ie=&oe=


Bây giờ tôi lấy link đầu tiên làm ví dụ để hướng dẫn các bạn
cách để giúp Google hiểu được breadcrumb cho website của
mình. Sau khi vào link đầu tiên theo query tìm kiếm ở trên,
bạn sẽ dễ dàng nhìn thấy breadcrumb củadiễn đàn Khoa Học
Việt theo như hình bên dưới:

Qua đó bạn sẽ dễ dàng nhận thấy rằng Google đã hiển thị
breadcrumb theo hình trên ở trang kết quả tìm kiếm. Thực tế
nếu website của bạn có cấu trúc thẻ HTML tốt thì Google
vẫn có thể phân tích và nhận biết được các breadcrumb này.
Tuy nhiên, có một số cấu trúc chuẩn HTML bạn có thể áp
dụng để giúp Google hiểu được breadcrumb dễ dàng hơn.
Nếu bạn dùng chức năng Inspect Element trong Google
Chrome hoặc của pluginsFirebug sẽ thấy đoạn breadcrumb
trên có mã HTML như bên dưới:
Code:
<ol class="breadcrumb top ipsList_inline left">
<li itemscope="" itemtype="http://data-
vocabulary.org/Breadcrumb">
<a href=" itemprop="url">
<span itemprop="title">Diễn đàn Khoa học Kỹ
thuật</span>
</a>
</li>
<li itemscope="" itemtype="http://data-
vocabulary.org/Breadcrumb">
<span class="nav_sep">→</span>
<a href=" />khoa-hoc-tu-nhien/" title="Trở về KHOA HỌC TỰ NHIÊN"
itemprop="url"><span itemprop="title">KHOA HỌC TỰ
NHIÊN</span></a>
</li>
<li itemscope="" itemtype="http://data-

vocabulary.org/Breadcrumb">
<span class="nav_sep">→</span>
<a href=" />khoa-hoc-ky-thuat/" title="Trở về Khoa Học Kỹ Thuật"
itemprop="url"><span itemprop="title">Khoa Học Kỹ
Thuật</span></a>
</li>
<li itemscope="" itemtype="http://data-
vocabulary.org/Breadcrumb">
<span class="nav_sep">→</span>
<a href=" />thuat-hang-khong/" title="Trở về Kỹ Thuật Hàng Không"
itemprop="url"><span itemprop="title">Kỹ Thuật Hàng
Không</span></a>
</li>
</ol>
Phân tích đoạn HTML trên bạn có thể bỏ qua những thuộc
tính class mà chỉ cần quan tâm đến các thuộc tính
nhưitemscope, itemtype, itemprop.


- itemscope: dùng để định nghĩa khu vực cho từng thành phần
trong breadcrumb.


- itemtype: dùng để khai báo cho Google biết định nghĩa và
nhận dạng data cho thuộc tính itemprop.


- itemprop: thuộc tính để định dạng cấu trúc, để định dạng
cho cấu trúc breadcrumb bạn cần những properties
như url, title.

Khi làm xong cấu trúc như trên bạn chỉ cần chờ một thời gian
để Google cập nhật lại website của mình và sẽ thấy Google
bắt đầu hiển thị các breadcrumb trên kết quả tìm kiếm.


Để tìm hiểu thêm về vấn đề này bạn có thể tham khảo thêm
tại đường
dẫn: &answer=185
417


Ngoài ra, sau khi làm xong, để biết mình làm đúng hay sai,
bạn có thể sử dụng Rich Snippets Testing Tool của Google
để kiếm tra. Nếu nhìn thấy breadcrumb xuất hiện thì thức là
bạn đã làm đúng.


Tiếc cái là khi bạn dùng ngôn ngữ tiếng Việt mà tìm kiếm đối
với những page đã được lưu trong bộ nhớ cachechuối hột
thì không nhìn thấy breadcrumb.