Best guide for Ultimate SEO for a Blogger Blogspot Blog
A lot has been written about search engine optimization but when it comes to implementing it on a specific web publishing platform, beginners or technically challenged often struggle to apply it correctly. If you've hosted your blog on Google's Blogger platform and want to tidy up its SEO settings, this guide is written just for you. Search engines regularly update and improve their algorithms to ensure the results are contextually correct. Exceptional content is the cornerstone of SEO efforts but without core on-page SEO, we may not be able to get a good presence on the search engines. Through this tutorial, we are going to learn about the key SEO settings one must apply to a typical blogger template for better SEO to gain more qualified traffic from organic sources. All you need is basic code copy pasting ability to apply these tips which give you a better blogger template enhanced with correct SEO settings. So let's get started and quickly check out this step-by-step SEO guide written specifically for blogger blogs and sites.
Basic Dashboard Settings
Let's start with core blogger dashboard settings, to ensure that the most basic on page SEO is applied on each page. It is essential to start with these dashboard settings which are further augmented with added customization done within blogger template code.Step 1: Open your Blogger dashboard settings and go to Settings → Basic option as shown below.
Provide an appropriate blog title (ideally shouldn't exceed 75 characters) and make sure the blog is visible to search engines. Visibility for blogger's internal platform listing is not mandatory. Similarly, you may notice that I've kept the description field blank.
Step 2: Go to Settings → Basic → Permissions section and ensure the blog visiblility is set to public as shown below.
If your blog is opened only for select users, you can make changes to this setting though making it private defeats the entire purpose of SEO efforts for better presence on search engines. This setting is public by default so in most cases you can leave it as it is.
Step 3: Now go to Settings → Search preferences → Meta tags/Errors and redirections sections. Here you'll find two most important SEO settings which must be completed.
The first important setting is used to supply the blog description used for the home page. Use it wisely to summarize what your blog is all about. Ideally, it shouldn't exceed 160 characters. Enabling this option also ensures you can write custom descriptions for individual posts while composing them within the post editing screen.
The next important setting allows you to create a custom 404 page whenever a visitor lands on your blog through a broken link. You can freely write your desired text in the text box as per your preferences. Custom CSS can also be added to the page content through a
<style></style> tag.Modified (Core) Header Meta Tags
The default blogger template includes few header meta tags which should be replaced by the ones listed below to ensure your blog's single post pages, static pages, and error page gets a better SEO structure. To do so, open your blog's template within the dashboard and delete everything between<head> and <b:skin> tags. Thereafter, paste the following code between these two tags.
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/>
<b:else/>
Write custom 404 page title here!
</b:if>
</b:if>
</title>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,noarchive' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<meta content='noindex, nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "error_page"'>
<link href='https://plus.google.com/+YourBlogGPlusPageAddress' rel='publisher'/>
</b:if>
</b:if>
<meta charset='UTF-8'/>Note: If you're using a responsive blogger template, you must add the following meta tag at the end of the code snippet shown above.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>After adding this code snippet, following things are taken care of.
- All the automatically generated header meta tags remain intact and are included in the header.
- Page titles are optimized for search engines for home page, single post pages, static pages, archive pages and of course 404 page.
- A setting is done to ensure archive pages are not indexed or archived by search engines.
- A setting is done to ensure all the static pages on the blog are neither indexed nor pass link juice to the search engines. You can change this setting if you want your static pages to be indexed as well.
- For all the content pages, Google+ publisher credit tag is included. You must change the default link with the link associated with your blog's Google+ page.
- And last but not the least, character set meta tag is included as well to specify the character encoding used for the HTML document.
- In case, you're using a responsive template, do not forget to append the last meta tag shown separately at the end.
Facebook Open Graph Meta Tags and Twitter Cards Integration
Nowadays social media is tightly integrated with publishing platforms for easy syndication and aggregation of content across different platforms. Facebook provides meta tags for displaying content on the social network in the best possible way. Similarly, Twitter also offers different types of cards to display rich media content on its timeline in a better way.Every blogger must integrate these two important tags within their blog to get a better presence on these two social platforms.
1. Twitter card integration: Let's see how to integrate a typical photo card within a blogger template. A photo card is one of the most popular card types used by large numbers of websites. Here's how to do it.
Find the following line within your blog template.
<b:includable id='post' var='post'>Right below this line, paste the following code.
<b:if cond='data:blog.pageType == "item"'>
<meta content='@blogtwitterhandle' name='twitter:site'/>
<meta content='myblog.com' name='twitter:domain'/>
<meta content='@blogtwitterhandle' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='photo' name='twitter:card'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>That's it! Once integrated, you get a nice photo-rich tweet whenever your blog posts are shared on Twitter provided the post includes at least, one image within the body. Here's how a typical tweet may look like once Twitter photo card has been enabled on the website.
After integration of the code, validation needs to be done on the Twitter platform. It's a simple process which is explained in the following guide. It also tabulates other types of Twitter cards you may want to use on your Blogger blog.
In the above Twitter card snippet, you have to change blog site address and your Twitter handle in the first 3 meta tags. It may take few days after validation for rich photo cards to appear on the timeline.
Facebook open graph tags integration: And now, let's see how to integrate Facebook's Open Graph meta tags within a blogger template.
First add the following Open Graph namespace declaration
xmlns:og='http://ogp.me/ns#'within the template's <html> tag. After, addition the entire <html> may look like this.
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>Thereafter, right before closing
</head> tag, paste the following code.
<meta content='en_US' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='Type Blog Title Here' property='og:site_name'/>
<meta content='https://www.facebook.com/BlogFBPageAddress' property='article:publisher'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.pageType == "index"'>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='Paste blog logo URL here (160x160 JPG/PNG)' property='og:image'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
</b:if>You have to make 3 changes in the code snippet shown above. Blog title, blog's Facebook page URL and blog's logo URL (should be a square 160x160px JPG or PNG image) need to be updated. In case, you're using a different locale, you may change the first meta tag too.
Validating & Correcting Structured Microdata
Every modern website uses microdata in different forms to enable search engines to extract and process key data related to content on the web page for better browsing experience for the end users.In simple words, microdata enables search engines to understand the structure and information associated with the web content so that they can serve better search results to the users. At the very basic level, our blogger template must include the necessary microdata to allow search engines interpret key information associated with the blog posts. This key information is as follows:
- entry-title (blog post title)
- entry-content (blog post body)
- updated (blog post's last modification time)
- author [hcard] fn (post's author name)
To do so, head over to Google's structured data testing tool and provide one of the blog post's URL for validation. If everything is correct, you may get the result something like this.
In case, something is wrong in the implementation, you may get an error like one of the samples shown below.
So, I'll show how to integrate the bare bones microdata mentioned in our template to help search engines better interpret our content. Power users can add more structured data in their templates if required.
Step 1: Find the following code snippet and add
hentry class at the right location as shown below.
<b:includable id='post' var='post'>
<div class='post hentry'>Step 2: Thereafter, find the following code snippet and add the
entry-title class at the two locations as shown below. I've included partial code snippet to ensure things don't get cluttered. You can see the two places where this class is present in the code snippet below.
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>Step 3: Next is the turn of adding microdata for the post author. Find the following code snippet and add the
author and vcard classes. A class named fn is also added in the code snippet. You can replicate the same in your blogger template by following the sample shown below.
<span class='post-author vcard' itemscope='itemscope' itemtype='http://schema.org/Person'>
<b:if cond='data:top.showAuthor'>
By <span class='fn author' itemprop='name'><data:post.author/></span>
</b:if>
</span>If you pay attention to the code snippet shown above, you'll notice that
itemscope and itemtypeattributes are also added. Make sure you do not skip these additions.Step 4: Next microdata class is the last post modification time. To add it in the design template, find the following code snippet and add the
updated class at the right place as shown below.
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<span class='updated'><data:post.timestamp/></span>
</b:if>
</b:if>Step 5: And last but not the least, add the
entry-content class in the following code snippet to let search engines easily extract the main post body from the page.
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>Note: The code snippets shown above may be slightly different in your blogger template. So, make sure you do not get confused and go ahead with the modifications despite small changes.
In case, you're running a food blog on a blogger blog, you must integrate recipe schema markup within the template to ensure rich snippets are shown prominently in the search results for better results.
So that finishes the integration steps of basic microdata classes within a typical blogger template. Once the integration is complete, do not forget to validate it against the structured data testing tool created by Google.
Miscellaneous SEO Guidelines for Blogger Users
And now, it's time to go through some of the best SEO practices that'll benefit your blog in the long run. Applying these methodologies will ensure you get a good presence on search engines and consistently get an influx of traffic from these organic sources. So let's get started and check out these best SEO practices aimed for blogger users.Image optimization: Blogger users often struggle to correctly manage the images used on the blog. The first you need to understand is that uploading an original image is not the way to go. You must optimize them to reduce the size before using them in a blog post.
Google has clearly stated that site speed is now one of the ranking factors. Bulkier the images, slower is the page opening time.
Here's a simple workflow for using images on Blogger platform.
First of all, never resize your original images. Simply, web-optimize them using one of these two tools. If you're using a PNG image, use this tool. And, in case you're using a JPG image, try this solution.
Thereafter, grab the optimized image and upload it from within the post editor. Now switch to the HTML mode and resize the image by explicitly specifying the image width as shown below.
Make sure you also add an image description through the
alt attribute of the <img> tag. Here's how it is added.
Once you start practicing these image addition guidelines, not only your blog posts will open much faster, but you'll also get good traffic from image search queries.
Custom permalink: Optimized post permalink ensures you get a place in search results for relevant topics and search queries. Fortunately, blogger platform allows you to specify a custom post permalink which can be optimized for search queries.
Make sure you leverage this feature to the fullest and do not rely on the default post slug created by the platform itself.
Do not create lengthy post slug and include at least one primary keyword you want to target. Use a natural search phrase in the post slug for the best results.
Custom post description: And last but not the least is the description which provides a brief summary of the post to be consumed by the search engines. Again, you must use this vital feature for better SEO of your blogger blog.
These custom search descriptions are often included in the rich snippets within search result pages. So make sure a post description is alluring as well to invite clicks from the potential visitors.
So, that completes the essential SEO best practices for blogs hosted on Google's Blogger platform. If you struggle to integrate or implement any feature mentioned in this guide, feel free to send me an email and I'll try my best to resolve it.
