Thiết kế website tối ưu với máy tìm kiếm
Trong xu hướng thiết kế web hiện đại, có 2 cách để thiết kế bố cục (layout) phổ biến là các bảng (table) lồng nhau và dựa vào chuẩn CSS.
Cách thiết kế layout theo dạng table đã quá phổ biến với các thiết kế viên (designer) vì tính trực quan, thời gian thiết kế cũng được rút ngắn và khả năng tương thích trình duyệt cao. Nhưng việc lạm dụng thiết kế layout theo table cũng dẫn đến một số rắc rối cho các designer. Vào cuối thập niên 90, W3C giới thiệu CSS (Cascading Style Sheets) cho phép tùy biến những kiểu thể hiện khác nhau cho tài liệu HTML. Các trình duyệt nhanh chóng hỗ trợ CSS, các designer bắt đầu áp dụng chuẩn này cho các bản thiết kế của họ.
Sau đây là những lý do chính của việc các designer từ bỏ việc sử dụng table và chuyển sang dùng CSS:
- Table làm gia tăng kích thước của site dẫn đến việc tiêu tốn băng thông không cần thiết .
- Tiêu tốn thời gian hiệu chỉnh nhiều hơn so với việc dùng CSS nếu website có thay đổi.
- Những người khiếm thị hoặc những người truy cập website bằng DTDĐ hay PDA sẽ không được hiển thị đúng đắn.
Cuối cùng, tiêu chuẩn web W3C hiện tại là sử dụng CSS và tin tốt lành là hiện nay tất cả các trình duyệt đều hỗ trợ chuẩn này.
Tại sao CSS tốt hơn?
Thiết kế layout với CSS có một số thuận lợi đối với việc tối ưu hóa công cụ tìm kiếm (SEO) điển hình là việc có thể đặt nội dung trước các mã lệnh khác bằng thẻ DIV (luôn nhớ rằng việc bố trí những nội dung quan trọng bao gồm từ khóa lên phần đầu của trang web luôn làm gia tăng sự nổi bật của từ khóa).
CSS giúp giảm bớt kích thước của trang web và khách tham quan (visitor) không cần phải tải về những dữ liệu mang tính chất trình bày khi xem mỗi trang vì chúng đã được lưu trong bộ nhớ tạm (cache) của trình duyệt.
Như hình minh họa bên trên, chúng ta dùng 1 cell rỗng với thuộc tính rowspan, các robots khi quét trang này sẽ duyệt qua cell rỗng ở dòng 1, sau đó chúng sẽ tiếp cận đến nội dung mong muốn của chúng ta trong khi menu vẫn được bố trí theo sự phổ biến bên tay trái bất chấp menu có thể là hình ảnh.
lt;table border=”1″ cellpadding=”5″ cellspacing=”0″ width=”450″gt;
lt;trgt;
lt;td valign=”top” align=”left” width=”140″gt;lt;/tdgt;
lt;td valign=”top” align=”left” width=”450″ rowspan=”2″gt;
Nội dung có chứa từ khóa
lt;/tdgt;
lt;/trgt;
lt;trgt;
lt;td valign=”top” align=”left” width=”140″gt;
Menu
lt;/tdgt;
lt;/trgt;
lt;/tablegt;
Lời khuyên: Sử dụng table phân lớp (layer) sẽ tải trang nhanh hơn. Các trình duyệt hiển thị table tuần tự, cung cấp cho visitornhững thông tin đầu tiên trong khi vẫn tiếp tục tải trang. Vì thế tôi khuyên bạn nên chia ra thành nhiều table riêng biệt để có thể tải nhanh chóng từng table.
Như hình minh họa bên trên, trực quan chúng ta nhận thấy rằng nội dung không phải là phần đầu tiên các robot quét nhưng vì được bố trí trong thẻ DIV nên nó là vị trí tốt nhất. Luôn nhớ nguyên tắc hàng đầu từ khóa nằm gần vị trí đầu trang hoặc đầu câu luôn thuận lợi trong việc gia tăng kết quả xếp hạng.
Đến đây, nếu bạn vẫn thích dùng table, tôi không cản bạn. Nhưng các website sẽ ít mã hơn, kích cỡ nhỏ hơn và tốc độ tải nhanh hơn nếu dùng XHTML và CSS. Và những điều này luôn phù hợp cho visitor lẫn các SE.
Sản phẩm nổi bật.
Sản phẩm nổi bật
Bộ lưu trữ điện năng lượng mặt trời 12V 20Ah KA-SL20Ah cho camera, báo động, chiếu sáng, an ninh viễn thông
