#15 Tối ưu SEO Onpage Blogger

Xin chào các bạn!
Trong khá nhiều những bài viết trước mình đã chia sẻ cho các bạn khá nhiều kiến thức về SEO hơn hết là sử dụng trên nền tảng Blogger.

Trong bài viết SEO là gì? đã chia sẻ cho các bạn 2 khái niệm quan trọng trong SEO chính là SEO Onpage và SEO Offpage.

Cho nên bắt đầu từ bài viết #1 về tối ưu Onpage mình sẽ không nói nhiều về lý thuyết mà chia sẻ nhiều về kỹ thuật nâng cao để các bạn tối ưu Onpage trước cho các bạn có thể bắt đầu làm SEO được ngay lập tức

Tối ưu SEO Onpage Blogger - #1 Tối ưu CSS3

Với kinh nghiệm SEO Onpage của mình, mình sẽ lần lượt chia sẻ các kỹ thuật tối ưu SEO Onpage quan trọng là tối ưu code CSS3 và HTML5 với 2 bài viết hướng dẫn #1 là tối ưu CSS3 và bài hướng dẫn #2 là tối ưu HTML5 sau đó mà khá nhiều bạn trong group đang quan tâm.

Trải nghiệm chuẩn SEO Onpage cùng Tôi Là Quản Trị Blog's

Check bằng công cụ jigsaw.w3.org sẽ giúp bạn kiểm tra website của bạn đã chuẩn CSS3 chưa?. Website chuẩn CSS3 sẽ giúp trình duyệt web giải mã code nhanh hơn -> website load nhanh hơn -> Hơn nữa sẽ giúp con bọ Google đọc và index dễ dàng hơn. Hơn hết là tối ưu được với người dùng khi người dùng trãi nghiệm load website trong tít tắc.

Tối ưu SEO Onpage Blogger không còn lỗi

Sau khi kiểm tra với blog http://www.toilaquantri.com các cấu trúc CSS3 đã được mình tối ưu chuẩn CSS3 100% hoàn toàn.

Nhiều bạn đã hỏi làm như thế vậy?

Và sau đây là lời giải đáp, mình không che giấu kiến thức cho AE làm gì, mặc dù cũng có =)). Mình sẽ chia sẻ ngay luôn các bước mình đã từng thực hiện như sau thế nào để các bạn nắm rõ hơn

1. Tối ưu CSS3 cho Font-Awesome và Font Google

Font-Awesome là tiện ích giúp bạn có thể tạo ra các icon trong blogger thường sử dụng cho menu và các khai báo thông tin website <xem ảnh minh họa>

Sử dụng Font-Awesome trong Blogger

Khi sử dụng Font Awesome bạn sẽ thấy khá nhiều lỗi xuất phát là tiện tích này với hơn 70 lỗi và để sửa lỗi CSS3 xuất phát từ file này bạn sẽ dùng đoạn code sau đây để thay thế nó:

Xóa (tìm code tương tự thôi vì mỗi blog có thể khác nhau)

<link href='http://fonts.googleapis.com/css?family=Ruda:400,700' rel='stylesheet' type='text/css'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Thay bằng:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic");
//]]>
</script>

Đoạn code trên còn sử dụng để lấy Font từ Google là sử dụng font Roboto Condensed để khai báo cho website, bạn có thể thay cho font khác đơn cử như font kinh điển của giao diện Metro UI là font Segoe UI. Tên font có khoảng trắng thì bạn thay thế thành dấu (+) sẽ thành Segoe+UI để thay cho font Roboto+Condensed đang dùng.

Đoạn script trên để thay thế cho link Font Awesome và link Google Fonts nên bạn có thể xóa 2 link này trong code luôn
Lưu mẫu và test CSS3 lại bạn sẽ fix được hơn 70 lỗi liên quan đến thằng Font-Awesome này.

Tối ưu CSS mặc định của Blogger

CSS mặc định của blogger thường có dạng:

https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css đôi lúc sẽ được ẩn đi nhưng test CSS3 sẽ thấy mặt nó :D

Khi kiểm tra CSS3 thì rất nhiều lỗi phát sinh từ CSS tự sinh ra mặc định của thằng Blogger nên ta sẽ dùng đoạn script để bọc nó lại, khi tìm kiếm trong mẫu có thể bạn sẽ không thấy nó nhưng cứ copy nó lại:

Từ

<link href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>

Sửa thành

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css");
//]]>
</script>

Hoặc cách khác
Thay:

<b:skin><![CDATA[/* và */ ]]></b:skin>

Lần lượt thành:

<style type="text/css"><!-- /*<b:skin><![CDATA[/* và */]]></b:skin>

Các đoạn code ở giữa 2 thằng này các bạn để nguyên không thay đổi gì cả, việc sửa lại thẻ này hiển nhiên là sẽ xóa CSS mặc định của Blogger nên có thể dẫn đến tình trạng vỡ cấu trúc CSS của blog, lúc đó bạn chỉ cần code nhẹ CSS lại

Đến đây hãy thở phào vì 50% công việc tối ưu CSS3 đã xong rồi đấy. Tiếp tục

Các lỗi cấu trúc CSS3 vặt khác

Thông thường jigsaw.w3.org nó sẽ báo lỗi CSS ngay phần phía dưới phần báo lỗi dưới địa chỉ tên miền. Bạn chỉ cần xóa các CSS dư không hợp với chuẩn CSS3 được đề xuất là sẽ được thôi phần này chủ yếu là xóa bớt thôi. Mình sẽ không demo nhiều phần này vì biết đọc tiếng anh là sẽ hiểu được nó yêu cầu cái gì thôi

Nếu các lỗi còn lại các bạn cảm thấy khó khăn để fix thì liên hệ với mình qua facebook cá nhân tại đây: Huỳnh Phụng

Cùng ngắm lai chuẩn xanh lè nào :))