2

I have a site that is using the background image feature extensively to replace text with a graphic which contains that text in a stylized form.

For accessibility and SEO purposes I have the actual text included in the HTML, but I do not want it to show for most users.

What is the best approach to go about this? There are recommendations out there to use off-screen placement, but others warn against this being black-hat. Then there is the option to use something like 

@media all {
  .mybox{visibility:visible;}
}
@media not speech {
  .mybox{visibility:hidden;}
}

but I have never seen that used or recommended.

What is the current best practice for this?

My HTML looks like this:

<div class="SFM_TextBox" id="SFM_Block_4_3_B">
  <div class="SFM_Tooltip">Your strategy will be tuned to your business.</div>
</div>

And my CSS looks like this:

#SFM_Block_4_3_B {
  background-image: url(images/strategy.png);
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center; }

The class SFM_Tooltip is the one I want to hide. It is called tooltip because I was playing with that option at first, but it is just visually distracting to have a tooltip with the same text that is in the image already.

Improve this question
7
  • Do you mean you are using the background-image directive found in CSS, or are you putting background images in using another method? – dhaupin May 6 '15 at 17:35
  • I am using CSS background-image. See the update above. – Sebastian Meine May 6 '15 at 17:51
  • Hmm cool, pardon my inexperience with this trigger: I was thinking that you could put #SFM_Block_4_3_B .SFM_Tooltip::after inside of an @media speech then set a content directive containing the text...not too familiar with the speech module for CSS though, would it read from content? Advantage (if it works) is that it would dynamically display based on the @media...no hiding off page required in that case, and the content would totally be non-existent until a screen reader hit it. Another thought, do browsers even support @media speech yet? – dhaupin May 6 '15 at 18:27
  • 2
    Many screen readers completely ignore CSS, so putting content into the CSS file is probably not a good idea. – Sebastian Meine May 6 '15 at 19:17
  • use off-screen placement, but others warn against this being black-hat lies... only when becomes black hat when you have no way of triggering the element into the view point. – Simon Hayter♦ May 6 '15 at 20:23
2

What is the reason for placing text in an image rather than having it loaded in the HTML? You generally want all your text crawled to be used for visitors and crawlers. Look at the clean cache of the page and use the "Fetch as Google" tool in GWT to see what Googlebot sees. Here is how your page currently looks to Googlebot: http://webcache.googleusercontent.com/search?q=cache:http://simplefastmarketing.com/&hl=en&strip=1

Looking at your page, I would highly recommend displaying all text in the HTML of the page rather than the text boxes you have when you hover over the images. If you absolutely need to do it this way, just use the image alt text attribute to load in your text. Image alt text is crawlable and is in place in the event your images break and are unreadable. This is also used as a ranking factor although this would be a 2nd and less ideal option.

Improve this answer
2

What is not visible to users (ever) is not taken into account by Google for ranking. Hidding SFM_Tooltip is not a solution.

One option in your case is to put keywords in your image's filename. Google searches for information in filenames.

Another solution is to display text if someone clicks on the image. This text will be discounted for rankings since it is not immediately visible to users, but it will still count.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.