: SEO: images and describing text 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
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.
More posts by @Murray155
2 Comments
Sorted by latest first Latest Oldest Best
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.
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: 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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.