Tối ưu trang bài viết Blogger chuẩn HTML5 để seo được tốt hơn

Trước đây mình đã có bài viết giúp các bạn tối ưu cho  Blogger Template đạt chuẩn HTML5 , nhưng nếu bạn kiểm tra qua từng trang một thì bạn ...

Related posts:

Trước đây mình đã có bài viết giúp các bạn tối ưu cho Blogger Template đạt chuẩn HTML5, nhưng nếu bạn kiểm tra qua từng trang một thì bạn sẽ thấy mình chỉ mới hướng dẫn các bạn tối ưu xong cho phần trang chủ thôi. Chính vì thế để giúp đỡ tiếp tục các bạn có một trang bài viết đạt chuẩn do đó mình mình lập ra bài viết này. Mong rằng qua bài viết này nữa, các bạn sẽ có một template đầy đủ các trang đều ở chuẩn HTML5.

Bài viết

Trong khi đăng bài viết nếu có hình ảnh, bạn phải thêm thuộc tính atl vào ảnh, bạn có thể thêm bằng công cụ mặc định của Blogger

hoặc chuyển sang soạn thảo HTML và thêm vào một cách thủ công.

Sau khi viết bài xong, nếu bài viết có hình ảnh các bạn nên chuyên qua soạn thảo bằng HTML và xóa toàn bộ những thuộc tính này này nếu bạn tìm thấy border="0", imageanchor="1", width ="320", height="115", lưu ý là thông số bên trong width và height có thể sẽ khác nhé.
Nếu hình ảnh bạn có thêm chú thích, thì các bạn tiếp tục tìm xóa đoạn này

align="center" cellpadding="0" cellspacing="0"

như vậy là hoàn tất phần bài viết.

Các nút chia sẻ

Các nút chia sẻ hiện thời bạn sử dụng trong template đôi khi không phù hợp với chuẩn HTML5, bạn phải thay thế hoặc chỉnh sửa hoặc thay thế chúng bạn có thể sử dụng chúng để thay thế những nút có trên blog của bạn.

Breadcumb

Thông thường những breadcrumb hiện tại được chia sẻ cũng như thêm vào hầu hết mọi Blogger Template hiện tại đều không đạt chuẩn HTML5. Để khắc phục mình sẽ hướng dẫn các bạn làm cơ bản như sau, hầu hết là chỉnh xác, do mỗi template mỗi khác nên mình không tìm đủ trường hợp ra được.

Đầu tiên  tìm xóa toàn bộ

xmlns:v='http://rdf.data-vocabulary.org/#'

Thay thế toàn bộ

typeof='v:Breadcrumb'

bằng

itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'

Tiếp tục thay thế toàn bộ

property='v:title' rel='v:url'

bằng

itemprop='url'

Lại thay

<a expr:href='data:label.url' itemprop='url'>Home</a>

bằng

<a expr:href='data:label.url' itemprop='url'><span itemprop="title">Home</span></a>

Cuối cùng thay <a expr:href='data:label.url' itemprop='url'><data:label.name/></a>
bằng

<a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>

Bài viết liên quan

Về bài viết liên quan hiện tại thì mình vẫn đang tìm kiếm cách khắc phục, các bạn có thể sử dụng tiện ích bài viết liên quan 

Nhận xét

Phần nhận xét của Blogger là một trong những phần khi kiểm tra chuẩn HTML5 xuất hiện lỗi nhiều nhất. Hiện tại để chỉnh sửa lại toàn bộ thì vô cùng khó khăn, mình đưa ra cho các bạn một số lựa chọn như sau:

Chuyển qua sử dụng nhận xét của Google+

Để chuyển qua sử dụng nhận xét của Google+ bạn vào trang tổng quan của blog, chọn vào tab Google+, tick chọn "Sử dụng tính năng Nhận xét của Google+ trên blog này"

Tìm đến đoạn mã sau đây

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

và thay thế bằng

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>

Tiếp tục tìm đoạn này

<a name='comments'/>

nếu có thì thay thế bằng

<a id='comments'/>

như vậy là hoàn tất.

Lời kết

Sau khi hoàn tất tất cả những thứ trên thì thường thì template của bạn đã 100% chuẩn HTML5 rồi. Nếu bạn làm xong rồi mà vẫn lỗi tùm lum tà la thì cứ để lại nhận xét ở dưới mình sẽ hỗ trợ.