: SEO issues using the same `src` for a sprite sheet, but each time with a different `alt` attribute Ive got a site that uses some images as UI graphics, the sort of thing is : loading
Ive got a site that uses some images as UI graphics, the sort of thing is :
loading gif
slider next / prev arrow
modal close X
etc..
In total there are about 10 images, each <8kb so download speed isnt that much of an issue but the amount of connections the browser is making is (as this slows down the overall load) to get around this im planning on placing all images into a sprite sheet.
My concern is setting the alt attribute for these images as in each instance although the src will be the same, the image displayed to the user will be different. Usually i set the alt attribute for each of these images something like 'alt="slider-next"' not that there is much seo benefit from (as the images are usually small around 1% of screen area so i guess have no major SEO impact) this but its just semantic.
Would a search bot get confused (or worse penalise the site) if it sees the same src 10 times on a page, but each time with a different 'alt' description ?
More posts by @Gonzalez347
1 Comments
Sorted by latest first Latest Oldest Best
Possibly, but its more of the question of how does it impact the browsers all of your website guests are using. Theres a chance that one will at least one will read the HTML sequentially from top to bottom and as it comes across a src attribute of the image tag, it requests the file from the server. Do this 10x and the requests will be made 10x by such browsers.
A method I use to handle sprites on my website which works wonderfully with tons of guests is via DIV tags and style sheets.
Here's an example in code on how my method works:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css"> #S1 ,#S2,#S3,#S4{background-image: url('http://example.com/spritesheet.jpg')} #S1 {background-position: -100px -200px} #S2 {background-position: -100px -400px}
#S3{background-position: -400px -200px}
#S4{background-position: -600px -200px}
</style>
</head>
<body>
<p>sprite 1</p>
<div ID="S1"></div>
<p>sprite 2</p>
<div ID="S2"></div>
<p>sprite 3</p>
<div ID="S3"></div>
<p>sprite 4</p>
<div ID="S4"></div>
</body>
</html>
It's not 100% perfect by any means, but it loads the sprite sheet and the proper sections in DIV tags. This kind of setup validates in HTML 4.01 strict mode according to tests run with the w3c validator.
I had to use negative numbers for position values in order for Opera web browser to load the sprite sheet elements correctly.
If you insist on using image tags, you can replace DIV with IMG and remove the closing DIV tags but you'll likely get a complaint from w3c for not providing an image source.
As for alt tags, I'd just replace them with on-screen titles or mini foot-notes (text with smaller font under the sprite). For example, on my site, I have previous and next arrows as sprites, and right under each sprite, I simply use labels similar to "previous" and "next" so people know what link goes to what regardless of the client's web browser's capability to process style sheets.
If by chance, an element in a style sheet is a ridiculously important image that would value users who use search engines to locate your site, then it should just be an image in itself and then an image tag should apply only to it.
Navigation and decorative art that people don't think about when visiting the site shouldn't really matter unless your website is all about arrows and users were searching for arrows. Therefore, such items do not need an alt tag since users don't want to spend time hovering over navigation elements only to see obvious text pop up on the screen.
P.S. If anyone ends up scoring high on their website when it has nothing to do with arrows except that it only has one arrow button that links to the next page of a document (also unrelated to arrows), I'd like to visit that site along with the search engine that referenced it.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.