Bana kenya blog template to review and giving examples in giving out skills.


Having an effective methods of displaying blog post and pages in different devices creates a good SEO. This helps the crawlers to find information easily and crawl its search engines like yahoo, bing, google and many more. Getting an effective method of having great meta tags helps in removing errors in search engine crawling processes.

The first process to add meta tags in blogger is that we need to enable meta description by adding page and home description and of the blog. Follow these steps;
  1. On your blog’s Dashboard; go to your Settings > Search preferences > Meta tags > Description and click the Edit link.
  2. Click the ‘Yes’ radio button.
  3. Enter the meta description for your blog. This will appear on your homepage and other multi-post pages in a multipurpose blog.
  4. Click ‘Save Changes’ button.

This method sometimes is kind not effective. The effective method that adds all meta tags for twitter,facebook, google analytics, post pages and meta description of the blog is the below method.

  1. Go to Blogger Dashboard > Template; click ‘Edit Template’. (before you edit the template backup because anything can go astray)
  2. Find <head> and paste the following code just before it and save.
  3. Save the template if you are sure you did correctly.



 This is the code below,make sure you edit the ones highlighted to your own.To have your blog be automatically compatible with twitter cards and facebook automatic and latest comment box add the following meta tags Below head tag.(<head>)


<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='data:blog.post Description' name='twitter:description'/>
<meta content='data:blog.postImageUrl' name='twitter:image'/>
<meta content='@BanaKenya' name='twitter:creator'/>
<meta content='data:blog.title' name='twitter:title'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='Add your twitter handle e.g @banakenya' name='twitter:creator'/>
<meta content='Add your own ID e.g https://web.facebook.com/banakenya1' property='fb:admins'/>
<meta content='Add your own app ID e.g 177567725945678' property='fb:profile_id'/>
Websites nowadays use Open graph methods and meta viewports to be viewed in Mobile devices and in portable media.  Adding it is very simple in blogger and it is just a few steps.

Add the following code just above the above for adding social media tags like on twitter and facebook.

<!-- Begin Open Graph metadata -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Read article about &quot; + data:blog.pageName + &quot; On &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Please visit &quot; + data:blog.pageTitle + &quot;To read more cool stuff.&quot;' property='og:description'/>
    </b:if>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='ADD YOUR BLOG DESCRIPTION HERE.' property='og:description'/>
<!-- Still looking for a way to use the post snippet if there's no description -->
</b:if>
<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/><b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/><b:else/>
        <meta content='ADD LOGO URL HERE' property='og:image'/>
    </b:if>
</b:if>
 Now you there with all major meta tag. Its time to save and view your blog in different devices.

If it is not seen properly in small mobile screen then let us adjust the viewport in this below code.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
 Comments in very important in any website. Getting a simple way of adding comments by either anonymous commenting or the use of social media can be great to enhance blog SEO. Check for ways of adding commenting systems to your blog either Disqus, facebook,twitter or google plus. Others may prefer having a whole form for readers to add comments.






Post a Comment

What is your say on this

Previous Post Next Post