tối ưu bố cục trang

SEO – Search Engine Optimization

www.themegallery.com

TỐI ƯU BỐ CỤC TRANG

Xu hướng thiết kế web

TABLE vs DIV

Tối ưu hóa layout TABLE

Tối ưu hóa layout DIV

Lời khuyên

Những điểm lưu ý

XU HƯỚNG THIẾT KẾ WEB

http://hoangnguyen.edu.vnhttp://ctit-vn.com

Có 2 xu hướng thiết kế web:

TABLE được sử dụng phổ biến vì:

• TABLE lồng nhau

• DIV

• Hình ảnh, văn bản trình bày trực quan

• Thời gian thiết kế nhanh

• Tương thích tốt các loại trình duyệt

• Thời gian học nhanh

Xu hướng chuyển dịch khi DIV xuất hiện

TABLE VS DIV


Các ưu điểm của TABLE đã tạo nên xu thế

thiết kế trong 1 thời gian dài

Các ưu điểm của DIV:

• Dung lượng của file HTML nhỏ thời gian tải trang

nhanh hơn (50%)

• Tách biệt thiết kế và nội dung

• Tương thích với các SE

• Dễ dàng thay đổi và kiểm soát bố cục thông qua ID

TABLE hay CSS tốt?

TABLE VS DIV (tt)


Vì sao DIV tương thích với các SE?

• http://seo-course.webchuyennghiep.net/vidu-4-3-1.html

• http://seo-course.webchuyennghiep.net/vidu-4-3-2.html

Xem ví dụ 4-3-1 và 4-3-2

http://seo-course.webchuyennghiep.net/vidu-4-3-1.html


















TỐI ƯU HÓA LAYOUT TABLE


Một trang web được thiết kế với TABLE có nội

dung chính nằm ở ô bên phải và phía dưới

Spider đọc nội dung 1 trang web từ trên xuống

và từ trái qua spider duyệt qua rất nhiều dòng

mã trước khi đến nội dung chính

TỐI ƯU HÓA LAYOUT TABLE (tt)


http://www.seo-course.webchuyennghiep.net/vidu-3-3-1.html




















TỐI ƯU HÓA LAYOUT DIV


Thực tế …





















LỜI KHUYÊN

Ngừng sử dụng TABLE để chuyển sang DIV

• TABLE làm cho kích cỡ trang web tăng lên


• Thay đổi layout TABLE tốn

nhiều công sức & thời gian

• Gia tăng tỷ lệ mã trong nội

dung

• Không thể hiện đúng đắn với

smartphone hoặc PDA

Lạm dụng TABLE lồng nhau dẫn đến gia tăng

tỷ lệ mã trong nội dung.

NHỮNG ĐIỂM CẦN LƯU Ý

Dùng DIV để đặt nội dung vào phần đầu của

trang web.

http://giaiphaplienket.comhttp://hoangnguyen.edu.vnhttp://ctit-vn.com

TABLE sẽ gây trở ngại cho spider thu thập

thông tin trang web

Đảm bộ lộ trình của spider tiếp cận nội dung

trang web là ngắn nhất.

tối ưu bố cục trang

Education