Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Need a sprite technique that won't conflict with Google guidelines

Posted on 2013-05-21
6
Medium Priority
?
220 Views
Last Modified: 2013-09-20
Right now I am doing buttons and some graphics like this:

Put the buttons in a sprite image.

<a class="button" href="mylink.aspx"><span>Button text</span></a>

css:
.button
{
background: url(mybuttonimg) 0px 0px no-repeat;
display: inline-block;
height: 20px;
width: 20px;
}
.button:hover
{
background-position: 0px -30px;
}
.button span
{
position: absolute;
top: -999em;
}

However I found out that positioning the text off the page will hurt our Google rankings.

So, is anyone aware of a good technique that will still let me fetch all the buttons as one image but not violate the Google guidelines? Maybe with Javascript?

And we still want the button text, probably  as an image alt tag
0
Comment
Question by:EndeavorToPersevere
  • 2
  • 2
4 Comments
 
LVL 30

Expert Comment

by:LZ1
ID: 39185747
So is your text for the button inside the image itself? Can you post an image of your button?
0
 
LVL 2

Author Comment

by:EndeavorToPersevere
ID: 39185851
We do this all over the site but for example, here is a download button
download button sprite
The html that uses this button is
<a class="download" href="/Downloads.aspx">
<span>Download</span>
</a>

the css is
.download {
background: url(myfile.png) 0px 0px no-repeat
display: inline block;
height: 30px;
width: 124px;
}
.download:hover
{
background-position: 0px -40px;
}
.download span
{
position: absolute;
top: -999em;
}
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 39187294
In that case I personally wouldn't put the text inside the <a>. I would use alt and title for the a tag and leave the text out entirely.

Although I am aware that Google doesn't necessarily like hidden or severely indented text. However, are all of the words you would be hiding  that important to your SEO campaign?
0
 
LVL 2

Author Comment

by:EndeavorToPersevere
ID: 39204637
The words themselves aren't important. I'm just trying to balance looking good, not getting penalized overall for hiding text and accessibility.

Thanks for the suggestion
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

577 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question