Hướng dẫn thêm dữ liệu cấu trúc Breadcrumb cho bài viết

Những bài hướng dẫn tạo Breadcrumb cho Blogspot thì hầu như đa số Blog nào cũng có bài viết hướng dẫn cả chỉ cần tìm từ khóa tạo Breadcrumb cho Blogger sẽ ra rất nhiều bài. Nói như vậy có thể biết nó là cũ nhưng chưa bao giờ hết lỗi thời và người viết Blog vẫn thường tìm kiếm từ khóa này nếu bài viết của Blog mình không được Google lập chỉ mục cho dữ liệu cấu trúc Breadcrumb.

Mình cũng đã từng là người tìm kiếm trên mạng và mình cũng đọc rất nhiều bài viết có nội dung hướng dẫn giống nhau nhưng mình vẫn không thấy thật sự chính xác và vẫn bị thiếu với trường hợp bài viết sử dụng multile label (nhiều nhãn) và do thiếu nên Google chỉ index được có một nhãn mà thôi.

Vậy phải làm thế nào để Google index cho đường dẫn từ 2 nhãn trở lên như hình minh họa dưới đây

Vấn đề này không khó nhưng lại hơi rắc rối với sử dụng thẻ thẻ điều kiện <if> cho label. Tiện đây mình cũng hướng dẫn luôn các bước thêm Breadcrumb vào Blog, các bạn nào đã thêm rồi chỉ cần sửa lại một chíu xíu thôi là được

1. Đăng nhập vào Blogger > Chủ đề > Chỉnh sửa HTML > Chuyển đến tiện ích > Blog1 tìm đến đoạn <b:includable id='breadcrumb' var='posts'> chọn mở rộng sau đó thay thế nội dung bên trọng cặp thẻ này

Copy

<b:if cond='!data:view.isHomepage'>

    <b:if cond='data:view.isPage'>

        <div class='breadcrumbs'>

            <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

            <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

        </div>

        <b:else/>

        <b:if cond='data:view.isPost'>

            <b:loop values='data:posts' var='post'>

                <b:if cond='data:post.labels'>

                    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

                        <span typeof='v:Breadcrumb'>

          <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg' property='v:title' rel='v:url'><data:homeMsg/></a> &#8250;                 <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>  

          <span rel="v:child" typeof='v:Breadcrumb'>

          <a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a>

          </span>

                        <b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if>

            </b:loop>

            </b:if>

            </span>

            </div>

            <b:else/>

            <div class='breadcrumbs'>

                <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'>Không tìm thấy trang</a>

            </div>

        </b:if>

        </b:loop>

        <b:else/>

        <b:if cond='data:view.isArchive'>

            <div class='breadcrumbs'>

                <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

            </div>

            <b:else/>

            <b:if cond='data:view.isMultipleItems'>

                <div class='breadcrumbs'>

                    <b:if cond='data:blog.pageName == &quot;&quot;'>

                        <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                        <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

                        <b:else/>

                        <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                        <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

                    </b:if>

                </div>

            </b:if>

        </b:if>

    </b:if>

</b:if>

</b:if>

Hình minh họa

Trong đó đoạn mình đánh dấu màu xanh chính là tạo Breadcrumb với nhiều nhãn và được index lên Google tìm kiếm

Trong trường hợp nếu không tìm thấy đoạn <b:includable id='breadcrumb' var='posts'> thì bạn thêm cả đoạn đó vào nữa ngay sau <b:includable id='backlinks' var='post'> hoặc trước <b:includable id='comment-form' var='post'> cụ thể

Copy

<b:includable id='breadcrumb' var='posts'

<b:if cond='!data:view.isHomepage'>

    <b:if cond='data:view.isPage'>

        <div class='breadcrumbs'>

            <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

            <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

        </div>

        <b:else/>

        <b:if cond='data:view.isPost'>

            <b:loop values='data:posts' var='post'>

                <b:if cond='data:post.labels'>

                    <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

                        <span typeof='v:Breadcrumb'>

          <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg' property='v:title' rel='v:url'><data:homeMsg/></a> &#8250;                 <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>  

          <span rel="v:child" typeof='v:Breadcrumb'>

          <a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a>

          </span>

                        <b:if cond='data:label.isLast != &quot;true&quot;'> &#8250; </b:if>

            </b:loop>

            </b:if>

            </span>

            </div>

            <b:else/>

            <div class='breadcrumbs'>

                <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'>Không tìm thấy trang</a>

            </div>

        </b:if>

        </b:loop>

        <b:else/>

        <b:if cond='data:view.isArchive'>

            <div class='breadcrumbs'>

                <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

            </div>

            <b:else/>

            <b:if cond='data:view.isMultipleItems'>

                <div class='breadcrumbs'>

                    <b:if cond='data:blog.pageName == &quot;&quot;'>

                        <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                        <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

                        <b:else/>

                        <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

                        <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

                    </b:if>

                </div>

            </b:if>

        </b:if>

    </b:if>

</b:if>

</b:if>

</b:includable>

2. Trong trường hợp bạn phải thêm cả <b:includable id='breadcrumb' var='posts'> thì mở rộng đoạn <b:includable id='main' var='top'> ở ngay phía trên thêm <b:include data='posts' name='breadcrumb'/> ngay sau nó

3. Viết CSS cho class breadcrumbs

Phần này theo sớ thích của mỗi người mà tự thêm cho phù hợp

4. Sử dụng công cụ kiểm tra dữ liệu cấu trúc của Google để kiểm tra bài viết

Như vậy qua bài này bạn thấy không khó khi thêm dữ liệu cấu trúc Breadcrumb vào Blog. Nếu bạn nào khi thêm mà kiểm tra bằng công cụ dữ liệu cấu trúc bị lỗi thì để lại nhận xét bên dưới mình sẽ giúp.

Nội dung chính