Trong bài viết này mình sẽ hướng dẫn cách tối ưu cho label hiển thị được tiếng Việt có dấu và tạo được link không dấu giống như wordpress ha...
Trong bài viết này mình sẽ hướng dẫn cách tối ưu cho label hiển thị được tiếng Việt có dấu và tạo được link không dấu giống như wordpress hay các trang tin tức sử dụng nền tảng khác.
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:
http://ift.tt/2DDpU8C › 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:
http://ift.tt/2DDpU8C › 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:
http://ift.tt/2F8nKLe // Nhãn Chơi blog
http://ift.tt/2DDpUWa // Nhãn Thủ thuật blogspot
Breabcrumb
http://ift.tt/2DDpU8C › 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 Tạo Breadcrumb thế nào để được index lên kết quả tìm kiếm Google
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
<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> ›
<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 != "true"'> › </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> ›
<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
<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> ›
<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> ›
<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:
<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> ›
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "choi-blog"'>
<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 == "thu-thuat-blogspot"'>
<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> ›
<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à
<b:if cond='data:label.name == "ten-nhan"'>
<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ụ
#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.
Bình luận