Welcome to WebmasterWorld Guest from 54.163.40.152

Forum Moderators: incrediBILL

Message Too Old, No Replies

Header that are Graphics

How to handle SEO for images

     

CLTaylor

6:06 pm on Mar 23, 2009 (gmt 0)

5+ Year Member



The header on my index page is embedded in a graphic, so the search engines can't see an H1 tag.

So how do I create an H1 tag with my keywords for the engines to pick up?

Thanks for helping,

Cathy

oluoch28394

7:13 pm on Mar 23, 2009 (gmt 0)

5+ Year Member



try something like this:

<div id="header"><h1>Example Header</h1></div>

then in your css:
#header {
background-image: url('header.jpg');
}

this post might also be helpful:
[webmasterworld.com...]

in addition google keywords meta tag

phranque

11:28 pm on Mar 23, 2009 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



<h1 id="HeaderText"><img src="http://example.com/images/header-text.png" alt="Header Text" width="111" height="22"></h1>

then style your h1 font to look as close as possible to your image.

header images are also discussed in-depth in this WebmasterWorld thread:
accessibility and <h1> header images [webmasterworld.com]

oluoch28394

11:39 pm on Mar 23, 2009 (gmt 0)

5+ Year Member



i tried my best :-)

phranque

11:48 am on Mar 24, 2009 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



actually we answered two different questions.
oluoch28394's solution is good for using a "standard" font to display the header text on a background image.
my solution addresses the use of images containing the header text, which might be necessary if a "special" or proprietary font is preferred.

swa66

2:29 pm on Mar 24, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



To show a third option:

One can also do image replacement using CSS:

h1 {
text-indent: -9999px;
background: url('example.jpg') no-repeat center top;
height: 100px; /*or whatever you need*/
}

in your html it just becomes:

<h1>example</h1>

There are various other ways to do the replacemnt in CSS, just showing one here.
(the text is there it's just way outside of your viewport)

I've used all sort of methods. I like the background only the best as long as the font requirements can be settled, but recently did it as I have above for the simple reason that the owner insisted on a heavy 3d shadow on the font ...

If you use CSS positioning, you can easily combine the method of a graphical background on a banner andreplacing the text on a h1 inside the banner.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month