Website Header

[Reliable]

Hello All,

I'm torn between methods for using an image as my website header while still maintaining accessibility and making the site SEO friendly. I initially just used the image as a background image. I also saw how another site used the image as the background image with an actual text h1 tag but used CSS to place the text of screen so all the user sees is the image. Then there is using the image within the h1 tag and using the alt attribute for accessibility and SEO purposes. Any recommendations?

[Kraai]

Hi

This is a sort of tricky question, because there are ways to hide the text behind the image, and it is not sure what way is the best for SEO, without being frowned upon as spamming.

Some will argue that using the alt text method for the image is good enough and the safest way not to get blacklisted by search engines like google, and some will argue that the alt text is not the ultimate SEO method in your header, but only assist screenreaders used by visually impared people.

I would reccomend avoiding any method that have a negative value on the text, like fontsize: -200em or even 0em or similar to hide text.

HERE is a good read how Google sees this.

I think, the best way, is to have normal text behind the image, that can be read by a site visitor if their images, javascript etc is turned of. This can be done via CSS USING THE <SPAN> tag, something more or less like this:

h1 {
position: relative;
width: (Image width here);
height: (Image height here);
}

h1 span {
position: absolute;
display: block;
width: (Image width here);
height: (Image height here);
left: 0;
top: 0;
background-image: url(logo.png);
cursor: pointer;
}

When images are turned off in a browser, text will display in its place.