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.. Hình mô tả Googl
Trang 1Tối ưu breadcrumb giúp Google hiểu cấu trúc
website tốt hơn
Trang 2Vấ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
Trang 3Hì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:
http://www.google.com/search?q=site% 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:
Trang 4Qua đó 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">
Trang 5<li itemscope=""
itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.khoahocviet.org/" 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="http://www.khoahocviet.org/dien-dan/216-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>
Trang 6<li itemscope=""
itemtype="http://data-vocabulary.org/Breadcrumb">
<span class="nav_sep">→</span>
<a href="http://www.khoahocviet.org/dien-dan/90-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="http://www.khoahocviet.org/dien-dan/208-ky-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>
Trang 7</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
Trang 8Khi 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:http://www.google.com/support/webmas &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
Trang 9Tiế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