Tối ưu html, css với công cụ tìm kiếm

Cascading Style Sheets (viết tắt là CSS) được sử dụng rộng rãi, CSS có 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á website, tối ưu hóa cho máy tìm kiếm SEO và 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. 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 thẻ font. 

- Sử dụng các thẻ HTML chuẩn như thẻ 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ứ 1400 thì liệu bạn có thể đoán được đâu là nội dung quan trọng của tài liệu này không ?. Máy tìm kiếm 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. 

 



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 (thẻ UL) và siêu liên kết (thẻ 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. 

 

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ế. 

Ví dụ:

Đặt vấn đề: Người thiết kế trang Web của bạn sủ dụng thẻ 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.

 

Việc sử dụng thẻ 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.

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 và các chiến dịch quảng bá, ví dụ như: 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ế website 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:



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 thẻ 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ó được lượng khách tìm kiếm này.

Kết luận

Với CSS chúng ta không chỉ dàn trang nhanh chóng dễ dàng, linh hoạt theo các chuẩn HTML mà còn có tác dụng rất nhiều trong việc tối ưu hóa trang Web cho máy tìm kiếm. Đó là khả năng tách rời phần nội dung và dàn trang CSS một cách gọn gàng. Nhờ đó bạn có thể trình bày nội dung đúng ngữ nghĩa, khả kiến và giảm bớt dung lượng tệp tin mã nguồn HTML quyết định quan trọng tới việc đánh chỉ số của máy tìm kiếm. Ngoài ra chúng ta còn có thể áp dụng các kiểu dàn trang và hiển thị theo ý muốn thiết kế. Đây là một công cụ mạnh với nhiều ứng dụng.

(Nguồn: Vietseo.net)