Là các CSS spites xấu cho SEO?

18

Ngày nay, những gì đã được thực hiện với một <img>thẻ giờ được thực hiện với một cái gì đó giống như <div>với một hình ảnh nền CSS bằng cách sử dụng CSS 'sprite' và offset.

Tôi đã tự hỏi anh ấy có ảnh hưởng gì đến SEO, vì chúng tôi mất altthuộc tính một cách hiệu quả (được Google lập chỉ mục) và bị mắc kẹt với thuộc tính 'title' (theo như tôi hiểu là không được lập chỉ mục).

Đây có phải là một bất lợi đáng kể?

seo css

— UpTheCux
nguồn

25

Chỉ nên sử dụng các họa tiết CSS cho các yếu tố trang trí vì lý do này - sử dụng <img>cho các yếu tố dành riêng cho một trang và sử dụng các họa tiết cho các yếu tố trang trí không liên quan đến ngữ cảnh với nội dung được trình bày.

Nếu bạn cần một hình ảnh nút cho các mục điều hướng của mình, việc thêm hình ảnh đó làm nền trên liên kết điều hướng thay vì đánh dấu như thế này sẽ có ý nghĩa hơn nhiều:

<a href="/">
  <img src="/images/home.gif" title="Home" alt="Home Button" /> 
  Home
</a>

(tức là bất cứ nơi nào nội dung của hình ảnh là dư thừa cho nội dung văn bản trên trang hoặc nội dung của hình ảnh có thể được mô tả tốt nhất là "trang trí")

Là một phần thưởng bổ sung của việc tách các thành phần mẫu trang web thành các họa tiết, sau này bạn sẽ có thể thay đổi "giao diện" của trang web bằng cách thay đổi biểu định kiểu thay vì ghi đè lên tệp hình ảnh thiết kế cũ hoặc viết lại tất cả đánh dấu HTML của bạn.

— danlefree
nguồn

Tôi đồng ý với quan điểm của bạn và sẽ nói thêm rằng một trong những mục đích / lợi thế chính của các sprite là tốc độ tải nhanh hơn cho hiệu suất tổng thể của trang web. Tải trang nhanh hơn ĐƯỢC CUNG CẤP để giúp xếp hạng SEO, vì vậy tôi nghĩ đó là vấn đề của công cụ phù hợp cho công việc phù hợp.

— chữ số1001

@ Digit1001 - các bot như googlebot có thực sự tải tất cả các tài nguyên được liên kết với một trang không?

— UpTheCux

4

Bạn có thể sử dụng <img>các thẻ với CSS spites:

<img alt="description of image" src="images/sprite.png" id="someSprite" />

sprite.png có thể là pixel trong suốt 1x1 được nén thành <50 byte.

Phong cách:

#someSprite {

     width:74px;
     height:38px;
     background:url('/images/sprites.png') left 0px top 84px;

}

Bằng cách đó bạn có được tối ưu hóa hiệu suất từ các họa tiết - và giữ các altthẻ của bạn .

— JohnnyFaldo
nguồn

Tôi khá chắc chắn nếu google có thể soạn thảo một công cụ tìm kiếm với các quy trình phức tạp để xếp hạng và lập chỉ mục 30 nghìn tỷ trang, nó có thể phát hiện các xác nhận alt 1x1 pixel.

— Ricky Boyce

1

@Ricky B Không phải là họ có phát hiện ra hay không, nhưng nếu họ kỳ lạ phạt bạn vì điều đó, điều này thật kỳ quặc vì họ sẽ phạt bạn vì giảm thời gian tải trang và số lượng yêu cầu, đó là điều họ có xu hướng khuyến khích: )

— JohnnyFaldo

1

Các altthẻ được đánh giá quá cao. Tôi nghĩ rằng có quá nhiều người tránh đường để đảm bảo họ có altthẻ trên trang của họ. Tôi không tin rằng nó làm tổn thương bạn không có một. Đó chỉ là vấn đề đảm bảo nếu bạn có img, bạn có một altthẻ được gán cho nó.

Tôi tin rằng thời gian tải và hiệu suất trang web có tác động lớn hơn đến SEO nói chung so với altcác thẻ làm và đối với mỗi yêu cầu hình ảnh hoặc yêu cầu HTTP, trang web sẽ chậm lại. Mục đích của sprite CSS là giúp giảm thiểu các yêu cầu đó và tăng tốc thời gian tải trang của bạn.

— Brandon mông
nguồn

5

Các altvăn bản cũng được sử dụng bởi trình đọc màn hình. Tôi nghĩ rằng bạn có thể có một ý kiến khác về văn bản thay thế nếu bạn bị mù.

— MikeTheLiar

1

Tôi có xu hướng sử dụng các họa tiết cho các biểu tượng trang trí, chúng không liên quan gì đến toàn bộ trang vì vậy để SEO ổn trong trường hợp đó. Bất kỳ tập hợp hình ảnh nào bạn có đều có cùng kích thước không đóng góp cho ý nghĩa của trang đều là ứng cử viên tốt cho các họa tiết CSS.

— Noob nhanh nhẹn
nguồn