Is it right to use images inside title tags?

Question

I did quite a lot of search query, but I could not get a direct answer.

As for SEO, how bad is it to use images for your headlines? Of course, the reason for this would be to display non-standard fonts. I know that it’s bad to use images instead of headings, but I wonder if this syntax will do anything to make it more convenient for search engines:

<h1><img src="header.jpg" alt="Level 1 Header" /></h1>

Does it have the same effect as this one ?:

<h1>Level 1 Header</h1>

I suspect that the answer is no. I think search engines probably won’t like this because you can put any text in the alt attribute without actually displaying it on the page. So, in this case, what is the best way to use images for headlines without sacrificing SEO?

Answer 1

One old trick is to put the real text in the <h1> field, but then use CSS to make the text invisible and put your image in the background.

So you would do something like:

 h1 { color: transparent; background-image: url(your/cool/image.png); width:400px; height: 300px; } 

Astute Stackoverflow member K Ivanov points out that it would probably be better to make the text invisible by placing it from the page using "text-indent: -5000px" or something like that.

Answer 2

This is a recognized practice (neither good nor bad) to use text-indent:-9999px; next to overflow:hidden; for headlines.

This shifts the text by a massive amount, and then uses overflow to hide it.

This means that you can have a nice description / title in your <header> and have an image with a description / title the way you want it to be displayed, so you get the best of both worlds.

A great example of this is: http://www.sohtanaka.com/web-design-blog/

The "LastWord" section is an image, but if you look at the CSS for this section, you will see that this method is used.

Answer 3

Another possible solution to the problem of custom fonts in headings would be to use the Google Fonts API , assuming the fonts that they are available to suit your needs.

You can also take a look at the stylesheets that they generate and try to create them yourself (provided that you need to).