Breadcrumbs SEO Blogspot

Hôm nay mình sẽ hướng dẫn các bạn tạo Breadcrumbs cho Blogspot - Tạo breadcrumbs cho Blogger - Tạo breadcrumbs cho Blogspot hiện trên kết quả tìm kiếm - Hiển thị breadcrumbs kết quả tìm kiếm. Thế nào là Breadcrumbs? Breadcrumbs là gì?

1. Breadcrumbs là gì?

Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Nếu một website có cấu trúc phức tạp mà lại không có Breadcrumb thì người dùng dễ lâm vào tình trạng: ô mình đang ở trang nào, mục nào đây nhỉ?

Ví dụ về Breadcrumb:

Trang chủ > Thủ thuật > Missing required field entry title Blogspot
www.jakub-bb.net/2014/09/missing-required-field-entry-title.html

Lợi ích của Breadcrumb
- Giúp người dùng biết được vị trí và di chuyển tốt giữa các trang web
- Giúp Google đánh giá chính xác PR, PA và keyword relation của một trang web.

2. Breadcrumbs và Google

Việc Google tìm kiếm ra các trang web, blog có Breadcrumb sẽ làm cho bài viết của bạn trông hấp dẫn hơn (ví dụ như trong ảnh trên). Còn đối với tôi là một sự tin tưởng không hề nhẹ :) và đương nhiên tôi sẽ click vào những trang có Breadcrumbs xem có thông tin tôi muốn tìm kiếm không trước khi vào xem các trang còn lại.

3. Tối ưu hóa SEO cho Breadcrumbs.

Có rất nhiều người đã nhét thêm một số từ khóa vào Breadcrumbs nhằm neo văn bản, các liên kết. Và quả thực nó rất có tác dụng cho web, blogspot giúp tối ưu tìm kiếm cho bài viết đó. Ở ví dụ trên chúng ta đã biết được thế nào là Breadcrumbs.

Vậy thì nó sẽ có dạng kiểu như sau:

Từ khóa (của trang chủ) > Từ khóa (của nhãn hay chuyên mục) > Từ khóa (của bài viết)
Trang chủ > Thủ thuật (từ khóa chuyên mục) > Missing required field entry title Blogspot (từ khóa bài viết)

Việc còn lại là đặt tên cho chuyên mục và bài viết ngắn gọn mà bao hàm đầy đủ các từ khóa thì việc Seo cho website, blogspot một phần đã tốt hơn.

4. Tạo Breadcrumbs cho website

Dưới đây là code Breadcrumbs HTML chuẩn cho website, tôi sẽ chú thích bên dưới code để cách bạn hiểu rõ hơn:

<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.jakub-bb.net/" itemprop="url" rel="tag">
<span itemprop="title">Trang chủ</span>
</a>
</div>
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.jakub-bb.net/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt" itemprop="url" rel="tag">
<span itemprop="title">Thủ thuật</span>
</a>
</div>
<div itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.jakub-bb.net/2014/09/missing-required-field-entry-title.html" itemprop="url" rel="tag">
<span itemprop="title">Sửa lỗi: Missing required field entry title Blogspot</span>
</a>
</div>

Có 3 sự thay đổi:

1. Thẻ <div> với thuộc tính itemscope và  itemtype="http://data-vocabulary.org/Breadcrumb" bao quanh mỗi liên kết.
2. Mỗi liên kết bây giờ có một thuộc tính itemprop="url".
3. Mỗi liên kết bao quanh tại một thẻ <span> với một thuộc tính itemprop="title".

3 sự thay đổi trên các bạn hiểu là chúng ta đã đánh dấu bằng các thuộc tính cho Google hiểu đó chính là Breadcrumb với url và title (liên kết và tiêu đề).

5. Tạo Breadcrumbs cho Blogspot

Giờ thì dựa trên code HTML chúng ta viết code Breadcrumbs cho Blogspot.
Bước 1: Vào Template > Mẫu > Chỉnh sửa HTML tìm kiếm ]]></b:skin> và thêm CSS sau vào trước:

#Breadcrumbs {
  color:#000;
  font-size:14px;
  margin-bottom:15px;
  padding:10px;
  background:#FFCC00;
  border:2px solid #BBBBBB;
  font-weight:bold;
  text-decoration:none;
}

#Breadcrumbs a {
  color:#000,font-size:14px;
}

#Breadcrumbs div {
  float:left;
}

Bước 2: Tìm kiếm từ sau:

<b:includable id='post' var='post'>

Và dán code XML sau vào trước nó:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='Breadcrumbs'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' rel='tag'>
<span itemprop='title'>
Tên blog của bạn
</span>
</a>
&#187;
</div>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'>
<span itemprop='title'>
<data:label.name/>
</span>
</a>
&#187;
</div>
</b:if>
</b:loop>
<span>
<data:post.title/>
</span>
</b:if>
</b:loop>
</div>
</b:if>

6. Lỗi: itemtype not recognized khi kiểm tra Rich Snippet của Google Webmasters.

Khi các bạn kiểm tra Rich Snippet của Google Webmasters báo Lỗi: itemtype not recognized là do code đã bị sai.

Và nếu các bạn đã copy code Breadcrumbs của trang Bít Tuốt Blog và một trang khác thì mình xin thông báo code đó đã bị sai chính tả. Chả hiểu mấy ổng đó làm ăn kiểu gì mà hơn 1 năm rồi vẫn để cái bài viết đó. Chả biết copy lại ở đâu mà chẳng check làm mình kiểm tra webmaster mà ko hiểu lỗi gì. Mãi mới biết là sai lỗi chính tả của code.