Ẩn nội dung bằng CSS - display: none và bộ lọc Google

Tính hợp pháp trong việc sử dụng CSS (display: none) để ẩn nội dung đối máy tìm kiếm

Từ khóa: css, google, crawling, indexing, indexability, seo, hide text, search engine

Nếu như bạn phải làm SEO (Search Engine Optimization) trên một số lượng lớn các trang Web thì ắt hẳn bạn sẽ thích sử dụng một hệ thống quản trị thông tin CMS. Tuy nhiên, những hệ thống CMS này thường có vấn đề và ít nhiều không tương thích với máy tìm kiếm. Một lý do đơn giản là những lập trình viên thường không nắm được hết chức năng và cách thức hoạt động của Search Engine. Và vì thế, khi viết mã nguồn, họ không tính đến phương thức hoạt động của máy truy tìm thông tin.

Một trong những kỹ thuật được sử dụng hết sức rộng rãi là tải trước (pre-load) hoặc đặt nội dung vào trong nền của trang và chỉ hiển thị khi cần thiết. Kỹ thuật phổ biến nhất loại này là sử dụng CSS với hàm display: none¹.

Tổng quan display: none

Trên những trang web lớn thì cấu trúc mục lục sẽ rất phức tạp. Giả sử bạn có khoảng 10 chủ đề lớn, trong mỗi chủ đề này lại có đến 5 hoặc 10 chủ đề nhỏ. Bạn phải thiết kế navigation menu sao cho nó có thể hiển thị hết các chủ đề lớn, và chủ đề con của nó trên tất cả các trang.

Bạn quyết định hiển thị trên trang chủ toàn bộ chủ đề lớn. Và khi ở trong một chủ đề lớn thì lại chỉ hiển thị các chủ đề con này trên menu. Và để làm được việc đó, bạn đặt một <div> với giá trị display: none như sau :

<div id="menu-chinh" style="display: none;"> Các chủ đề chính</div>

Đây là một trong những cách sử dụng rộng rãi nhằm làm giản lược trình bày mã nguồn. Bạn đặt mã nguồn các mục liên kết của menu y nguyên trên tất cả các trang, sau đó tùy vào từng trang bạn sẽ điều khiển hiện/ẩn các thành phần tương ứng².

Mặt trái của display: none

Việc lạm dụng CSS SEO để ẩn nội dung có thể làm như sau :

<div class="hidden text" style="display: none;"> Đây là phần nội dung ẩn<div>

Vần vấn đễ bắt đầu phát sinh tại đây. Các văn bản ẩn nếu bị làm dụng sẽ gây khó khăn cho màn hình đọc của người dùng khiếm thị. Đặc biệt là các CMS hiện tại sử dụng rất nhiều kỹ thuật này.

Phản ứng của Google

Trên diễn đàn WebmasterWorld³, các Webmaster⁴ khẳng định việc Google phân tích nội dung CSS. Và lời kết cho cuộ thảo luận này là :

Thuật toán của Google đã có thể hiểu rõ nội dung html/xhtml. Google sẽ không phân tích nội dung CSS và xác định các phần text ẩn. Các bọ tìm kiếm sẽ xác định tại sao tệp tin CSS đó lại tồn tại. Trong thực tế có nhiều các sử dụng CSS display: none; hợp lệ. Còn nếu như ai đó cố tình lạm dụng kỹ thuật này để ẩn phần nội dung trên trang, thì đây chắc chắn không phải là cách làm lâu dài.

Điều mình muốn nói là khi ai đó lạm dung kỹ thuật này thì sẽ không thể tránh khỏi bộ lọc spam của Google cũng như những máy tìm kiếm khác. Và rất có nhiều khả năng là Website của bạn sẽ bí áp dụng các hình thức phạt nhất định. Mà đây không phải là cách làm của những trang Web đầu tư lâu dài.

Nguyễn Hoài Nam - vietSEO.net (Bản quyền tác giả)

1. Hiding Content width “Display: None” Legitimate SEO ? [↩]
2. Deciding when display: none is appropriate [↩]
3. When Google understands CSS files [↩]
4. Using CSS To Hide Text: Search Engine Response [↩]

Bài viết cùng chủ đề liên quan

1. Nổi bật giữa đám đông bằng một Favicon
   Phần 12 cuốn sách tiếng Việt \"Hướng dẫn kiếm tiền trên mạng\" của John Chow :Nổi bật giữa đám đông bằng một Favicon.
2. Kiếm tiền quảng cáo qua mạng bằng Kontera
   Chương 22 cuốn sách tiếng Việt - Hướng dẫn kiếm tiền trên mạng - của John Chow : Kiếm tiền quảng cáo qua mạng bằng Kontera
3. Kiếm tiền bằng bán Text Link quảng cáo
   Chương 22 cuốn sách tiếng Việt - Hướng dẫn kiếm tiền trên mạng - của John Chow : Kiếm tiền bằng bán Text Link quảng cáo
4. Bộ lọc Google áp dụng cho các tên miền mới
   Các bước tiến hành nhằm tăng thứ hạng trên công cụ tìm kiếm Google đối với các Website mới bị áp dụng bộ lọc Google
5. Nội dung kép và phương pháp phát hiện mới của Google
   Mô hình ứng dụng mới của Google nhằm phát hiện nội dung trùng lặp, nội dung kép. Cách Google áp dụng bộ lọc và phương pháp tối ưu trang Web của bạn.

Tags : Chỉ số hoá Website, crawling, css, hide text, indexing, Máy tìm kiếm Google, search-engine, SEO