PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Search Engine Optimization tips for Blogger Templates (Part 1)

Posted by on 25th Feb 2008 | 33 comments

Search Engine Optimization tips for Blogger TemplatesThese days, there is much discussion of how blog content can be optimized for search engines in order to receive better rankings. But have you considered how your blog template can be optimized too?

There are many themes available for WordPress users which are intrinsically styled for SEO. Unfortunately for those who use Google Blogger, such resources are few and far between.

Over a short series of three posts, I’ll share some of the tricks I’ve discovered which you could use to optimize your Blogger templates for search engine spiders, and achieve better rankings in search results.

In this part, I’m going to start from the top by explaining how your blog’s URL, title and meta tags can be easily optimized with a little thought and some slight changes to your Blogger template code. I’ll also explain how your blog’s title can be best optimized, even when using an image in place of the title and description text.

URLs, Title and Meta Tags

These are often considered the three most important components of search engine optimization, and can be easily optimized for Blogger powered blogs.

Your Blog’s URL

Whether you are posting on a BlogSpot subdomain (e.g: yourblog.blogspot.com), or have chosen to use the custom domain feature (e.g: www.yourblog.com), the URL of your site should reflect the content of your blog.

Choose your blog’s URL wisely, and if possible ensure this contains a keyword or two which is relevant to your content. If you are writing about cats, for example, a URL such as “thedogsdinner.blogspot.com” will do you no favors with Google, whereas a URL like “thecatswhiskers.blogspot.com” almost certainly would :)

The Title Tag

The <title> tag is a very important feature of any website, and is displayed most in search engine results.

In Blogger templates, a title tag is generated for each page of your blog (including the main, archive and post pages), which differs depending on the actual title of the page.

The title tag is called in your template like this:

<title><data:blog.pageTitle/></title>

Your home page will only feature the actual title of your blog, whereas post pages will feature your blog title, plus the title of your blog post.

When writing titles for your posts, you should bear this in mind to ensure your titles are keyword rich which will help your posts be indexed more easily by search engines. Try to place the most important keywords close to the beginning of the title, as many search engines limit the number of characters which are used in titles, both in their listings and in search results.

If you don’t mind hacking your template a little, you could even choose to display the title of your blog post before the blog title in post pages. This technique would ensure that keywords in your post titles would be indexed much more easily, and can result in far better search rankings for your posts. For this, you should read Widget Based’s post: Changing the Blogger Title Tag for full instructions and the appropriate code to use.

Please note: For some reason, Blogger does not now support the hack I mentioned above. If you have already used this method in your template, this will continue to work for you. However, you will not be able to edit your blog’s template while this is still in place and may well get an error message explaining that a <b:section> is not permitted within the <head> tags. I can only assume that Blogger have somehow changed the way templates are parsed, and will be sure to update this section if I can discover an alternative method.

Meta Description and Keywords Tags

Many SEO experts argue that meta description and keywords tags are being depreciated in search engine results. Google for example, generally ignores the meta description tag and generates it’s own description. However, many search engines do still make use of these tags so it can be useful to include them anyway.

Meta description and keyword tags are not automatically generated for Blogger templates. Since we have full access to the HTML markup of our Blogger templates, we can add these manually below the title tags.

One important consideration you should understand before adding meta description and keyword tags is that search engines look for different descriptions and keywords for each page of your site. If you simply add these to your template in the commonly accepted form, the same content will be distributed across all pages of your site, which search engines may well regard as spam.

So here’s the trick: only use these meta tags for your home (main) page!

This is easily achieved by wrapping your meta description and keywords in conditional tags which will then only appear on your main page.

For example, if I was writing a blog about cute cats, I could include meta description and keyword tags like this:

<title><data:blog.pageTitle/></title>
<b:if cond=’data:blog.pageType == “index”‘>
<meta content=’Cute cats and fluffy kittens for feline friends.’ name=’description’/>
<meta content=’cute, cat, kitten, fluffy, feline’ name=’keywords’/>
</b:if>

The parts highlighted in bold are those tags which prevent the data between them from being generated for the item and archive pages, so you can be sure not to spam search engines with repeated descriptions and keywords for your blog.

The example above could be used as a basis for adding your own meta description and keywords, by simply changing the values to those which are better suited to your blog.

Optimizing your blog’s title heading

Headings offer search engine spiders useful references about your content when indexing your site. You will probably be aware of the hierarchy of heading tags, which ranges from <H1> through to <H6>. Of these, the <H1> tag is considered the most important. In Blogger templates, the H1 tag would usually contain the title of your blog.

Blogger allows us to upload an image to the header section, which can either be used as a background image, or instead of the regular title and description text.

Those who choose to use an image instead of the title and description will not have the H1 heading tag present in their template. So if your blog title uses keywords which would be relevant to search engine results, you would be missing out on an important factor of SEO!

Luckily, this can be easily remedied! Provided you are using an image instead of the title and description in your template, here is how you can solve this dilemma:

  1. Go to the Layout>Edit HTML section of your Blogger dashboard, and ensure you have checked the “Expand widget templates” box.
  2. Look for the styling code for the H1 heading in the <b:skin> portion of your template. This may look something like this, though there are variations across different templates:

    #header h1 {
    margin:5px 20px;
    padding:45px 20px .25em 10px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    }

  3. Within this portion of code, you need to add the following line:

    display: none;

    Here is how this could appear when added to the style declaration above:

    #header h1 {
    margin:5px 20px;
    padding:45px 20px .25em 10px;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font: $pagetitlefont;
    display: none;
    }

  4. Next, you will need to add the <h1> heading tags within the header widget. For this, you will need to locate the following section of code:

    <b:if cond=’data:useImage’>
    <b:if cond=’data:imagePlacement == “REPLACE”‘>
    <!–Show just the image, no text–>
    <div id=’header-inner’>
    <h1>Your Blog Title</h1><a expr:href=’data:blog.homepageUrl’ style=’display: block’>
    <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + “_headerimg”‘ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’/>
    </a>
    </div>
    <b:else/>

    You’ll notice that I’ve added the H1 heading (highlighted in bold) where it should appear in the template code. As we have set the style of the H1 heading to “display: none;”, this ensures that the H1 heading is present in the HTML markup of your blog pages, but that the title itself is not visible to the casual viewer.

This technique ensures that your blog’s title will still be indexed as effectively as if you had used the image as a background instead. Furthermore, by adding this H1 heading manually, you could even expand on your title slightly with a short description which contains keywords relevant to your blog content.

Note: if you use an image as the background to the title and description, or do not use an image in your header at all, you don’t need to worry about this issue, as the H1 heading will already be present in the mark-up of your pages!

Allow search engines to find your blog!

Finally (and most importantly!) you should ensure that search engines are able to crawl and index your blog.

The easiest way to check this is to look in the settings of the Settings>Basic section of your Blogger dashboard. Close to the bottom of the page is an option to “Let search engines find your blog”. You must set this to “Yes” if you want your site to be crawled and indexed by search engines.

If you have mistakenly set this to “No”, Blogger will add a “NOINDEX,NOFOLLOW” meta tag to your blog mark-up, like this:

<meta content=’NOINDEX,NOFOLLOW’ name=’robots’/>

Such a tag will prevent search engine spiders from ever indexing your site.

This may seem obvious to most of you, though you’d be surprised how many people have not checked this setting!

Further resources

Here are some useful sites you may like to refer to for further information about the tips suggested in this post:

In the next installment of this mini-series, I’ll explain how all of the links in your Blogger template (including those contained in widgets) can be optimized for search engines and better rankings.


Amanda is a freelance blogger and web/blog designer. She writes about Blogger at www.BloggerBuster.com and maintains several other blogs on various subjects.

33 comments - Leave a reply
  • Posted by TonNet on 25th Feb 2008

    I'm looking forward for the second part. Thanks for your advice, I've implemented in our blog, just take a look at it.

  • Posted by Lola on 26th Feb 2008

    Hi! this is good! :mrgreen:

    But… how will changing Blogger's title tag affect my already indexed posts (and some of them well-ranked?

    Will I experience some visit shortage for some days till everything gets reindexed or something like that?

    Please bear my english, hope you can answer :) :mrgreen:

  • Posted by Helen on 4th Mar 2008

    Fantastic article. Keep up the good work! :smile:

  • Posted by neura on 5th Mar 2008

    nice tips… I apply it to my bog and I think it works well. spider crawl my blog rapidly..

    thanks…

  • Posted by hasnol on 22nd Mar 2008

    Your work just great Amanda. Thanks so much. It is just so great that i will return back just waiting and learn the best seo practice from you. All the best Amanda. :razz:

  • Posted by vppsgroup on 27th Mar 2008

    Nice tips :smile: Keep it up…

  • Posted by edi on 28th Mar 2008

    thanks for this article, i like this, your very smart,and very nice blog, thanks

  • Posted by Nick Harper on 30th Mar 2008

    This is a really helpful article. I have just built an SEO wordpress blog which is at Free SEO Articles and I used an image for the header to make it look a bit prettier and I was wondering how this would affect the SEO value.

    First thing tommorow I will be adding some h1 tags back in

  • Posted by Christina on 1st Apr 2008

    In searching for a solution to an error while trying to add meta tags to my blog, I saw this post. On behalf of those of us whose knowledge of html is little to none, thank you for writing it all out and explaining what it means. I had no idea about the graphic in the title issue . . . I really appreciate this. Thanks again.

  • Posted by blake on 2nd Apr 2008

    Thanks for the information I used the Meta description and keyword write up in my blog. I am not sure I completely understand how to use it, but what I did was add it near the top of my html in my template. Am I supposed to include it for every post though? I am still learning how to use html so I appreciate the help and any in the future.

  • Posted by SuperJason on 8th Apr 2008

    Thank you very much! I had originally added a meta description and keywords, but they were the same for every page. Needless to say, it looked pretty bad in the search engine results. I added the conditional include as you suggested. Thanks again!

    –SuperJason (my tech blog)

  • Posted by Mansi on 10th Apr 2008

    HI Amanda,

    I tried incorporating your conditional keywords hack and also adding h1 tags for header images, but none of them seem to work; when I made the changes in blogger (rounders template) and selected preview, blogger gave an error message (not an HTML error), I was not able to save the template too. As soon as I removed those changes, it worked fine. Do you think Blogger has made changes after you wrote this post??

    has anyone tried any of these tips recently(April 2008)??

    Any help would be appreciated!

  • Posted by cath on 1st May 2008

    Hiya, just a heads up in case anyone has the same trouble.

    I tried your tip for the meta tags, by copypaste, and got this error.

    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.

    XML error message: Open quote is expected for attribute "{1}" associated with an element type "cond".

    It was easy to fix:

    all the quote characters copies & pasted as special non-standard characters. The tipoff was that they looked italic, even the " character. Replacing them by simply re-typing from the keyboard solved the problem.

    Example – look closely at the quote marks here:

    if cond=’data:blog.pageType == “index”‘

    I'm using firefox on a mac, but I think that this may apply to other systems too.

  • Posted by 987 on 14th May 2008

    lola

  • Posted by Bollywood Star on 2nd Jun 2008

    This is my favorite website because there are greates posts.

    Thanks to all

  • Posted by Big B on 5th Jun 2008

    We were unable to preview your template

    Please correct the error below, and submit your template again.

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

    XML error message: The markup in the document following the root element must be well-formed.

    Amanda – i have worked for 90 minutes trying to proofread and figure out what I've done wrong, but Blogger keeps giving me the above error message. I retyped, as one of the above commenters suggested. Any else I can try???? Thank you.

  • Posted by Chuck Marunde on 21st Jun 2008

    Amanda, I've tried several html hacks suggested on various blogs to get my post titles to be searched in the search engines, but I am really frustrated, because after 3 or 4 different implementations, they don't seem to work. My blog is at: http://sequim-port-angeles.blogspot.com/ and I don't know what to do? Can you help?

  • Posted by Nicolebobbin on 9th Jul 2008

    THanks, I make 2$ daily with this blog : http://www.4xsystem.blogspot.com
    almost doing nothing

  • Posted by dannyiblog on 10th Jul 2008

    or just put directly into this

    because blogger would convert the link like the above

    nice tipss :eek:

  • Posted by Susan on 30th Sep 2008

    Bless you!! I've been trying to figure out what I did wrong with setting my title and meta tags for my commercial blog because webmaster tools keeps telling me I have duplicates. This should fix that! Feeling brave enough to try it on others now. Thank you!!!

  • Posted by NFL on 21st Oct 2008

    Thanks for the list, I really appreciate it. Hope it will help my blog. Bookmarked it as well. :razz:

  • Posted by Jen on 30th Oct 2008

    Thanks for tips that actually work with the newer blogger templates!

  • Posted by justin on 24th Nov 2008

    great advice! i have one question regarding the part of using meta tags for your home (main) page! for some reason, when i edit my template as you directed, it comes back as invalid XML when trying to place the conditional around m metadata…is it possible that you could take a look at my template and see if its just something that I am doing wrong?

    also, the part about H1 and images, could you let me know if that is optimized correctly on my template? i'd really appreciate it and would willingly link you back letting my readers know about your blog..which i read often

    thanks

  • Posted by casual encounter clu on 16th Dec 2008

    It helped in adding the h1 headers to my blogs

    Thanks you so much

  • Posted by Maisam on 2nd Oct 2010

    Any of these tricks never worked for me :( Though, I tried many of them, but I dont know why any SEO tricks never run on my website at http://www.knowbuzz.com

    If anyone's a really professional here, can he quickly guide me some simple codings :)
    My recent post Investing In Stock Market For Beginners

  • Posted by Eye Bridge on 16th Nov 2010

    Thank you very much for sharing knowledgeable article. Keep posting.

  • Posted by seo pakistan on 3rd Dec 2010

    Nice step by step materials on how set your own blog, take your blog to the next level and become an affiliate marketer. Love your stuff very much.

  • Posted by Technically Speaking on 4th Dec 2010

    When you copy the code and paste it, there is a small code issue. So try quotes in code like this.
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    My recent post Solved Computer restarts on inserting USB pen drive

  • Posted by Kai on 8th Dec 2010

    Help I do not see the second peice of code in my template
    My recent post Incredible things will unfold in 2011-Just dont QUIT!

  • Posted by SEO Company on 18th Dec 2010

    great post with many relevant SEO resources! Thank You! I'll be linking to this post and sharing with others!

  • Posted by Ednan Orallo on 5th Mar 2011

    I have the same problem with Christine. Is there any cure for this? Thanks
    My recent post Poverty and You

  • Posted by Gold Coast Plumber on 19th May 2011

    Thank you very much, I have applied the techniques to my blog and have reaped great rewards. Thanks!

  • Posted by Ikis Seguarbo on 18th Jun 2011

    Applying these… I hope they work for me. Thanks! More power!