V. TỐI ƯU HÓA TRONG TRANG (ON-PAGE OPTIMIZATION)
5.6 CSS & SEO
Ứng dụng CSS trong việc trình bày Website HTML và các lợi thế trong tối ưu cho máy tìm kiếm, quảng bá Web (SEO/SEM).
Bạn có thể viết ngữ nghĩa đầy đủ, gọn gàng với dung lượng mã nguồn HTML gọn nhẹ theo một trình tự tốt nhất có thể nhằm giúp cho các máy tìm kiếm đánh chỉ số dễ dàng. Mặt khác, bạn lại có thể áp dụng tất cả các kiểu định dạng và dàn trang mà bạn muốn để thỏa mãn thiết kế. CSS quả là một công cụ mạnh và nhiều lợi thế
Cascading Style Sheets (CSS) được sử dụng rộng rãi ngày nay nhớ khả năng cho phép thiết thế nhanh, tuân thủ chuẩn HTML, dễ dàng tùy biến và thay đổi trình nhanh chóng việc dàn trang Web. Ngoài ra CSS còn biết đến với nhiều khả năng khác : CSS có thể mang lại nhiều lợi thế trong quảng bá Web, tối ưu hóa cho máy tìm kiếm SEO/SEM. Có thể tóm lược vài lợi thế như sau :
Chuyển dời các nội dung quan trọng, đặt biệt là các phần chứa văn bản mà bạn muốn đứng thứ hạng cao, trên các phần nội dung liên quan khác. Bạn muốn đặt những phần nội dung quan trọng này tại đầu trang, trong phần code HTML. Đây có lẽlà điểm quan trọng nhất của việc ứng dụng CSS trong quảng bá Web SEO/SEM). Nó sẽ có nhiều ảnh hưởng nhiều tới thứ hạng trang Web của bạn.
CSS còn cho phép bạn giảm dung lượng trang, điều này đồng nghĩa giảm lệ code-nội dung (code-to-content ratio). Khi trang Web được viết, trình bày sạch sẽ thì nó sẽ giúp cho các máy tìm kiếm đánh chỉ số dễdàng hơn và nhanh hơn nội dung trang Web của bạn.
Sử dụng các thẻ chuẩn của HTML, như <h1>, <h2>, <h3> sẽ giúp cho máy tìm kiếm nhận dạng dẽ dàng các nội dung quan trọng trong trang, thay vì các thẻđịnh dạng <font>.
Sử dụng các thẻ HTML chuẩn như <ul>, <ol>,< a> để tạo các mục menu bao gồm các đường dẫn chuẩn tới các thành phần quan trọng khác của trang. Việc này giúp các đường dẫn trên dễ dàng được nhận diện hơn bởi máy tìm kiếm. Nó giúp việc đánh chỉ sốcác thư mục nằm sâu trang chủđược hiệu quảhơn.
Ngoài những lợi ích trực tiếp kể trên, CSS còn mang lại nhiều lợi thế khác trong việc tối ưu hóa cho công cụ tìm kiếm và các chiến dịch quảng bá khác :
Việc tách rời nội dung và phần trình bày (dàn trang), bạn có thể dễ dàng tùy biến giữa nội dung, trình bày, thử nghiệm nhanh để tìm ra giải pháp tốt nhất.
Webmaster sẽ mất ít thời gian hơn để bào trì và nâng cấp các tài nguyên trên trang. Điều này giải phóng cho bạn thời gian để tập trung vào xây dựng nội dung mới và các chiến thuật quảng bá, quảng cáo Website.
Mục đích của bài viết này là nhằm đưa ra những lợi thế phổ biến nhất của CSS, sau đó phần hướng dẫn sẽ giúp bạn áp dụng những ưu thế kỹ thuật này vào trong trang Web của bạn.
Dàn trang với CSS
Với CSS, bạn có thể di chuyển các thành phần nội dung quan trọng nhất (phù hợp với máy tìm kiếm) lên đầu trang HTML trong phần code. Di chuyển phần nội dung duy nhất (unique text để phân biệt với duplicate content) này cũng như những đường dẫn quan trọng khác lên đầu trang code sẽ giúp bọ tìm kiếm tìm thấy thông tin đó nhanh chóng và dễ dàng.
Các máy tìm kiếm thường coi trọng các phần nội dung văn bản được tìm thấy trong phần trên cùng của tệp tin mã nguồn hơn là các phần còn đâu đó hoặc ở cuối cùng tệp tin. Vì thế, nếu bạn có 2000 dòng trong tệp tin mã nguồn mà nội dung của văn bản quan trọng bạn muốn đề cập lại nằm ở tận dòng thứ
cũng như chúng ta thôi, thông qua những người quản trị mạng, nó sẽ đoán xem chúng ta coi đâu là phần quan trọng nhất của văn bản.
Kỹ thuật cơ bản nhất là chia nhỏ mã nguồn HTML ra làm nhiều phần nhỏ mà vị trí của chúng được xác định một cách độc lập trong tệp tin định dạng văn bản. Thành phần HTML thông dụng hay được dùng nhất là thẻ <div>. Sau đây là một vài ví dụ về cách sử dụng kỹ thuật này.
Bài toán
Phần sơ đồ di chuyển (navigation menu) cần phải được hiển thị trước khi nội dung đơn của trang nhưng chúng ta lại muốn tối ưu trang cho các máy tìm tiếm. Để làm được việc đó, bạn phải di rời phần menu của mã HTML tương ứng về đâu đó phía cuối mã nguồn của trang để nội dung đơn được xuất hiện trên cùng.
Giải pháp
Đánh dấu phần sơ đồ di chuyển và nội dung với thẻ <div>, sau đó sử dụng CSS để xác định chúng một cách độc lập. Sau đây là mã nguồn của ví dụ đơn giản trên.
<html> . . . <body> <div id="content">
<h1 id="toc-quang-ba-website-viet-nam">Quảng bá Website Việt Nam</h1> <p>Đây là phần nội dung chính. Nó sẽ xuất hiện ngay đầu tiên của thẻ "body" trong tệp tin mã nguồn.Máy tìm kiếm sẽ tìm thấy dễ dàng và xếp nó quan tọng hơn. Đặc biệt, nó còn giúp xác định chủ đề của trang thông qua phần văn bản này hơn là các phần nằm sâu, dưới cùng của trang (navigation menu).</p>
. . .
</div> <!--/End div content/--> <div id="nav-menu"> <ul> <li><a href="http://www.vietseo.net/">Home</a></li> <li><a href="http://www.vietseo.net/contact">Contact</a></li> <li><a href="http://www.vietseo.net/about">About</a></li> <li><a href="http://www.vietseo.net/sitemap">Sitemap</a></li> </ul> </div> . . . </body> </html> #content { margin-top: 20px; margin-left: 160px; width: 525px;
} #nav-menu { position: absolute; left: 10px; top: 20px; width: 150px; } #nav-menu ul { list-style-type: none; padding: 0px; margin: 0px; width: 135px; }
Ví dụ CSS trên sẽ hiển thị navigation menu phía tay trái của nội dung chính. Nó có vẻ được hiển thị trên phần nội dung chính như thực chất lại nằm sau nội dung chính trong tệp tin mã nguồn. Chúng ta cùng một lúc thực hiện được hai mục đích : Tối ưu hóa trang cho máy tìm kiếm bởi di chuyển nội dung đơn lên trên cùng trong khi tiết kiệm được thời gian cho việc dàn trang.
Tối ưu trang Web cho chỉ số hóa
Khi xem lại ví dụ code ở phần trên, bạn sẽ thấy cac thành phần của navigation menu được tạo bởi các thẻ chuẩn HTML như danh sách <ul> và siêu liên kết <a>. Các thẻ chuẩn trên giúp cho đường dẫn trên dễ dàng được tìm thấy bởi các bọ tìm kiếm. Và đương nhiên trang Web sẽ được chỉ số hóa dễ dàng hơn. Ngược lại các liên kết nằm trong javascript hay các mã khác HTML sẽ không được hoặc khó tìm thấy bởi bọ tìm kiếm, điều này làm giảm khả năng được đánh chỉ số trang Web của bạn.
Nếu như bạn không có ý định xây dựng menu chuẩn với CSS thì phần code trên có thể giúp bạn làm một menu đơn giản. CSS có thể giúp bạn làm rất nhiều thành phần quan trọng của Website thay vì dùng javascript. Lấy lại ví dụ phần trên, giờ chúng ta sẽ xây dựng lại đường dẫn navigation menu với hiệu ứng “rollever” CSS. Các bạn có thể tham khảo thêm tại liên kết sau Eric Meyers on CSS menus. #content { margin-top: 20px; margin-left: 160px; width: 525px; } #nav-menu { position: absolute; left: 10px; top: 20px; width: 150px; }
#nav-menu ul { list-style-type: none; padding: 0px; margin: 0px; width: 135px; } nav-menu li { font-size: medium;
font-family: Arial, sans-serif; margin-bottom: 5px; } #nav-menu a { text-decoration: none; font-weight: bold; display: block; padding: 3px 12px 3px 8px; color: #000000; padding-left: 10px; background-color: #9F9F9F; border-top: 1px solid #DDDDDD; border-right: 1px solid #333333; border-bottom: 1px solid #333333; border-left: 1px solid #DDDDDD; } #nav-menu a:hover { color : #FFFFFF; } #navigation a:active { padding: 2px 13px 4px 7px; color: #EEEEEE; border-top: 1px solid #333333; border-right: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; border-left: 1px solid #333333; } Dàn trang phần nội dung với CSS
Khi sử dụng CSS thì bạn còn có thể trình bày nội dung đúng với ngữ nghĩa (semantic) của nó (Ví dụ các thẻ chỉ định nghĩa và mức độ quan trọng của đoạn văn bản), nhưng bạn lại vẫn có thể tùy ý hiển thị trang theo thiết kế. Sau đây là ví dụ.
Đặt vấn đề : Người thiết kế trang Web của bạn sủ dụng<font> để định dạng các tiêu đề, người trong nhóm lập trình lại dùng font này và các thẻ in đậm để điền các nội dung khác. Một lần nữa bạn lại nhận ra rằng máy tìm kiếm đọc tài liệu một cách hơi khác so với người dùng thường. Nó không đọc nội dung
đã được biên dịch (render) và vì thế nó sẽ không hiểu các thẻ font được sử dụng để nhấn mạnh mức độ quan trọng của các tiêu đề. Mặt khác nó sẽ côi các thẻ <h1> như là tiêu đề. Vì vậy việc sử dụng các thẻ tiêu đề HTML chuẩn sẽ giúp văn bản được hiểu đúng ngữ nghĩa. Hãy so sánh hay đoạn văn bản sau.
So sánh HTML và CSS
Code HTML nguyên bản Code HTML/CSS tối ưu hóa <bold> <font size=”24px” color=”#DF0DDB”> All About CSS </font> </bold> HTML: <h1 id=”gawdy- header”> All About CSS </h1> CSS: #gawdy-header { font-weight: bold; background-color: #DF0DDB; font-size: 24px }
Việc sử dụng <font> và <h1> như ở trên đều cho một hiệu ứng khi dàn trang nhưng lợi ích của chúng lại khác nhau. Sử dụng thẻ chuẩn HTML <h1> cho phép trang của bạ được trình bày và hiểu đúng theo ngữ cảnh và hiểu được nội dung trang của bạn đề cập đến. Và đương nhiên trang của bạn sẽ có nhiều khả năng được xếp hạng cao hơn.
Giảm kích thước văn bản với CSS
Việc bạn sử dụng các tệp tin định dạng CSS bên ngoài thay vì nhúng chúng trực tiếp trong tài liệu HTML sẽ giúp làm giảm kích thước trang Web. Tệp tin càng nhỏ thì tốc đọ tải trang càng nhanh cho người dùng và đương nhiên cả máy truy tìm. Ngoài việc chỉ phải tải xuống một file HTML nhỏ hơn thì tệp tin CSS còn được chia sẻ giữa nhiều trang Web và được cho vào cache của các trình duyệt hoặc của công cụ tìm kiếm. Bởi thế mỗi lần tải một trang thì trình duyệt và máy tìm kiếm khi thấy đường dẫn CSS trùng lặp thì sẽ không tải xuống nữa.
Số lượng trang phải tải xuống ít đi thì cho phép bạn tận dụng tốt “dung lượng chỉ số hóa”. Tất nhiên là mỗi máy tìm kiếm sẽ định trước một số lượng tài nguyên (thời gian, băng thông, …) nhất định để đánh chỉ số trang Web của bạn. Nếu như trang Web của bạn dung lượng càng nhỏ thì việc đánh chỉ số càng nhanh và ít vấn đề hơn và càng nhiều trang được dánh chỉ số một lúc. Càng nhiều trang được đánh chỉ số thì càng có nhiều trang hơn trong kết quả tìm kiếm (Search Engine Results Pages – SERPs).
Webmaster có nhiều thời gian cho SEO
Sử dụng CSS cho phép cập nhật nhanh và dễ dàng trang Web. Cho phép thực thi các tác vụ Webmaster một cách đơn giản nhất và như vậy sẽ có nhiều thời gian để tối ưu hóa trang Web cho công cụ tìm kiếm
Sử dụng thời gian để cung cấp thêm các nội dung mới giúp trang Web của bạn luôn có thứ hạng cao trên máy tìm kiếm.
Các thay đổi lớn nhỏ và trình bày đều có tác động nhất định tới hoạt động của khác hàng. Vì thế việc thay đổi phông chữ, màu nền hay các thành phần định dạng khác sẽđược tiến hành nhanh chóng và đơn giản nếu bạn sử dụng các tệp tin CSS nằm ngoài văn bản.
Một vài kỹ thuật CSS cần tránh
Có một vài thủ thuật mà bạn có thể sử dụng với CSS. Tuy nhiên chúng bị xếp vào các thủ thuật “mũ xám” thậm chí “mũ đen” và được cảnh báo trong việc sử dụng.
Một trong những kỹ thuật phổ biến là sử dụng CSS để hiển thị “văn bản ẩn” (hidden text). Khi viện cớ trình bày trang Web “khả kiến” (Accessibility) hoặc giao diện người dùng (user interface) với các kỹ thuật trên thì bạn phải chắc rằng là các máy tìm kiếm sẽ không liệt kê trang Web của bạn vào spam. Để phân biệt rõ các trường hợp, chúng ta hãy xem các vị dụ sau. Một ví dụ sử dụng kỹ thuật “mũ đen” (black hat), một kỹ thuật trình bày web “khả kiến” (accessibility) và một kỹ thuật bị liệt kê là spam và kỹ thuật cuối cùng nằm ở giữa trong các kỹ thuật trên.
Sử dụng CSS đểẩn văn bản
Đây có lẽ là kỹ thuật dễ dang và phổ biến nhất trong việc lạm dụng tối ưu. Trang Web của bạn sẽ bị lấp đầy từ khóa nhưng người dùng thường không nhìn thấy trong khi máy tìm kiếm tìm thấy nó dễ dàng. Trước đây, các kỹ thuạt cổ điển nhất là dùng font trắng trên nền trắng. Với CSS bạn chỉ việc sử dụng {display: none} (Xem thêm bài viết về ẩn nội dung với CSS).
Một kỹ thuật khác là đặt các từ khóa tại một ví trị đâu đó nằm ngoài tầm hiển thị trang, ví dụ như đặt cách vị trí ngang horizontal position -4000. Các máy tìm kiếm có thể phát hiện những gian lận này dễ dàng và áp dụng thuật toán. Vì vậy cách tốt nhất là bạn nên tránh xa những kỹ thuật này.
Sử dụng CSS đểtrang Web được truy cập dễdàng hơn
Một ví dụ điển hình của kỹ thuật này có thể bắt gặp tại nhiều trang cung cấp “bỏ qua liên kết” để thích ứng với màn hình của người dùng (Thiết bị người dùng khiếm thị sử dụng dể duyệt Web). Việc bỏ qua đường dẫn là chức năng cho phép người dùng khiếm thị tách bỏ phần sơ đồ mục lục để xem trực tiếp nội dung, hoặc bỏ qua nội dung để duyệt mục lục. Nó được tạo ra để hục vụ người dung khiếm thị nhưng một số người thiết kế Web lại ẩn nó đi. CSS cung cấp menu này trong phần mã nguồn HTML để các trình duyệt của người dùng khiếm thị hiển thị được nội dung nhưng nó lại ẩn đi với các trình duyệt bình thướng khác.
Khác với kỹ thuật “văn bản ẩn” nói trên thì dường như không máy tìm kiếm nào xếp loại kỹ thuật này vào spam. Bởi thế bạn hoàn toàn yên tâm sử dụng kỹ thuật này trong việc hỗ trợ người dùng khiếm thị.
CSS chèn hình ảnh.
Có nhiều lý do chính đáng để dử dụng hình ảnh thay thế và chúng ta hãy xem xét một vài kỹ thuật liên quan.
Một kỹ thuật phổ biến là sử dụng ảnh, có thể là logo của công ty và sau đó tạo từ khóa hay khẩu hiệu nằm dưới logo, ví dụ như phần banner của một trang Web. Thường thì tên công ty và dòng miêu tả là nội dung quan trọng, nhưng chúng có thể bị ẩn đi bởi hình ảnh.
CSS có thể bỏ không hiển thị ảnh cho cả máy tìm kiếm, thiết thị của người dùng khiếm thị hay các trình duyệt văn bản thuần túy (vd Lynx) hoặc cả các trình duyệt đồ họa. Có có dạng như sau :
<div id="logo">
<h1>Webmaster Việt Nam : Thủ thuật quảng bá Blog, Website cho Google, Yahoo.</h1> </div> #logo { background: url(/my/background/image.gif); no-repeat; } #logo h1 { display: none; }
Kỹ thuật này được xếp vào hạng “xám” với cảnh báo. Lý do bỏi vì nó rất dễ bị lạm dụng. Giới hạn của việc ứng dụng đúng đó là khi text trong ảnh và text trong HTML trùng nhau. Tuy nhiên, nếu thay vì miêu tả trong logo, bạn lại đọc thấy trong code <h1> các dòng chữ “quảng bá, quang ba, quang ba Web, quảng bá Website, quangbaweb, webquangba, quangba,..” thì đây rõ ràng là một dụng ý định đánh lừa máy tìm kiếm và trước sau bạn cũng sẽ bị phạt.
Thậm chí ngay cả khi ký tự trong hình ảnh và trong thẻ <h1> có trùng khớp nhau và bạn hoàn toàn muốn SEO “mũ trắng” thì bạn vẫn có ít nhiều rủi ro là bị bộ lọc spam để ý và áp dụng hình thức phạt. Bởi vậy phải lưu ý đến rủi ro, được mất khi sử dụng kỹ thuật này.
Tóm lại, kỹ thuật tốt nhất tương thích với cả thiết bị của người dùng khiếm thị và trình duyệt thường là không hiển thị ảnh và sử dụng thẻ alt với miêu tả chính xác cho các hình ảnh. Đây là một kỹ thuật SEO tốt trong mọi trường hợp, bởi có lượng tìm kiếm hình ảnh khá lớn và thẻ alt chính là thẻ khóa để có