CSS สไปรต์ไม่ดีสำหรับ SEO หรือไม่?

18

ทุกวันนี้บ่อยครั้งที่สิ่งที่<img>แท็กสามารถทำได้สำเร็จด้วยบางสิ่งเช่น<div>ชุดภาพพื้นหลัง CSS โดยใช้ CSS 'สไปรต์' และออฟเซ็ต

ฉันสงสัยว่าลักษณะพิเศษของเขาที่มีต่อ SEO นั้นเป็นอย่างไรเมื่อเราสูญเสียaltแอตทริบิวต์ (ซึ่งจัดทำดัชนีโดย Google) และติดอยู่กับแอตทริบิวต์ 'ชื่อ' (ซึ่งเท่าที่ฉันเข้าใจไม่ได้จัดทำดัชนี)

นี่เป็นข้อเสียที่สำคัญหรือไม่

seo css

— UpTheCreek
แหล่งที่มา

25

CSS Sprite ควรใช้สำหรับองค์ประกอบตกแต่งด้วยเหตุผลนี้ - ใช้<img>สำหรับองค์ประกอบที่เฉพาะเจาะจงกับหน้าเว็บและใช้ Sprite สำหรับองค์ประกอบตกแต่งที่ไม่เกี่ยวข้องกับบริบทของเนื้อหาที่นำเสนอ

หากคุณต้องการรูปปุ่มสำหรับรายการการนำทางของคุณการเพิ่มรูปภาพนั้นเป็นพื้นหลังบนลิงก์การนำทางแทนที่จะเพิ่มมาร์กอัปเช่นนี้:

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

(เช่นที่ใดก็ตามที่เนื้อหาของรูปภาพซ้ำซ้อนกับเนื้อหาข้อความบนหน้าเว็บหรือเนื้อหาของรูปภาพอาจอธิบายได้ดีที่สุดว่า "การตกแต่ง")

ในฐานะที่เป็นโบนัสเพิ่มเติมของการแยกองค์ประกอบแม่แบบไซต์เป็นสไปรต์คุณจะสามารถเปลี่ยน "สกิน" ของไซต์ได้โดยการเปลี่ยนสไตล์ชีทแทนที่จะเขียนทับไฟล์ภาพการออกแบบเก่าหรือเขียน HTML มาร์กอัปของคุณทั้งหมด

— danlefree
แหล่งที่มา

ฉันเห็นด้วยกับคะแนนของคุณและจะเพิ่มว่าหนึ่งในวัตถุประสงค์หลัก / ข้อดีของสไปรต์คือความเร็วในการโหลดเร็วขึ้นสำหรับประสิทธิภาพของไซต์โดยรวม โหลดหน้าเว็บที่เร็วขึ้นได้รับการสนับสนุนเพื่อช่วยในการจัดอันดับ SEO ดังนั้นฉันคิดว่ามันเป็นเรื่องของเครื่องมือที่เหมาะสมสำหรับงานที่เหมาะสม

— digit1001

@ digit1001 - บอตอย่าง googlebot โหลดทรัพยากรทั้งหมดที่เกี่ยวข้องกับหน้าเว็บหรือไม่?

— UpTheCreek

4

คุณสามารถใช้<img>แท็กด้วย CSS sprites:

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

sprite.png อาจเป็นพิกเซลโปร่งใสขนาด 1x1 ที่ถูกบีบอัดให้เหลือน้อยกว่า 50 ไบต์

สไตล์:

#someSprite {

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

}

ด้วยวิธีนี้คุณจะได้รับการปรับปรุงประสิทธิภาพจากสไปรต์ - และเก็บaltแท็กของคุณ

— JohnnyFaldo
แหล่งที่มา

ฉันค่อนข้างแน่ใจว่าถ้า Google สามารถเขียนเสิร์ชเอ็นจิ้นด้วยกระบวนการที่ซับซ้อนเพื่อจัดอันดับและจัดทำดัชนี 30 ล้านล้านหน้ามันสามารถตรวจสอบการยืนยันพิกเซล 1x1

— Ricky Boyce

1

@Ricky B ไม่ใช่ว่าพวกเขาจะตรวจจับ แต่ถ้าพวกเขาลงโทษคุณอย่างผิดปกติซึ่งจะแปลกเพราะพวกเขาจะลงโทษคุณในการลดเวลาในการโหลดหน้าและจำนวนคำขอซึ่งเป็นสิ่งที่พวกเขามักจะสนับสนุน: )

— JohnnyFaldo

1

altแท็ก overrated ฉันคิดว่ามีคนจำนวนมากออกไปเพื่อให้แน่ใจว่าพวกเขามีaltแท็กบนหน้าเว็บของพวกเขา ฉันไม่เชื่อว่ามันเจ็บคุณไม่มี มันเป็นเรื่องของการทำให้แน่ใจว่าคุณมีimgคุณมีaltแท็กที่ได้รับมอบหมาย

ฉันเชื่อว่าความเร็วในการโหลดและประสิทธิภาพเว็บไซต์มีผลกระทบต่อ SEO โดยรวมมากกว่าaltแท็กทำและสำหรับทุกคำขอรูปภาพหรือคำขอ HTTP เว็บไซต์จะช้าลง วัตถุประสงค์ของสไปรต์ CSS คือช่วยลดการร้องขอเหล่านั้นและเพื่อเพิ่มความเร็วในการโหลดหน้าเว็บของคุณ

— แบรนดอน Buttars
แหล่งที่มา

5

altข้อความยังถูกใช้โดยโปรแกรมอ่านหน้าจอ ฉันคิดว่าคุณอาจมีความคิดเห็นที่แตกต่างจากข้อความ alt หากคุณตาบอด

— MikeTheLiar

1

ฉันมักจะใช้ sprite สำหรับไอคอนตกแต่งพวกเขาไม่มีอะไรเกี่ยวข้องกับหน้าเว็บโดยรวมดังนั้นสำหรับ SEO มันดีในกรณีนี้ ชุดของภาพใด ๆ ที่คุณมีขนาดเดียวกันทั้งหมดที่ไม่ได้มีส่วนร่วมในความหมายของหน้านั้นเป็นตัวเลือกที่ดีสำหรับ CSS sprite

— Agile Noob
แหล่งที่มา