WordPress Search Engine Friendly Logo

Optimize your logo using SEO-friendly techniques.

Google’s algorithm likes text more than images. It likes headlines more than paragraphs. You can increase how much weight your headline has by only having one or two of them. Having the same headline across all pages reduces the value of it each time.

Instead of having your logo be an image, or H1 image replacement using CSS, it’s now best practice to use a H1 (heading 1) for your home page and a P (paragraph) for the rest of your pages. Then, you can use the headline for your page’s title instead, and get more bang for your buck.

This is nothing new, but it’s best practice, and I hope those who don’t know this technique or code may find this helpful.

Add to your theme’s header.php file for the logo:

if(is_home() || is_front_page()) { // Is this the home page or front page?
$tag = 'h1'; // If so, use h1
} else {
$tag = 'p';
}
?>
<<?php echo $tag; ?> id="logo">><a href="<?php echo get_option('home'); ?>/" title="Go to the <?php bloginfo('name'); ?> Home Page"><?php bloginfo('name'); ?></a></<?php echo $tag; ?>>

This code will add a text link to your header, and using some CSS you can make it look like a normal image. Depending on how your code is set up, you can use this CSS:

Add to your theme’s stylesheet (style.css):

#logo a {
display: block;
width: 321px; /* Change the width to fit image size */
height: 123px; /* Change the height to fit image size */
text-indent: -9999px; /* Hide the text */
overflow: hidden; /* Keep the link outline sane when clicked */
background: url('images/your-logo-image-name.jpg') left top no-repeat;
}

This code will convert your text link into what looks like an image, but actually is an “image-replacement” CSS technique.

Check out an example of this code on CAREER-Magic.com home page, and the Services page.

Hope this helps! Any questions?