1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin

Cascading Style Sheets - CSS - HTML SEO Website

Thảo luận trong 'Onpage Seo - Tối ưu các yếu tố trên trang web' bắt đầu bởi Admin, 19/4/10.

Lượt xem: 61,179
  1. Admin

    Admin Founder

    Gia nhập:
    6/4/10
    Bài viết:
    653
    Đã được thích:
    566
    Nơi ở:
    Hà nội
    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.

    [​IMG]

    [​IMG]

    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.


    [​IMG]

    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.

    [​IMG]

    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:

    [​IMG]

    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)

  2. huynhvan257

    huynhvan257 Top 9

    Gia nhập:
    5/11/10
    Bài viết:
    77
    Đã được thích:
    1
    Web:
    Khá chi tiết và hữu ích, cảm ơn nhiều.
  3. xvip87

    xvip87 Top 9

    Gia nhập:
    3/12/10
    Bài viết:
    44
    Đã được thích:
    1
    Web:
    cái này là css căn bản , thanks bác (*)(*)(*)(*)(*)(*)
  4. olalavui

    olalavui Top 8

    Gia nhập:
    3/6/10
    Bài viết:
    940
    Đã được thích:
    81
    Nơi ở:
    Vietnam
    Web:
    Cái CSS e yếu nhất, chắc phải cố học
  5. seo_newbier

    seo_newbier Top 9

    Gia nhập:
    6/10/10
    Bài viết:
    425
    Đã được thích:
    16
    rất căn bản nhưng cũng rất hữu ích
  6. Gbriel

    Gbriel Top 9

    Gia nhập:
    19/12/10
    Bài viết:
    515
    Đã được thích:
    19
    Nơi ở:
    Hà Nội
    Web:
    hay thật, phải về áp dụng ngay cho site của mình thôi
    cảm ơn admin nhé
  7. thanhmabo

    thanhmabo Top 9

    Gia nhập:
    10/1/11
    Bài viết:
    68
    Đã được thích:
    4
    Web:
    vậy cho em hỏi cách dùng

    position:absolute
    z-index

    cho các thẻ div nằm đè lên nhau có bị phạt không anh ơi, web em đang làm cáh đó để che bớt từ khóa
  8. thaison01

    thaison01 Top 8

    Gia nhập:
    12/9/10
    Bài viết:
    313
    Đã được thích:
    41
    Dùng để phục vụ giao diện web còn được chứ để che bớt key thì mình khuyên bạn ko nên vì google nó đánh giá ko tốt (nghiêm trọng) về vấn đề này.
    Css chỉ là một phần để phục vụ web chứ dùng nó để qua mặt SE thì là điều ko nên lý do:

    css có công thức cả rồi --> SE dễ dàng phát hiện
    phạm lỗi lừa dối người đọc <--- SE nào cũng ko thích
  9. vietnux

    vietnux Top 10

    Gia nhập:
    18/3/11
    Bài viết:
    3
    Đã được thích:
    1
    Nơi ở:
    http://vietnux.com
    Web:
    Đọc song bài này mới thấy mình kếm về css quá :)
    Phải học thêm thôi ...! :(
    crawfish thích bài này.
  10. vmvvietnam

    vmvvietnam Top 9

    Gia nhập:
    21/4/11
    Bài viết:
    40
    Đã được thích:
    0
    Cám ơn đã chia sẻ, rất hữu ích với những người mới như mình!
  11. sunflower1607

    sunflower1607 Top 9

    Gia nhập:
    21/1/11
    Bài viết:
    116
    Đã được thích:
    1
    Cái này theo mình nghĩ bạn dùng robots chặn file css rồi thì spider có đọc được file CSS đâu mà bít nội dung nó là gì. Nếu là site nhỏ thì mình nghĩ không vấn đề gì nhưng là site lớn thì cần phải suy nghĩ lại àh nha :p. Vì google không chỉ có Spider tự động quét mà còn có cã đội ngũ kỹ thuật, chuyên gia đang này đêm nghiên cứu nữa. hi
  12. www.datmui.vn

    www.datmui.vn Top 9

    Gia nhập:
    22/3/11
    Bài viết:
    44
    Đã được thích:
    2
    quá nhiều thứ phải học hỏi thêm. cứ tưởng mình bik nhiều lắm ròi chứ.
  13. tranchung93

    tranchung93 Banned

    Gia nhập:
    20/8/12
    Bài viết:
    57
    Đã được thích:
    4
    cái này rất hay đó bác chủ à.
  14. nhatlainiemtin2045

    nhatlainiemtin2045 Top 9

    Gia nhập:
    4/9/13
    Bài viết:
    173
    Đã được thích:
    6
    Cái này WEB site nào cũng áp dụng rồi

    Nhưng vẫn thank chủ thớt!
  15. VitaminART

    VitaminART Top 10

    Gia nhập:
    14/11/13
    Bài viết:
    22
    Đã được thích:
    1
    Web:
    e không hiểu lắm về cái này, có ai có thể giải thích không
  16. Văn Bắc097

    Văn Bắc097 Top 9

    Gia nhập:
    28/2/16
    Bài viết:
    58
    Đã được thích:
    30
    Bạn nào biết chỉ bạn ấy đi, mình cũng đang cần kiến thức về vấn đề này
  17. jubon

    jubon Top 9

    Gia nhập:
    2/3/16
    Bài viết:
    34
    Đã được thích:
    1
    toàn kiến thức căn bản cho người mới như em, thank thớt nhiều
  18. Minh vương123

    Minh vương123 Top 9

    Gia nhập:
    5/3/16
    Bài viết:
    32
    Đã được thích:
    10
    Web:
    chữ nhỏ khó đọc quá bạn ơi, sửa lại được không bạn.
  19. Hà Mậu Phương

    Hà Mậu Phương Top 9

    Gia nhập:
    27/2/16
    Bài viết:
    58
    Đã được thích:
    2
    Web:
    Bài này nói về Css hay quá! Nói thật thì mình ngu cái này lắm !
    Cảm ơn đã chia sẻ làm mình hiểu thêm rất nhiều thứ!
  20. Otaku

    Otaku Seo Newbie

    Gia nhập:
    30/7/15
    Bài viết:
    2
    Đã được thích:
    0
    Web:
    Chữ trong bài viết quá nhỏ khó đọc nếu ai muốn học chuyên sâu về HTML và CSS thì lên w3schools nha. Trên đó có demo đầy đủ luôn

Nội quy khi thảo luận:

Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


Chia sẻ trang này

Đang tải...