Having learnt that properly structuring headings is very important to SEO but wishing to be able to style and design pages beyond the limitations of HTML text I’ve often reverted to this old CSS hack to replace heading text with nice image substitutes:

.hide {visibility: hidden; display: block; line-height: 0; font-size: 0.1em; height: 0; margin: 0; padding: 0;}

I’ve been wondering about whether this is still good practice recently and found today that I’m not the only one… thanks to Laura Carlson’s [webdev] Web Design Update newsletter (subscribe already! HERE) I seem to have found a reasonable debate in this post and subsequent comments from Roger Johansson on his site at 456 Berea Street. In short:

  • Avoid using CSS techniques to hide text from your site. Especially avoid hiding text that contains keywords that are important to your site.
  • If you want to provide an accessible format of text that is in an image – use a regular image with alt text in preference to any CSS background image replacing actual text. CSS sprites may be very useful to reduce server requests and page load times but use sprites for pure graphic elements only – not text.

In a moment of clarity I realise that an image is valid within a heading tag… but whether alt text within an image within a heading tag is as strong for SEO as regular text in that same heading tag (whether or not hidden/positioned off-screen) is a question that could do with a clear answer. I suspect that alt text is not as strong: clear guidelines from those Google folks (I do love you) seem to be lacking again. SEO and graphically rich websites are not something that the engines of Google can cope with properly when faced with trying to be a sh*t umbrella (in gmail or the wider web) against the legions of spam pedlars out there who would love to stuff keywords into every corner of a page. In the meantime the life of a web designer remains tough.

Poor me.

Last updated on 5th September 2018