A simple SEO Logo trick for newbies

Status
Not open for further replies.
Stanley

Stanley

Banned
Jun 24, 2006
3,399
43
0
San Diego
I'm sure most of you already know this but for those that don't...

There's a very simple CSS trick for adding a logo to your website, and simultaneously utilizing the seo-weight of an H1 tag:

Code: <h1 id="logo">A few Words of Text</h1>

CSS Code:
#logo{
width: 100px;
height: 100px;
background-image: url("/images/location-of-your-logo.gif");
text-indent: -10000px;
}


That's all there is. Google will see the header text, but your users will see your logo.
 


Hmmm, I design my head article text to be h1 for inner pages. This wouldn't work. Guess I'd have to make them H2.

I've been doing this shit for years and didn't know this one, lol.
 
If you google for "CSS Image Replacement" you'll find a lot of different techniques for this.

You can also toss links inside of your <h1>'s (this is especially good for a logo).
Code: 
HTML:
<h1><a href="http://www.example.org/" title="Some Title Text"><span>Company Name + Keyword</span></a></h1>

CSS:

h1 a span{
display:none;
/* Or */
text-indent: -1000em;
/* Or */
margin-left: -1000em;

Set the <a> to display:block, give it the correct width and height and you've got yourself a giant clickable logo image all wrapped up in h1 goodness.
 
this is cool, i've been wondering how to make a graphical header clickable, which i assume this does. I was using a javascript onlick to make the id block clickable. which seemed overly complicated.

any sense of whether G looks out for -10000 em placements and gets suspicious/irate/or whatever about them? or is this just considered a legit design technique.
 
spazdr8cr said:
this is cool, i've been wondering how to make a graphical header clickable, which i assume this does. I was using a javascript onlick to make the id block clickable. which seemed overly complicated.

any sense of whether G looks out for -10000 em placements and gets suspicious/irate/or whatever about them? or is this just considered a legit design technique.
Click to expand...

Image replacement techniques have been around for a long time and I don't think google is going to dig into your CSS and try to penalize you for it. Obviously if you're stuffing a bunch of keywords into an <h1> and hiding that text and replacing it with an image you might have problems.
 
Last I heard Google had some sort of allergy to text-indent: -10000px; Remember the wordpress.org fiasco?
 
I'm using the same principle on my mfa-sites, but other csscode.

html:
Code: 
<div id="header">
    <h2><a href="[URL]http://mydomain.com[/URL]" title="blabla">Real Estate</a></h2>     
 </div>
css:
Code: 
#header h2 {margin:0; padding:0;}
#header h2 a {
    display: block;
    width: 680px;
    padding: 150px 0 0 0;
    background: url(images/header.jpg) top right no-repeat;
    overflow: hidden;
    font-size: 1px;
    line-height: 1px;
    height: 0px !important;
    height /**/:150px;
}
 
The trouble with using the same code/text within the heading tag on every page is that you will cannabalize your keywords - that is, targeting multiple pages with one set of keywords, making it difficult for search engines to determine which page within your site is most relevant for your primary keywords.

One way to resolve this is to place page relevant text in the heading tag you are using for the image replacement.
 
i guess you could consider this a mild form of black hat?

very good trick. thanks.
 
jamiejelly said:
The trouble with using the same code/text within the heading tag on every page is that you will cannabalize your keywords - that is, targeting multiple pages with one set of keywords, making it difficult for search engines to determine which page within your site is most relevant for your primary keywords.

One way to resolve this is to place page relevant text in the heading tag you are using for the image replacement.
Click to expand...

For that reason i'm using the <h2> for the title of my website (and sometimes <h3> for a short description. <h1> contains my posttitle or pagetitle.

@krazyjosh.. it's not. You make websites for people, not for SE's. The header is part of the layout and when people are watching it without css, the image is still visible when not using an image replacement technique. When you use this techniques, content and style will be separated - so it's more user-friendly. The fact that SE's will spider the text is a lucky coincidence. ;)

Of course you can have an headerimage from a blue sky and stuffing keywords in your headings, but then it's not legitimate anymore.

You shouldn't get in trouble when the headerimage contains the title and the title is also in your heading.
 
Last edited:
Heres another way to do it.

<h1>YOUR TEXT</h1>

CSS:

#divheader h1 { display: none; }
Works for h1 tags, but doesn't replace them with an image though. BUT, it gets around any google/msn/yahoo tricks where they don't like the indent css.
 
Airkat said:
Heres another way to do it.

<h1>YOUR TEXT</h1>

CSS:

#divheader h1 { display: none; }
Works for h1 tags, but doesn't replace them with an image though. BUT, it gets around any google/msn/yahoo tricks where they don't like the indent css.
Click to expand...

But at this point you're just hiding the text which is pretty lame and not very useful to anyone using your site.
 
Airkat, there is a difference between display:none and an image replacement technique. display:none; is not rendered anymore by google, and google also knows that you're hiding the text. You can exclude your stylesheet in your robots.txt but some time google will find out.

I agree with maxor..
 
Here's another tip, if you are using wordpress for your sites, make sure you use a plugin or something to make sure you get meta tags for your posts.

Good news is if you forget, the supplemental results will remind you.
 
Jdog, what is the link between supp. results and metatags? I know metatags do have a little influence in yahoo and live , but what it has to do with google/supplemental results?
 
jchunk said:
Jdog, what is the link between supp. results and metatags? I know metatags do have a little influence in yahoo and live , but what it has to do with google/supplemental results?
Click to expand...

When you don't have a meta description googles spider just starts with what is at the top of the page for your description in the search results. And in my case the navigation is the first thing that the spider sees, so I have a couple hundred pages that all have my navigation as their description in google.

Last year I had a myspace site from one of those scripts that everyone and their mom has, it got indexed but went all supplemental, so I went through and wrote good unique meta descriptions and started ranking decent for someone that didn't know dick about seo.

This is my experience with google, don't know about the other engines.
 
Status
Not open for further replies.
Top Bottom
Back