Skip to the content
Zack Katz's Blog
Kinda technical WordPress stuff, mostly.
  • Home
  • Display Gravity Forms Data
  • Home
  • Display Gravity Forms Data
Categories
SEO

WordPress Search Engine Friendly Logo

  • Post author By Zack Katz
  • Post date March 5, 2009
  • 1 Comment on WordPress Search Engine Friendly Logo

The message is conveyed through the see-through glass...kinda like SEO-friendly image replacement techniques!

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?

Share this:

  • Facebook
  • Reddit
  • Tags CSS, H1, Logo, SEO, WordPress header, WordPress SEO

By Zack Katz

Zack Katz is the creator of GravityView and the President of Katz Web Services. He lives in Denver with his wife and cute beast of a cat.

View Archive →

← An Inside Look: 4 Step SEO for a Denver Solar Company → Buying Domains at Auction

1 reply on “WordPress Search Engine Friendly Logo”

Gizmosyncsays:
March 15, 2009 at 8:24 am

Thanks for this kick-ass tips zack 😀 I think I need to apply this in my blogs. 🙂


Comments are closed.

Top Posts & Pages

  • Gravity Forms Ajax Submit - Version 1.4 Adds Ajax Support
  • Contact Form 7 Modules - A Plugin
  • Yourls Google Analytics Link Tagging
  • Disable Styles and Javascript in Safari with Keyboard Shortcuts - How To
  • Contact Form 7 Modules
  • Gravity Forms Directory & Addons
  • Rich Text Tag, Category, and Taxonomy Descriptions for WordPress

Gravity Forms is the single best plugin you can get for WordPress.

Gravity Forms Contact Form Plugin for WordPress

© 2021 Zack Katz's Blog

Powered by WordPress

To the top ↑ Up ↑