Optimizing the Header Template Page
Wednesday, October 21st, 2009 by MikeLTSEO starts with the header.php template page. Using the versatile “bloginfo” template tags we can start the search engine optimization of our website right at the beginning. The first page to be seen by the engines is the header.php template, where among others, the all important meta “title” and “description” tags reside.
In a previous post, I created a flexible header by placing the two graphics on different layers using only the CSS style sheet. The purpose of this exercise was to get the header section to degrade gracefully as the screen resolution collapsed from 1280 to 1028.
As you may have noticed, instead of using the standard H1 header text tag, I chose to place a company logo graphic along with a tagline in place of text as the title of the website.
Using a logo image is a great idea for branding, but it also causes some problems SEO wise that are easily taken care of in the header.php template file.
The first thing I wanted was to have the logo image clickable, because by now even Pavlov’s dog knows that clicking the logo will take you back to the home page.
I accomplished this, and the stuff in the rest of this post by looking through the code of some other themes, and discovering the article Designing Headers in the WordPress Codex.
Up to this point, the header page’s main functions were to load the style sheet and be a placeholder for the head by referencing the div id “header”.
<style type=”text/css” media=”screen”>@import url(<?php bloginfo(’stylesheet_url’); ?>);</style>
</head>
<body><a name=”top”></a><!–anchor–>
<div id=”header”>
</div>
To make the logo clickable, I removed it from the header div and gave it an id of its own, “headerimg”, to reference the background information.
#header {
padding: 0em;
width: auto;
height: 160px;
margin: 20px 2% 0em;
}
#headerimg {
background-repeat: no-repeat;
background-position: 4% 10px;
}
The logo image is now called from the header template page and linked to the home page with the PHP Template Tag “bloginfo” (a very handy tag as we will see next!)
<div id=”header”>
<div id=”headerimg”>
<a href=”<?php bloginfo(‘url’); ?>”><img src=”http://northbeachnet.com/images/logo.gif” ></a>
</div>
</div>
The image retains its static position through the css headerimg id.
The thing about substituting an image for the default H1 text behavior is that you loose a lot of important built in WordPress SEO functionality; namely the title and description of the entire website!
This does not have to be. We can still reference the all important H1 title tag, as well as the description in the header template file, we just don’t want it to be seen.
<div id=”header”>
<h1><?php echo get_option(‘home’); ?><?php bloginfo(‘name’); ?></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
<div id=”headerimg”><a href=”<?php bloginfo(‘url’); ?>”><img src=”http://northbeachnet.com/images/logo.gif”></a></div>
</div>
To that end, we have three options in the style sheet:
- H1 and description tags are set to “display: none;”
- They can be marked as “visibility: hidden;”
- Or they can be negatively indented off the page.
Search engines do not like to see text hidden. Although hidden text can be useful to developers, they tend to see it as a “black hat” technique, kinda like using a white font color on a white background. Always thinking we’re trying to scam them!
Not displaying the text is to me pretty much like hiding it, so I chose to have it there, but move it off the page.
#header h1 {
font-size: 0px;
text-indent: -1000px;
}
.description {
font-size: 0px;
text-indent: -1000px;
}
So now, while by no means finished, my header template page has gained a little more functionality.
I have branded the website with an image of the company logo, complete with tagline, and I have hyperlinked the graphic to the homepage for easy navigation.
Secondly, I have maintained the integrity of the Meta title and description tags of the website’s front page using the handy bloginfo template tags. These tags are set the same way they would be in any WordPress theme, right at the top of the General Settings admin page.
One more SEO thing. Since the engines can’t read images, I need to tell them what I did:
<img src=”http://northbeachnet.com/images/logo.gif” alt=”logo image: A WordPress/PHP Developers Blog from North Beach Networks” border=”0″>
Tags: css, header page, meta tags, php, SEO, template page
Leave a Reply
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
