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!

  • 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 May 15 '15 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 May 15 '15 at 14:45
  • 2
    Use an SVG with an svg text element. Problem solved. googlewebmastercentral.blogspot.co.uk/2010/08/… – Paulie_D May 15 '15 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 May 15 '15 at 16:27
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, privacy policy and cookie policy