Hướng dẫn tối ưu cho Nhãn hiển thị tiếng Việt có dấu và tạo link không dấu

Ở bài viết Hướng dẫn thêm dữ liệu cấu trúc Breadcrumb cho bài viết với cách này bạn chỉ nên áp dụng với nhãn (label) tiếng Anh hoặc cụ thể không phải là tiếng Việt có dấu, vì khi bạn thêm nhãn bằng tiếng Việt có dấu thì đường link nó rất xấu, không được SEO tốt và không được thăng hạng lên kết quả tìm kiếm của bất cứ công cụ tìm kiếm nào.

Nếu bạn là người viết blog lâu rồi có thể bạn sẽ nhận ra điều này và bạn chưa biết phải làm thế nào, nếu bạn vẫn chưa hiểu mình sẽ lấy ngay ví dụ bên dưới:

Giả sử bài viết bạn thêm hai nhãn Chơi blog, Thủ thuật blogspot thì hai nhãn đó là tiếng Việt có dấu và đường link của hai nhãn đó trông rất xấu và lại ngăn cách nhau bằng %20. Tuy nhiên khi bài viết được index lên kết quả tìm kiếm vẫn hiển thị đường dẫn breadcrumbs như sau:

https://www.blogthuthuatwin10.com › Chơi blog › Thủ thuật blogspot

Giả sử bạn thay bằng 2 nhãn choi-blog, thu-thuat-blogspot thì 2 nhãn đó là tiếng Việt không dấu và ngăn cách bằng dấu - do đó đường link của hai nhãn đó rất đẹp và chuyên nghiệp. Tuy nhiên khi bài viết được index lên kết quả tìm kiếm sẽ hiển thị đường dẫn breadcrumbs như sau:

https://www.blogthuthuatwin10.com › choi-blog › thu-thuat-blogspot

Chắc đến đây bạn đã hiểu vấn đề phải không nào. Vậy phải làm thế nào vẹn cả đôi đường cụ thể:

Link label:
https://www.blogthuthuatwin10.com/search/label/choi-blog // Nhãn Chơi blog
https://www.blogthuthuatwin10.com/search/label/thu-thuat-blogspot // Nhãn Thủ thuật blogspot

Breabcrumb
https://www.blogthuthuatwin10.com › Chơi blog › Thủ thuật blogspot

Hình demo khi kiểm tra bằng công cụ kiểm tra dữ liệu cấu trúc của Google

Và dưới đây là cách làm với trường hợp bạn đã áp dụng theo bài viết Hướng dẫn thêm dữ liệu cấu trúc Breadcrumb cho bài viết

Rất đơn giản bạn vào chỉnh sửa html trong template tìm và mở rộng đoạn <b:includable id='breadcrumb' var='posts'> trong thẻ điều kiện <b:if cond='data:view.isPost'> bên dưới nó vòng lặp thế này

Copy

<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ạn hãy xóa chỗ đoạn mình đánh dấu màu đỏ đi nó sẽ thành thế này

Copy

<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'>



//Đoạn đã xóa



</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ây giờ là thêm vào phần đã xóa như sau:

Giả sử bài viết đó có nhãn Chơi blog và Thủ thuật blogspot thì khi viết bài bắt buộc phải tạo nhãn choi-blog, thu-thuat-blogspot mục đích để có đường link đẹp và không bị ngăn cách bởi %20 giữa khoảng trằng của hai từ. Khi tạo xong 2 nhãn rồi bạn thêm vào chỗ trống đã xóa ở trên như sau:

Copy

<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'>

<b:if cond='data:label.name == &quot;choi-blog&quot;'>

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

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

</span>

</b:if>   

<b:if cond='data:label.name == &quot;thu-thuat-blogspot&quot;'>

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

<a  expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'>Thủ thuật blogspot</a>

</span>

</b:if> 

</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>

Với dòng màu đỏ áp dụng cho nhãn choi-blog nhưng được đổi tên thành Chơi blog, dòng màu xanh áp dụng cho nhãn thu-thuat-blogspot nhưng được đổi tên thành Thủ thuật blogspot

Tóm lại theo cách này đặt tên cho label cố định và đoạn code của nó là

Copy

<b:if cond='data:label.name == &quot;ten-nhan&quot;'>

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

<a  expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'>Tên nhãn</a>

</span>

</b:if>

Phần css bạn có thể thêm một class ví dụ label ví dụ <a  class='label' expr:href='data:label.url'...., và khi viết css cho class đơn giản hơn ví dụ:

#css
.breadcrumbs .label {}

Do bài viết này mình tự nghiên cứu trong quá trình thiết kế lại template của mình do đó các bạn phải đọc thật kỹ đến khi hiểu ra vấn đề thì áp dụng vì bài này mình viết hoàn toàn không giống với những bài viết khác về tối ưu label mà bạn đã từng đọc. Nếu bạn đã áp dụng mà không được thì để lại nhận xét bên dưới mình sẽ giúp.

Nội dung chính