SỰ ĐIỀU HƯỚNG TRONG WEBSITE

seri seo cơ bản -  bài 7
 Có hai thành phần thường thấy trong các trang web làm nhiệm vụ điều hướng là menu và navigator.
- Ý nghĩa của menu
- Về mặt người duyệt web, các menu như một “bảng giới thiệu” những trang quan trọng nhất của website.
- Về mặt SEO, trang chủ của các website thông thường sẽ nhận được điểm số cao hơn rất nhiều so với các trang còn lại, menu thực chất cũng là một liên kết (có thể là liên kết hình ảnh, liên kết văn bản, …), vì thế những liên kết này trỏ về trang nào đó trong website tương đương với việc trang chủ “vote” cho các trang đó.
- Ý nghĩa của navigator
- Về mặt người duyệt web, navigator đóng vai trò như một sơ đồ chỉ dẫn “đường đi” trong website.
- Về mặt SEO, navigator là “hoa tiêu” cho các spider khám phá ra những trang còn lại trong website của các bạn.
- Có rất nhiều dạng menu (image map menu, drop-down menu, …) cũng như có rất nhiều cách thể hiện menu (text link, flash, javascript, …) vì thế để có thể kết hợp hài hòa giữa các yếu tố cho người duyệt web và thân thiện với các bộ máy tìm kiếm là do sự khéo léo của các bạn. Và điều này cũng tương tự cho navigator.

Những điểm cần lƣu ý
- Đặt text link menu ở đầu hoặc cuối trang vì đây là các khu vực spider quan tâm đầu tiên.
- Nếu sử dụng menu dạng hình ảnh, chú ý thuộc tính ALT.
- Các spider bị giới hạn trong việc đánh chỉ mục với những menu xây dựng với Javascript hoặc Flash.

LAB 05
 Kiểm tra lại mã nguồn của menu và navigator, nếu sử dụng JavaScript hoặc Flash thì chuyển qua CSS (nếu có thể). Ngoài ra, kiểm tra lại cấu trúc của navigator của trang web các bạn.

 CSS & SEO
Ở bài trước, chúng ta đã xét qua sự ảnh hưởng của CSS đến việc thiết kế bố cục trang
web . Với bài học
này, các bạn sẽ được hướng dẫn rõ ràng hơn cùng nhiều ví dụ cụ thể hơn.
Đầu tiên, chúng ta hãy định nghĩa CSS là gì? CSS viết tắt của cụm từ
C ascading S tyle S heets và được
W3C định nghĩa như sau:
"Style sheets describe how documents are presented on screens, in print, or perhaps how they are p r o n o u n c e d [ ... ] B y a t t a c hin g s t yle s h e e t s t o s t r u c t u r e d d o c u m e n t s o n t h e W e b ( e . g . H T M L ) , a u t h o r s a n d r e a d e r s c a n in flu e n c e t h e p r e s e n t a tio n o f d o c u m e n t s wit h o u t s a c rificin g d e vic e independence or adding new HTML tags."
Định nghĩa theo kiểu “bình dân học vụ” CSS là một ngôn ngữ hỗ trợ cho HTML, làm cho một trang
web
đạt đến phong cách sáng tạo của người thiết kế & làm cho người duyệt
web cảm thấy sinh động, bắt mắt hơn mà không cần phải có thêm bất kỳ thiết bị đặc biệt nào hoặc bất kỳ thẻ HTML mới nào được tạo ra.
CSS làm việc nhƣ thế nào?
Đầu tiên, các bạn định nghĩa 1
style . Ví dụ các bạn muốn định nghĩa 1 văn bản có màu xanh đậm, co
chữ 12, font Verdana và in đậm:
Color: #5500DD; Font-size: 12px; Font-family: Verdana; Font-weight: bold;
Kế tiếp, hãy đặt cho
style của bạn một cái tên (hay còn được gọi là
class – chú ý có dấu “.”  trước tên
class ).
MyStyle { Color: #5500DD; Font-size: 12px; Font-family: Verdana; Font-weight: bold;  }
 Hoặc có thể “áp” style này đến một thẻ HTML cụ thể:
h1 {
Color: #5500DD; Font-size: 12px; Font-family: Verdana;    
CSS có thể được khai báo trong một trang HTML với thẻ <style> bất kỳ nơi nào trong trang. Tuy nhiên, một cách làm khác hiệu quả hơn là tạo thành một tập tin . css riêng biệt để giảm dung lượng trang web . Để có thể dùng CSS với một tập tin . css riêng biệt, các bạn phải cung cấp một đường dẫn đến tập tin . css đó trong phần HEAD của trang HTML.
<link rel=”stylesheet” href=”mystyle.css” type=text/css” />
CSS giúp cho việc tối ƣu hóa nhƣ thế nào?
Hãy xem sự khác biệt giữa có CSS & không có CSS. Sau đây là một câu lệnh HTML thông thường để gia tăng co chữ & tô màu cho chúng:
<strong><font color=”FF0000” size=”24px”>Đề mục chính của trang</font></strong>
Và cũng với hiệu ứng tương tự nhưng dùng CSS:
<span class=”MyStyle”> Đề mục chính của trang</span>
Với
.MyStyle }  Font-weight: bold;  Color: #FF0000;  Font-size: 24px; }

Như các bạn thấy, số lượng mã sẽ được giảm đáng kể từ đó sẽ giảm tỷ lệ gia tăng mã trong nội dung.
Hiệu ứng rollover bằng CSS vs Hiệu ứng rollover bằng Javascript
Rollover là một hiệu ứng rất phổ biến và thường được thực hiện bằng
Javascript . Thật may mắn, với
CSS các bạn cũng có thể tạo ra một hiệu ứng rollover mà không cần dùng bất kỳ script nào và dễ dàng “đọc” được bởi các spider .

CSS với rất nhiều thuận lợi là thế, nhưng nếu không chú ý, các bạn có thể gây ra những tai nạn đáng tiếc.
Trƣờng hợp nào CSS nên dùng một cách cẩn trọng
Ẩn văn bản dưới bất kỳ hình thức nào là điều cấm kỵ với các SE. Từ đó hãy tuyệt đối cẩn thận khi dùng display: none, visibility: hidden.
Một kỹ thuật khác nên tránh là thiết lập màu chữ trùng với màu nền.
Sử dụng CSS làm giảm tối thiểu kích thước của các trang HTML và gia tăng tối đa cơ hội sử dụng từ khóa hiệu quả trong các yếu tố HTML quan trọng như H1, H2, … nhưng lạm dụng chúng cho những mục đích không lành mạnh cụ thể như ẩn văn bản là một điều tuyệt đối phải tránh, các SE đủ “thông minh” để phát hiện ra sự gian lận này.    
 Những điểm cần lưu ý
- CSS là một phương tiện hoàn hảo để giảm tỷ lệ gia tăng mã trong nội dung; tối thiểu hóa kích thước của trang HTML; đáp ứng được phong cách thiết và thuận lợi cho các spider khi duyệt trang web.
- Nên tránh sử dụng những kỹ thuật ẩn văn bản thông qua CSS hoặc thiết lập màu chữ trùng màu nền.
 LAB 06
Sử dụng CSS cho trang web của các bạn để làm giảm sự gia tăng nội dung trong mã nguồn và bảo trì được thuận tiện hơn