Tối ưu CSS chuẩn SEO như thế nào?

Dear all,

Tối ưu CSS chuẩn SEO như thế nào? Đó là câu hỏi mà hầu hết dân Optimize điều băn khoăn, ngay cả bản thân tôi cũng không thể tối ưu một cách perfect được, ngoài việc chuẩn Validate của W3C, chúng ta còn cần kiến thức khá sâu và rộng cho mảng CSS này để có thể tối ưu SEO tốt nhất có thể.

Tối ưu CSS cho SEO mang lại rất nhiều hiệu quả: load nhanh, tốc độ quét của Bots cũng nhanh, tiết kiệm thời gian put file lên server,…

Có thể trong chúng ta ai cũng biết CSS có 3 vị trí chèn: 1 là external, 2 là internal và 3 là inline CSS.

External CSS: Là một file CSS bên ngoài được gọi vào trang hiển thị thông qua tags <link>

Internal CSS: Là CSS bên trong tài liệu html mở đầu bằng <style> và đóng bằng </sytle>, thẻ này được chèn trong phần head của tài liệu html (HTML Document)

Inline CSS: Là kiểu CSS nội tại bên trong thẻ html bắt đầu bằng thuộc tính Style (html entities attribute)

Trên là 3 cách mà chúng ta hay dùng nhất có hầu hết trang web, tuy nhiên External CSS là tốt cho SEO nhất. Vậy tối ưu CSS như thế nào?

Ta cần nhớ lại, 1 dòng lệnh CSS chuẩn sẽ như sau: Selector {Proberty:Value;}

  • Selector: là những thành phần cần tác động, khi là ID, khi là CLASS, khi lại là một html entity
  • Property: là thuộc tính CSS
  • Value: là giá trị của Property

Có 2 cách viết rất tốt cho SEO đó là viết tắt và viết tuần tự.

Viết tắt trong CSS: ta có thể rất nhiều dạng như margin:2em; thay cho margin: 2em 2em 2em 2em; hay là font: abc 16px red; thay cho font-family, font-size, color.

CSS tuần tự, với CSS dễ thấy khi ta bố cục nội dung bằng DIV, div cha và div con, ta có thể dùng như sau: div > span, p > img:hover,…

Nên gôm tất cả các thuộc tính CSS vào một đoạn duy nhất như:

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;}

Thay vì ta phải ghi riêng ra từng thành phần có trong trang web. Chắc các bạn cũng lấy làm lạ khi tui dùng định dạng như trên, nhưng thực chất nếu dùng như thế tốc độ duyệt file của server sẽ rất nhanh so với định dạng dành cho derverloper

a{
aaaa:bbbb;
cccc:ddddd;
…..

}

10 Lời Khuyên Tối Ưu Hóa CSS Chuẩn SEO

  1. Thay thế toàn bộ những inline giống nhau bằng CSS external
  2. Sử dụng CSS tuần tự theo lớp thay cho các CSS inline
  3. Nhóm nhiều thành phần và CSS chung với nhau
  4. Kết hợp những định dạng chung và những lớp chia sẻ
  5. Sử dụng CSS thừa kế để tránh trùng lặp
  6. Sử dụng CSS viết tắt theo quy tắc và màu sắc
  7. Viết tắt tên Class và Id
  8. Sử dụng CSS 2 và CSS 3
  9. thay thế những ứng dụng js hiệu ứng bằng css
  10. Xóa toàn bộ những khoản trắng không cần thiết torng file css

About Trọng Khiêm

Chào các bạn, mình là Khiêm. Niềm đam mê của mình là SEO và Website Deverloper, rất vui khi được làm quen với tất cả các bạn. Nếu cần hỗ trợ, hãy mail cho mình: buitrongkhiem2010@gmail.com Mình sẽ tư vấn SEO tổng thể website, On Page, Off Page hoặc tư vấn chiến lược khôi phục Website sau khị dính thuật toán của Google. :)
This entry was posted in Seo On Page, Thảo Luận SEO. Bookmark the permalink.

Gửi phản hồi

Bài viết này thuộc về Bùi Trọng Khiêm - ©hocseodelam 2013