Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 24
        • Thủ thuật Blogspot 69
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 41

                    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

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

                    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

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

                    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ó

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

                    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

                    Hướng dẫn thêm dữ liệu cấu trúc Breadcrumb cho 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