Create Beautiful And SEO-Friendly Header In Profits Theme

In my last post, I talked about extending Profits Theme by creating a child theme. This post is a continuation where I will explain what I did to Affiliate Marketing Insights’ header to make it looks (rather) good by using a graphic instead of text while being SEO-friendly at the same time.

By default when you first activate Profits Theme, your site’s header uses Profits Theme’s logo which is linked to your site’s main or index page. On the admin panel, Profits Theme -> Design Options -> Header, you can choose if you want to use your own logo image or use the site title and tagline as defined in Dashboard -> Settings -> General.

The advantage of using logo image is that you can create and style nice logo using any graphic editor, and use fancy fonts and colors. I’m using ‘Wider 1.0’ skin in black and created a logo using letterpress effect in Photoshop. Here is what it looked like when I set Profits Theme to use custom header logo:

However, from on-site SEO’s point of view this is what the search engine will see:

<div id="header-image">
  <div id="logo">
    <h1>
      <a href="http://AffiliateMarketingInsights.com">
        <img src="http://AffiliateMarketingInsights.com/wp-content/uploads/logo.png" border="0">
      </a>
    </h1>
  </div>
</div>

So the header uses H1 tag to display the site title, which is good, but there is no text in between the H1 tag. It’s true that most if not all search engines now have no problem parsing and deciding what your page is about even without the site title but if you want to make all the little things matter, there is a workaround to this.

To make the site title appear between the H1 tags, I checked the box that said ‘Check this box to use Text Site Title instead of an Image Logo’. So now the HTML looks good from search engine’s point of view but the header turns into plain boring text.

<div id="header-image">
  <div id="logo">
    <h1>
      <a href="http://AffiliateMarketingInsights.com">Affiliate Marketing Insights</a>
    </h1>
    <div class="description"></div>
  </div>
</div>

So how can I have both a nice logo image but at the same time making search engines happy?

One option is to create letterpress effect purely using CSS text-shadow but it doesn’t always render nicely across all browsers. Another option is to move the logo image to the background and visually hide the text.

Where does the child theme come into the picture? A child theme has its own stylesheet file. Therefore, I can make any customization I want without touching Profits Theme‘s default stylesheet. In the future when the theme is upgraded, all my customization will stay intact. No more remembering and keeping track where I made the customizations to make sure they don’t get overridden or they are copied to the new version.

If you take a look again at the HTML code above, the H1 tags are wrapped in DIV elements. So I moved the logo image to be the background image of the ‘header-image’ DIV element.

#header-image {
background: url(/wp-content/uploads/logo.png) no-repeat top left;
}

Now the header looks like this:

To visually hide the title text, at first I used a large text-indent property for the H1 element (e.g. -9999) to shift the title far left, out of the visible browser window. However, while the text is now hidden, so is the link and I could not click the logo to go to the main or index page.

So what I finally did was to keep the site title there, adjust the font size so it more or less matches the size of the logo image on the background, and then set the color to be transparent.

#header #logo h1 a, #header #logo h1 a:hover {
color: transparent !important;
}

This way, hovering my mouse over the logo enables me to click on the now-invisible link as if the logo itself is a link. This may sound confusing but try to do Ctrl-A to highlight all texts on this page and you should see what I mean:

The title text is still there, but it’s now invisible. This method allows me to have both logo image while keeping the site title nicely wrapped in H1 tag to please the search engines.

I hope this post is useful. I’d be very interested to hear ┬áif you are doing something similar with Profits Theme but using a different way to achieve it.

Leave A Comment...

*