Welcome to WebmasterWorld Guest from 54.144.80.75

Forum Moderators: incrediBILL

Message Too Old, No Replies

Header that are Graphics

How to handle SEO for images

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

New User

5+ Year Member

joined:Oct 14, 2008
posts: 22
votes: 0


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

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

Junior Member

5+ Year Member

joined:Feb 3, 2009
posts:44
votes: 0


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

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

Administrator

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

joined:Aug 10, 2004
posts:10543
votes: 8


<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]

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

Junior Member

5+ Year Member

joined:Feb 3, 2009
posts:44
votes: 0


i tried my best :-)
11:48 am on Mar 24, 2009 (gmt 0)

Administrator

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

joined:Aug 10, 2004
posts:10543
votes: 8


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.
2:29 pm on Mar 24, 2009 (gmt 0)

Senior Member

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

joined:Aug 7, 2003
posts:4783
votes: 0


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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members