Tối ưu breadcrumb để 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 this bar to view the full image.

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:


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ủa diễ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 plugins Firebug sẽ thấy đoạn breadcrumb trên có mã HTML như bên dưới:

Mã:

<ol class="breadcrumb top ipsList_inline left">
    <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>
    <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>
</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: http://www.google.com/support/webmas...&answer=185417


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ớ cache chuối hột thì không nhìn thấy breadcrumb.

Updated 04/10/2011: Hiện nay thì Google đã thay đổi giao diện và dành không gian cho việc hiện đầy đủ thông tin snippet hơn.