CSS / HTML - the right way to combine text and image in the page title

Question

I'm looking for the best way to have a page title that displays an image, but with text visible to search engines, and in case the title image does not load.

Google’s best advice is to have a <div> for the title with <h1> for the text. In CSS, hide <h1> with display:none; and add the image as the background image of the <div> . This may work for search engines, but if the image does not load (or takes time to load), the user does not see anything at the top of the page.

So what I'm really looking for is a way to have the visible text <h1> , and when the image loads, it covers the text and appears in front of it.

Another round on how to do this is to use javascript and hide the text when loading the image. This is a rather inconvenient decision and far from perfect.

What is the best way to do this?

Answer 1

I don’t care that there will be no problem downloading the image (I could be a Utopian here). The most important part is that the text is present in your markup for both search engines and screen readers.

I would keep the markup minimal (always a good idea)

 <h1>Title of your page</h1> 

In CSS

 h1 { text-indent: -10000px; /* Will hide text from users, while still showing for search engines/screen readers */ background: url('../images/logo.png') no-repeat left top; width: 200px; /* your image dimensions */ height: 50px; } 

Answer 2

I tend to approach this problem using a slightly less clean method.

I set the image inside h1 to put the following inscription:

 <div id="header"> <h1>This is the header<img src="img/stackoverflowLogo.png" /></h1> </div> 

Then use CSS to place <h1> relative, and an image with position:absolute . This leads to the fact that the image is removed from the document flow and moves "above" its flow of the parent element. The CSS I use (similar to):

 #header h1 {position: relative; border: 0 none transparent; font-size: 2em; margin: 1em auto; border: 1px solid #ccc; } #header img {position: absolute; top: 0; left: 0; } 

I posted a demo here: http://www.davidrhysthomas.co.uk/so/h1Img.html

The first section shows the first step, positioning the image relative to its parent, an image with a transparent background, to give an idea of ​​what is happening.

In the second and third sections, I used jQuery to assign <h1> sizes equal to the size of the image, to prevent (as in the first version) the text <h1> going beyond the image itself, as follows:

 $(window).load( function() { var w = $('#logo').outerWidth(); var h = $('#logo').outerHeight() ; $('#two h1').css('width',w,'height',h); $('#three h1').css('width',w,'height',h); } ); 

It's a bit of a shred, it obviously relies on javascript being turned on, and the page also flickers a bit when the page loads, as the document runs the script and applies the / css math.

The approach meets your requirements for the text to be displayed before the image itself is loaded, and it uses xhtml and CSS to hide the text. And if the image sizes are known in advance, it does not require jQuery / js to prevent overflow.

(I apologize to Jeff Joel et al for using the SO logo without any permission, but he considered it necessary at that time ... =))

Answer 3

Another option is to use the CSS z-index property to have an inscription on top of the text in the image: the text is still displayed, but hidden behind the image (think about “send back”). This is probably one of the most low-tech solutions :)