BabyWolf - Nguyễn Vũ Tuấn Anh

Blog cá nhân chia sẻ về thiết kế web, SEO, Online Marketing, giải pháp web, cuộc sống và nhật ký của tôi.

Làm Rich Snippets cho Breadcrumb trên Google với plugin Wordpress Breadcrumb NavXT

Lâu rồi không kiểm tra email trên Google+. Hôm nay kiểm tra mail thì thấy có một bạn gửi email trên Google+ của mình hỏi về việc làm Breadcrumb xuất hiện trên Google search với plugin Wordpress Breadcrumb NavXT.

Thật sự thì mình cũng không rành Wordpress lắm và cũng ít khi nghiên cứu về Wordpress. Tôi chỉ bắt đầu mò mẫm Wordpress từ tháng 4/2011 khi bắt đầu làm blog với tên miền tonynguyen.site này. Tuy nhiên mình cũng đã dùng plugin Breadcrumb NavXT cho blog của mình và modify một số thứ cho phù hợp với Google.

Sẵn tiện có bạn hỏi mình thông qua Google+ nên tôi gửi bài lên đây chia sẽ cho những bạn muốn làm nhưng chưa biết cách làm. Nếu bạn nào rành Wordpress và có cách nào hay hơn thì vui lòng chia sẽ bằng việc comment bên dưới.

Hôm trước, mình cũng đã có một bài giới thiệu về việc cách tạo Breadcrumb cho website theo cấu trúc Rich Snippets của Google. Nhìn chung mục đích chính là bạn chỉ cần tạo ra mã HTML theo đúng chuẩn thì sẽ làm được. Các bạn có thể xem bài viết đó tại đây: Tối ưu breadcrumb giúp Google hiểu cấu trúc website tốt hơn.

Bước 1: Bạn cần cài đặt plugin Breadcrumb NavXT cho Wordpress.

Bước 2: Bạn mở file breadcrumb_navxt_class.php trong wp-content/plugins/breadcrumb-navxt để chỉnh sửa một số thứ như sau:

  1. Trong function assemble thêm </span> trước </a>.

  2. Trong function post_terms thêm </span> trước </a>.


Bước 3: Bạn vào Settings > Breadcrumb NavXT chỉnh sửa một số thứ sau:

1. Tab Posts & Pages:

1.1 Post Template:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to %title%." href="%link%"><span itemprop="title">%htitle%</span></a></div>

1.2 Page Template:
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to %title%." href="%link%"><span itemprop="title">%htitle%</span></a></div>

2. Categories: Categories Template
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to the %title% category archives." href="%link%"><span itemprop="title">%htitle%</span></a></div>

3. Tags: Tag Template
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to the %title% tag archives." href="%link%"><span itemprop="title">%htitle%</span></a></div>

4. Picture Tag: Picture tag Template
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to the %title% Picture Tag archives." href="%link%"><span itemprop="title">%htitle%</span></a></div>

5. Date Archives: Date Template
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to the %title% archives." href="%link%"><span itemprop="title">%htitle%</span></a></div>

6. Mecellanous: Search Template
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" title="Go to the first page of search results for %title%." href="%link%"><span itemprop="title">%htitle%</span></a></div>

Vì phải tự mò lại để làm hướng dẫn trên, có thể có sai sót, các bạn làm thử nếu không được thì comment lại đây cho mình biết nhé.

Ngoài ra, trên blog của Thành Nhọ cũng có một bài hướng dẫn tạo Breadcrumb cho Wordpress bằng một cách khác. Các bạn có thể tham khảo theo bài viết dưới đây:

Tạo Breadcrumb cho Wordpress theo chuẩn của Google