homepage Welcome to WebmasterWorld Guest from 54.226.43.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Header that are Graphics
How to handle SEO for images
CLTaylor




msg:3877077
 6:06 pm on Mar 23, 2009 (gmt 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

 

oluoch28394




msg:3877120
 7:13 pm on Mar 23, 2009 (gmt 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

phranque




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

<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




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

i tried my best :-)

phranque




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

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




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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved