Hướng dẫn tạo Breadcrumbs chuẩn cho Blogspot

Breadcrumbs là một tập hợp những liên kết nhằm giúp cho người đọc có thể biết được mình đang ở đâu trong blog này. Từ đó, họ có thể dễ dàng di chuyển tới các chuyên mục chính chứa bài viết họ đang đọc hay những trang khác một cách dễ dàng và nhanh chóng.

Với Breadcrumbs, trang web của bạn trông chuyên nghiệp hơn, rõ ràng và thân thiện hơn. Nó tạo cho người dùng một cảm giác thoải mái, không bị lạc lõng khi truy cập vào blog. Từ đó sẽ làm tăng thời gian online trên blog, tăng tỉ lệ click xem trang mới.

Google cũng sẽ dựa vào Breadcrumbs để đánh giá blog của bạn. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tạo Breadcrumbs chuẩn nhất cho tất cả các trang trên blog

I. Xóa Breadcrumbs cũ

Sẽ có một số template tích hợp sẵn Breadcrumbs nhưng chưa đầy đủ, sẽ có template chưa tích hợp, vì vậy để clean bạn hãy tìm tất cả từ khóa breadcrumb và breadcrumbs xóa những gì liên quan tới nó (css, html, b:include).

II. Tích hợp

Bài viết sử dụng icon font awesome 5.

Chuyển đến tiện ích Blog1

Tại đây bạn sẽ thấy thẻ <b:includable id='main' var='top'> nếu nó chưa thu gọn lại thì click chuột vào hàng số bên trái và chèn đoạn code vào SAU nó

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:view.isPage'>
        <div class='breadcrumbs'><span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right'/> <span><data:blog.pageName/></span></div>
        <b:else/>
        <b:if cond='data:view.isPost'>
            <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
                <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><i class='fas fa-home'/>Home</a></span><i class='fas fa-chevron-right'/>
                <b:loop values='data:posts' var='post'>
                    <b:if cond='data:post.labels'>
                        <b:loop values='data:post.labels' var='label'>
                            <span typeof='v:Breadcrumb'>
                               <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>
                            </span>
                            <b:if cond='data:label.isLast != &quot;true&quot;'><i class='fas fa-chevron-right'/></b:if>
                        </b:loop>
                        <b:else/> Không có nhãn
                    </b:if>
                    <i class='fas fa-chevron-right'/><span><data:post.title/></span>
                </b:loop>
            </div>
            <b:else/>
            <b:if cond='data:view.isArchive'>
                <div class='breadcrumbs'>
                    <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right'/> <span> Lưu trữ cho <b><data:blog.pageName/></b></span>
                </div>
                <b:else/>
                <b:if cond='data:view.isMultipleItems'>
                    <div class='breadcrumbs'>
                        <b:if cond='data:blog.pageName == &quot;&quot;'>
                            <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right'/> <span>Tất cả bài đăng</span>
                            <b:else/>
                            <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right'/> <span>Bài đăng hiển thị theo <b><data:blog.pageName/></b></span>
                        </b:if>
                    </div>
                </b:if>
            </b:if>
        </b:if>
    </b:if>
</b:if>
</b:includable>

Khi dán xong code có dạng như này

Bạn cứ yên tâm sau khi lưu mẫu và F5 blogger sẽ tự sắp thẻ các thẻ includable theo thứ tự bảng chữ cái.

Bây giờ ta tiến hành hiển thị. Bạn lại mở rộng thẻ <b:includable id='main' var='top'> ra sẽ thấy trong đó có <b:include data='top' name='status-message'/>, chèn code vào SAU nó

<b:include data='posts' name='breadcrumb'/>

Viết thêm 1 ít CSS

.breadcrumbs i:before{margin:0 2px;position:relative;top:-1px}
.breadcrumbs{margin:13px 0 0;border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;font-size:15px;padding:6px 0}
.breadcrumbs i{color:#111;font-size:11px!important}
.breadcrumbs span a.bhome{color:#000}
.breadcrumbs,.breadcrumbs a{color:#000}
.breadcrumbs span a:hover{color:#0088ff}

Cuối cùng lưu mẫu lại

Hiển thị với trang index

Hiển thị với trang label

Hiển thị với trang search query

Hiển thị với trang bài viết

Hiển thị với trang tĩnh

Hiển thị với trang lưu trữ

Như vậy tôi đã giới thiệu xong cho các bạn cách tích hợp Breadcrumbs chuẩn để được index lên google. Thủ thuật không có gì khó nếu như bạn thường xuyên vọc vạch cấu trúc template blogger

Để lại bình luận nếu gặp khó khăn và chúc thành công !