: Alt text vs CSS sprites (SEO vs speed) I'm reworking our site to reduce HTTP requests and blocking requests by concatenating JS, css, gzipping, loading all JS via LABjs and using CSS sprites
I'm reworking our site to reduce HTTP requests and blocking requests by concatenating JS, css, gzipping, loading all JS via LABjs and using CSS sprites for images that were loaded individually via <img> tags before.
Progress has been great so far - 5x page load performance improvement. However, we're in the top 5 organic search ranking in google for many targeted keywords and phrases. I'm afraid eliminating so many img tags with alt attributes can hurt our SEO.
Does anyone have any experience with alt tag manip/removal and effects on SEO positions? Is previous rank "sticky"?
More posts by @Reiling115
5 Comments
Sorted by latest first Latest Oldest Best
You solve this by re-thinking your options.
You create a defined area with a <a> with display:block; or <div> and use overflow hidden; to hide overflow and position:relative;.
Then you place your <img> image sprite inside absolutely positioned, which is possible since you positioned the parent.
Then use :hover on the image to change position.
Now your sprite is based on an img tag, so you can use your alt text.
Following example is based on a Facebook sprite with two versions of the icon on top of each other, each 50px by 50px, total height of image being 100px:
<!DOCTYPE html>
<html>
<head>
<style>
.icon {
display:block;
position:relative;
width:50px;
height:50px;
border:1px solid red;
overflow:hidden;
} #fb {
position:absolute;
top:0;
left:0;
} #fb :hover {
position:absolute;
top:-50px;
left:0;
}
</style>
</head>
<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>
1: Alt text is necessary for Google SEO, but only because Google likes websites that are designed for different types of browsers and user abilities, eg: text only browsers, disabled javascript, etc. that being said, having alt text for images will compliment your organic search results as a whole.
2: Using keywords in alt text is ok, but only if the alt text is used to accurately describe what the image is about, hence the purpose of alt text. In other words, if the purpose of the alt text is not for keyword density. Tip: if you have quality, relevant and original content you shouldn't even have to worry about keyword density.
3: Page speed is another factor in Google's algorithm. This is because speed favors user experience. CSS sprites help to reduce page speed by reducing http requests. Many major websites, including Google, use them.
That being said, i wish i could offer more info as i am here looking for it as well.
update:
read the post below as it may have more info on this topic
click here for another post relating to this issue
In general you should only be using image sprites for non-tangential images such as icons. Images that relate to the content should stay as img tags.
Having said that, you probably don't need to worry too much about losing a few keywords. Using a title tag is a good idea for accessibility though.
Hiding content, keywords especially on your page just to give Google more keywords to crawl is not a good idea as the other person Karonen suggested. You shouldn't try and trick Google by hiding keywords in your content. If progress is going good keep going. You're improving the load time of your site that's a plus in Google's eyes. More comes into play for your organic rankings than the alt attributes on your img tags. If you're worried about moving down in the rankings, work on getting a few more relevant backlinks that are dofollow
Instead of using alt attributes to provide replacement text for text-only browsers, screen readers, search engines, etc., you can just put ordinary text content inside the element that you're using to show the CSS sprite and hide it with CSS.
One of the simplest ways to do this is with something like this:
.sprite {
display: block;
text-indent: -9999px;
overflow: hidden;
}
Other possible solutions include wrapping the text in a span inside the sprite element, and then using absolute positioning to move it outside the screen area or setting its opacity to 0 or just plain using visibility: hidden.
Do keep in mind that you probably shouldn't overuse any of these techniques: if a significant portion of your content is hidden with CSS, search engines may think you're trying to trick them.
Also remember that you can set title attributes on just about any HTML element, and most browsers will show them as hover tooltips.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.