SEO for Using an Image as your Blog Name

seo-web-design-01On site SEO and web design go hand in hand especially in the world of internet marketing. You can have a great site design that intices the viewer towards the desired objective be it clicking on an ad or subscribing to your feed or buying your latest greatest ebook however, if your not getting traffic then even the most compeling design is useless.

I’ve been dealing with web design for years and while my SEO experience is not as extensive I do know that there is the mentality that the on-site SEO is simple and easy to impliment while the off-site SEO and promotion is the big job. This doesn’t mean there aren’t a few on-site tricks we can use to make sure our sites are as optimized as possible.

Over the holidays I got an offer out of the blue to code out a WordPress theme for Carl Ocab – The Kid blogger. He is the teenager who is and has been at the top of the SERPs for the term make money online. He seems to volley back and forth with Griz and a couple others. This kid knows his stuff. There were some tough requests for this theme which had me flipping through the WordPress help. Carl’s theme turned out great (despite the usual IE6 sneak attack) and I definitely got a few ideas I’d like to pass on.

One thing about WordPress is that despite it’s wonderful way of naturaly optimizing your pages by using page titles in the title header this construct remains consistant througout the site which in some cases is not desireable. Even when using the all-in-one SEO pack plugin and are able to choose what goes into the page title and what order the elements are in you still don’t have much control over the H1 and H2 tags.

Carl’s new blog used an image at the top with a logo, no HTML text. Still he wanted the title as an H1 tag regardless for SEO purposes so I needed to have a spot for it but hide it. Using the CSS display:none renders it invisible to search engines so instead I gave it absolute positioning and put it 9999 pixels to the left, quite out of site.

Some would say oOOo that’s black hat and G won’t like it but its the blog title, its not some string of unrelated keywords and the search engine algorithyms will know this.

The next request was a little more daunting. Carl wanted the title of the blog to be H1 on the home page but on the inner pages he wanted it to be an H2. This way he could have the post title bve the H1 and be the dominant page keyword. My first thought was to have two seperate header.php files but that seemed silly since PHP can do most anything so with only a little effort I dug into the WordPress codex and was reminded that the different page types can be referenced very easily.

My solution was to set up a very little if statement for the header tag, the one that’s 9999 pixels to the left. It says, if the current page is the home page put the Blog Name in an H1 else put the Blog Name in an H2. Then you just make sure the post titles are in an H1 on single pages and H2 on the home and archive pages. Simple as that.

Heres the code for the blog title in the header…

‹?php if ( is_home() ) {
echo '‹h1›' ?›‹?php bloginfo('name'); ?›‹?php echo '‹/h1›' ?›
‹?php } else {
echo '‹h2›' ?›‹?php bloginfo('name'); ?›‹?php echo '‹/h2›' ?›
‹?php }	?›
#header h1 { position:absolute; top:0; left:-9999px; }
#header h2 { position:absolute; top:0; left:-9999px; }

I think this is a smart idea and a good way to gain more control over not only the SEO of the page titles but also the ad sense ads that the page text triggers. This also accomodates the most complex designs, even those that use images for the blog name.

10 Replies to “SEO for Using an Image as your Blog Name”

  1. I must admit I’m looking to learn seo in all areas, but especially on site. I dabble with web design all the time and have friends helping me along the way, thanks for the info.

  2. My pleasure Mark, just took a ride on “the bus” and it looks like you’ve got a pretty good SEO vehicle yourself!

  3. I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future. Feel free to check out my blog on the 36 Best WordPress plugins for 2009.

  4. Hey Mark, I love your post. and it makes total sense to me. However. I do think that your choice to push the Text off the page may cause you some issue. I prefer to use a z-index strategy. Ensuring my text fits behind the image I hiding it with. And then just layer the HTML with z-index.

    This works really great for clients who insist on fancy fonts that aren’t web compatable.

    And when your done you can still make a mobile stylsheet and your site will be mobile friendly as well.

  5. Paul, Excellent tip!
    It does requires bit more markup but as you said, it takes care of several issues.

    CSS:
    h1 { position: relative; overflow: hidden; }
    h1 span { position: absolute; width: 100%; height: 100%; background: url(image.gif) no-repeat; }

    HTML:
    <h1><span></span>Title</h1>

  6. Hi Paul,

    im gettin crazy with this “hidding text” thing…

    In i have this line

    and then in

    < id="logo">
    <a href="/">

    </>

    and in css I have this

    #logo {
    height:57px;
    width:627px;
    background:url(images/logo.png) no-repeat;
    display:inline;
    float:left;
    margin:28px 0 20px 6px;
    }
    #logo br {
    display:none;
    }
    #logo a,
    #logo a:visited {
    display:block;
    font:bold 33px/40px arial;
    color:#313437;
    margin:-7px 0 0 55px;
    }
    #logo em {
    display:block;
    clear:both;
    font:bold 15px/20px arial;
    color:#035f26;
    margin:-5px 0 0 56px;
    }

    I have tried dozens of formula of inserting a “image.png” with transparent background but it always finish unaligned. Please, could you give a try???

    Thanks!

  7. OK, I dont manage to publish the code here… As it is moderated, could you please send me an email??
    Thanks a lot in advance!!

  8. Antonio,

    Norm here, I believe you are over thinking it.

    Your markup seems a little off but that’s probably because WordPress is parsing it as HTML so some of it isn’t showing.

    So just to be clear, the id has to be within a tag such as H1 or div so it would look more like the following…

    <div id=”logo”> </div> or <h1 id=”logo”> </h1>

    Then you need to put your text in there, the text you want hidden…

    <div id=”logo”> TEXT </div>

    Next, insert a <span></span> inside the div… The span is where you’ll place the image…

    <div id=”logo”><span></span> TEXT </div>

    Now in your styles do whatever you need to do with the “logo” div, float or whatever.

    REMEMBER to put in the relative positioning. Very important.

    Next, put logo.png in the span, position:absolute. Absolute positioning is always relative to the nearest container that is also positioned, therefore it is positioned absolutely relative to the div which is positioned relative… did that make sense??? see below

    #logo {
    position: relative;
    height:57px;
    width:627px;
    display:inline;
    float:left;
    margin:28px 0 20px 6px;
    }

    #logo span {
    position: absolute; width: 100%; height: 100%;
    background:url(images/logo.png) no-repeat;
    }

    This works, I just tested it.

  9. That’s great !

    Now, you gave us the code to get the website title to vary from H1 to H2,
    now, how do we get the post title to be the H1 in the inner pages ?

    Thanks !

  10. You will have to inspect the other template files such as single.php, archive.php etc…
    Look for the post title… <a href=”<?php echo get_option(‘home’) ?>/” title=”<?php the_title(); ?>”><?php the_title(); ?>

    Depending on the theme you are using, it may already be in an H1. If not, make it so. Tweak styles till satisfied.

Leave a Reply

Your email address will not be published. Required fields are marked *