This tutorial will show you how to use Meta Description to search-engine optimize (SEO) your website, and more specifically your WordPress theme. It will provide you with a recommended method for SEO, and a component-wise explanation of why this procedure works so well. Part 1 in a How-To WordPress series.

First, why are meta descriptions so important?

Visitors to your website will spend only 2-3 seconds on it before deciding whether to “bounce away” or stay and explore. They spend even less time in search results trying to decide which websites to go to. It is the brief two-line or so description that appears beneath your title in the search results that will tell them whether or not your site is worth investigating. If this description is boring, uninformative, or completely wrong for your webpage (yes, it happens!), you will lose a lot of custom to your site.

For example, here are the top three results for my website in Google’s search results. As you can see, their meta descriptions are all different:

Ok, so I need meta descriptions. Where should I put them?

It is good practice to put a unique meta-description on each webpage/post you make. It doesn’t take a lot of time to do, but it will provide readers with a clearer understanding of that page’s contents, and will serve to distinguish your results in a search engine. You don’t want someone to look up your website or your blog, and have all the pages (e.g. About, Blog, Games) toss back the same description.

For the most part, it is sufficient to place the code for a meta description at the bottom of the HTML for your page/post. In WordPress, this is the box that appears for you to type in whenever you create a new page or post. At the upper-right corner of this box, there are two tabs: “Visual”, and “HTML”. “Visual” is how your post looks if you were making it in M.S. Word. “HTML” is the code behind this look.

Just paste the following code (modified for your page) at the bottom of your HTML:

<meta name="description" content="PUT YOUR DESCRIPTION HERE"/>

Name tells HTML that this particular meta tag is a meta description (there are different types of meta data — title, author, date, etc. Only “description” and “title” are truly important. Meta, by the way, just means “extra” — you are providing the search engines “extra” data about your site). Content tells HTML that this is your desired description.

Note: The term meta must touch the first angle bracket or else the description will be visible on your page. Correct format is like this: <meta ... />, not like this: < meta ... />

What if my description uses apostrophes or quotes?

Suppose your description requires apostrophes or quotes — for instance the description for my webpage is: The official website for R.M. ArceJaeger, author of “A Stepmother’s Story — The TRUE Tale of Cinderella” and the blog Pens & PCs.

If I were to just insert this description in the meta tag shown above, it would look like this:

<meta name="description" content="The official website for R.M. ArceJaeger, author of "A Stepmother's Story --- The TRUE Tale of Cinderella" and the blog Pens & PCs."/>

However, because HTML considers the description to start with the first ” and to end when it come to the next “, the description that I would actually get back would look like this: The official website for R.M. ArceJaeger, author of

Not what I want at all! The trick is to use either double-quotes (“) to start and end your description and single quotes (‘) inside it, or vice-versa. For instance:

<meta name="description" content="The official website for R.M. ArceJaeger, author of 'A Stepmother's Story --- The TRUE Tale of Cinderella' and the blog Pens & PCs."/>

My personal preference is to use double-quotes on the outside and single-quotes on the inside because then you can’t have a stray apostrophe accidentally mess-up your code, but it’s up to you.

Why is WordPress Different?

Putting meta descriptions in your HTML will work for most sites, as I said before. It will also work for WordPress — with one very important exception. Although your individual pages and posts will have meta descriptions associated with them, the main dot-com website (e.g. rmarcejaeger.com) will not. I discovered this flaw when I was checking my site at this website grader: http://websitegrader.com/. It showed me that although my pages had meta descriptions, my overall site did not.

The fix is to use custom fields and to place the following code (modified for your website) in your header.php file, at the end of the <head> block:

<?php
if ( is_singular() )  // PAGES AND POSTS
{
    if ($seodescription = get_post_meta($post->ID, "my_description", true))
    { 
        ?>
        <meta name="description" content="<?php echo $seodescription; ?>" />
        <?php
    } 
    else
    { 
        ?>
        <meta name="description" content= "<?php echo get_bloginfo( 'description' ); ?>" />  <!-- SITE TAGLINE -->
        <?php
    } 
}
elseif ( is_home() )    // YOUR BLOG
{                
    ?>
    <meta name="description" content= "Pens & PCs is blog featuring well-informed articles about
            writing and computers, among other topics."; />
    <?php
}
elseif ( is_category() )	// ARCHIVE OF POSTS
{
    if ( is_category("Other") )
    {
        ?>
        <meta name="description" content= "Pens & PCs blog posts about a variety of topics."; />
        <?php
    }
    elseif ( is_category("Writing") )
    {
        ?>
        <meta name="description" content= "Articles about writing from the blog Pens & PCs."; />
        <?php
    }
    elseif ( is_category("Computers") )
    {
        ?>
        <meta name="description" content= "Articles about computers from the blog Pens & PCs."; />
        <?php
    }
}
else	// YOUR ACTUAL WEBSITE, AND THE DEFAULT DESCRIPTION FOR ANYTHING NOT COVERED HERE
{
    ?>
    <meta name="description" content= "<?php echo get_bloginfo( 'description' ); ?>" />  <!-- SITE TAGLINE -->
    <?php
}
?>

What is this code doing?

This code is doing several things. First, it is making use of the custom field my_description in order to provide unique descriptions for each page and post. Secondly, it is providing hard-coded descriptions for your blog page and your category pages, which are not considered to be “singular” pages and posts. Replace my descriptions with yours. Thirdly, it provides a default description (using your site’s tagline) for use on your overall webpage and in any other scenarios not covered here.

Note that you CANNOT simply put a single “default” meta-description tag here and expect the meta-description tags you placed in the HTML of your pages to work. The meta-description you place in <head> will overwrite them all. That is why I have all the if-statements in the above code — to keep my meta-descriptions from being overwritten.

What else do I have to do?

In addition to placing this code in your header.php file, you must do the following to make this code work:

You must create a custom field called “my_description”. The custom field box is located on the bottom of your “typing box” in your individual pages/posts. The first time, click “Enter new”, type in a name (“my_description”, without quotes), and your value (this is your meta description for the page — just write the description, without any of the code). Then click “Add custom field”. From here on, this custom field will appear in all your post/pages, and you just need to provide a “value” (description) for it and click “Update”. If you do not see a custom field box, then in your individual post/pages, select “Screen Options” (upper-right corner of page), and make sure “Custom Fields” is checked. It will now appear below your text box. Follow aforementioned instructions.

Lastly, make sure your blog (website) has a tagline. You can set this in Settings->General Settings.

That’s it!

Congratulations! Follow these instructions, and your website description will be set for search-engine optimization. Note that it can take a few days before the search engines display your description (until the next time they crawl your page — I think it took about a week for me).