Blogger Page and Post Titles Style for Better SEO

Definitely content is the king, but how we present the content to the people and also the search bots is an important aspect. In this post we will talk about how to display page titles of your blog in order to get highest visibility on search engines like Google.

SEO short of Search Engine Optimization is a broad topic on how to maintain and create a website / blog that performs well enough with search engine bots so it comes up on user queries at the best ranking possible. 

That doesn't mean SEO is a very complicated topic, yet applying it might be somewhat require a learning curve since editing code and adding functionalities to websites require one to be familiar with codes. 

What's with the page title of Blogger Blogs?

Skip to the next section to learn how to optimize the blog's page title, to learn more about it read below.

The page title we are talking about is the document title of a web page that appears in most browsers in the tab - in HTML it is situated in the HEAD of a web page as
<title>Blog Title - Some Example Page</title>

Majority of Blogger templates (expect for the themes that has been recently introduced) have a very unconventional and non-optimized for search way of display the page title on posts in Blogger blogs.

Each of your posts is a different web page on your blog, and it is important that all of them are optimized for SEO, primary focus should be on the content, and another important aspect, which we are discussing here, is the page title, it's the part that appears on search engine's results.

Check this and ask yourself, which one gives a human being more detail about the search result for the term "How to add CSS to Blogger Blogs"?



Search engines wants values small but descriptive page titles, it is a bad idea to take up a significant amount of space in your page title with your blog's title.

A page title on posts page can be and generally are consisted of two parts, "The post title - The Blog Title", the problem with many Blogger themes / templates are that it puts the blog title first even on post pages, so if one has a blog named "Alison's Travel Photography Blog" a blog post on the blog will have a page title like "Alison's Travel Photography Blog : This Is The Title of The Post"

We are just going to optimize this for search in Blogger.

Optimizing Page Title for Search Engines

This is a very small change to make though it can make significant amount of difference in your search rankings and we recommend you to do this if your page titles aren't optimized yet.

Blogger has launched new themes recently which already has better page title than the old ones, but if you are using a third-party template or Blogger's default templates follow the steps below.

For Normal Blogger Templates and Third-Party Templates

It is recommended that you take a backup of your template before proceeding. 

The following steps are for normal blogger templates that you can choose from the theme selection area in Blogger or third-party templates based on those templates.
  1. Go to your Blogger Dashboard (https://www.blogger.com)
  2. On the blog's dashboard, go to the Theme section

  3. When you are in the Theme section, click on the "Edit HTML" button under your blog's preview.
  4. After the template code appears on the screen, focus in the template code area and hit CTRL+F / ⌘ + f and search for the following piece of code, tip: only enter <title> should bring this up.

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

  5. Delete the line of code that found in the last step, and replace it with this code:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>

  6. Save the template and visit your blog. Check your page's title in the browser's tab to see if it is SEO optimized or not. 

The "|" is a character that will separate your current page name and the main blog title, i.e "My Blog | An example blog post title" or "Stramaxon | How to add CSS" etc. 

If you like you can change that to something else such as "/", ":", "||". It is a preference but may also have some effect on SEO, so pick a different one only when you are sure what you are doing. 

EXTRA: Adding Blog's Tagline in Title

The instructions in the section above works great even without modifications but if you like you can add a tag line of your blog in the page title so that it appears in the browser's tab and most importantly in

Benefit of adding a tag line: If your blog's title is short, then adding a tag line makes fill up the left space. Your blog's results will look better and your reader can tell what your blog is about right from the search itself.

The code that you were given produces the result like A, and the following will produce the result B. It is highly recommended you add a tag line for your blog if your blog title is short.

Here's the code (similar to the code in the main steps, only added the description part):

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/> - Enter your Blogs Tagline</title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Copy the code and paste it first in a notepad editor, and replace the part Enter your Blogs Tagline with your own tag line: Keep it short and descriptive, it is what will appear in searches along with your blog title, so make it attractive, short and simple.

The steps to add this code is similar to the steps given in the previous section.

Search Optimization and Results

Following this tutorial and making this change to your blog may or may not give you immediate results. To improve your search visibility you still have to post genuine and content that your readers would like to read, this tutorial helps you make your blog's visibility better for what you already have and going to post in the future on your blog. 



If you have questions or have any suggestions then please do comment down below.


The tutorial will be updated to list steps for new Blogger themes...

Solving Blogger Template Error for AdSense Ad Implementation

If you are recently enrolled in AdSense and you are trying to implement ad code that you got from AdSense directly in your Blog's template you might have run into problems, we will walk you through fixing it.



If you are trying to add code from AdSense which looks something like this (there is a difference between the two codes, which we will explain)

Demonstration of the ad code in Blogger template and the error that occurs


<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

OR

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The the only difference between the two snippet is that the first one displays an ad, whereas the second one is used only to load AdSense's JavaScript files.

In many cases to improve page load speed you just want to load the scripts once because AdSense ad codes always include the ad-block HTML code as well as the scripts. Or when you are enabling Page Level Ads the script tags needs to be added in the template once, the following code is give, which you are supposed to implement in your Blogger's template / theme




The error that you might be getting when trying to add these code snippet in your template is

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character. 

Fixing the error

There's nothing wrong with the code, according to HTML5's standard it is an error free code, but Blogger's template / thee is coded in XML and it fails to parse it because of a small part in the codes

Right now we have (note that we are only displaying the part of code that requires modification, rest should be left untouched),

<script async src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

The problem here is that the "async" attribute has no values passed into it, for e.g "src" has a "=" sign with a value in it. All we need to do is pass a value to the attribute and Blogger will accept it.

<script async="async" src="//pagead2.googlesyndication.com/
pagead/js/adsbygoogle.js [...]

Notice the difference between the two snippets. We have set it async="async", that makes it comply with XML thus Blogger accepts it and saves the template without any error.



That's pretty much everything to it. Follow the steps given above and save the template, it must parse the code without any problems. If you are facing problems implementing ad-code other than this then don't hesitate to let us know in the comments (add a screenshot for better help)







How to Backup Your Blogger Theme / Template

A step-by-step guide on backing up a Blogger.com Theme / Template for the newest Blogger UI updates.

We have another guide on backing up the template in Blogger but since the roll-out of the newer UI and the changes in the design we are updating the steps with a new tutorial for relevant visual demos.

You can still check the old tutorial on backing up the template here though it is not relevant anymore : http://www.stramaxon.com/2012/03/backup-your-template-of-your-blogger.html

Why back-up a template / theme ?

In the Blogger environment we often want to add a new widget or a functionality in our blog and tutorials ask us to make changes to our templates, it is important we have a backed-up template so if anything goes wrong we can always fallback to the previous version.

There are more reason why -
  1. Making changes to Blogger templates to add functionality or change design
  2. When trying out new themes / template
  3. Using the template / theme again on another blogger blog
Read below for steps on backing up a template / theme, note that we are going to use the terms "template" and "theme" interchangeably. 

Backing Up the Template / Theme on BlogSpot

Let's start with backing up the template.
  1. Log-into your Blogger account to go to your Dashboard. 
  2. From the blog's drop-down list choose the blog

  3. On the left pane choose the "Theme" option

  4. In the Theme section page, click on the "Backup / Restore" button on the top right corner of the page

  5. A dialog box may appear, to download the template backup click on the orange "Download" button as shown below -

  6. A file with a name similar to theme-2887119284088758674.xml will be downloaded. This file is the backup template / theme file, it can be used to recover your template / theme on Blogger. 

That's it, save the theme .xml file at a safe place where you can access it in the future in case you have a broken template. Make it a practice to take a backup of the template before making any changes to it. 

Restoring the Template / Theme Using the XML file

In the previous section you learn how to download a backup of your template. Restoring the template is simple as well, 

  1. in the last section follow till Step #4
  2. Now in the dialog box that opens, which looks like this click "Choose file" (maybe labelled differently on different browsers) -

  3. Browse to the template's XML file and then click on "Upload" 
  4. Once the upload finishes your template will be restored. 
That's it. Do let us know if you have any questions or suggestions regarding this tutorial.