0

I know it's not ideal, but if there's a 100% bitmap graphic header (with a text title rendered in the bitmap), the old way of making sure that there was a text counterpart to the graphic was to offset the text a few thousand pixels offscreen using CSS.

What's the current best practice for something like this? I know Google penalizes certain practices (like, for example, making text not display using certain techniques). Is there a way to do this in 2015 that's recommended?

Thanks!

Improve this question
4
  • 1
    That's an outdated way of doing things, before custom fonts were available and layering was tedious. So I'm curious why you want to make a 100% bitmap header these days, when you can build it with HTML elements, getting the benefit of responsiveness, usability, and better SEO...
    – Jeff Clarke
    Commented May 15, 2015 at 14:26
  • I suppose there's a way to approximate it with CSS, but the client's looking for something extremely complex with the typography. I'll see if I can get something to pass that's close, but not perfect... yet better in all the ways you mention. Thank you!
    – hudsonian
    Commented May 15, 2015 at 14:45
  • 2
    Use an SVG with an svg text element. Problem solved. googlewebmastercentral.blogspot.co.uk/2010/08/…
    – Paulie_D
    Commented May 15, 2015 at 14:47
  • SVG is the way forward as said by @Paulie_D. Simply use a SVG graphics with a text fallback for older browsers. Google will count both the graphics and the fallback method.
    – Simon Hayter
    Commented May 15, 2015 at 16:27

2 Answers 2

Reset to default
1

the old way of making sure that there was a text counterpart to the graphic was to offset the text a few thousand pixels offscreen using CSS.

That won't work anymore since what is not displayed to users is not taken into account for rankings. You should put keywords in the image filename instead or in the ALT image attribute (I maintain an image SEO summary).

Improve this answer
0

Normally you could pull it off with CSS and Web fonts, but it may get hairy if there are tons of floats.

Curious why you are using a bitmap though...they are huge, and raster. SVG is the way to go since it's vector, more responsive, and significantly more accessible (or SEO friendly). You can even style your SVG with css which allows you to have the best of both worlds for your advanced typography situation.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.