Web Page and Blog design: How to Add Seo Friendly Meta Tags In Blogger Blogspot

Meta tags are the most important thing for blogger blogs, it is responsible for your site appearing in various search engines. Without meta tags search engines can't identify your blogs content, it also helps in recognizing post content, links and images in social media sharing.

Meta tags are snippets of text that provides description of a blog's post content; the meta tags aren't visible on the blog's front end itself, but only in the blogs source code.

Why Meta Tag Is Important?

Meta tags are very important post details descriptors that tells the search engine what a blog and blog post is about. Meta tags provide description about the post in the HTML format of the blog. This little piece of description is called metadata. It can be read by various search engines and their web crawlers. Search engines like Google use bots to extract metadata from meta tags to understand important information about the blog and blog post. Search engines can use this information for displaying your site on their search results and most importantly ranking purposes, at the end it helps your site to display snippets in search results.

Step-1 ( Adding HTML )

In the template, search for the <head> tag and just below it paste the following HTML Coding.

Preview:

    <title>
        <b:if cond='data:blog.pageType == &quot;index&quot;'>
            <data:blog.pageTitle/>
        <b:else/>
            <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
                <data:blog.pageName/> - <data:blog.title/>
            <b:else/>
                ERROR 404 - <data:blog.title/> 
            </b:if>
        </b:if>
    </title>
    <!-- Description and Keywords (start) -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <meta content='YOUR DESCRIPTION HERE' name='description'/>
    </b:if>
    <meta content='YOUR KEYWORDS HERE' name='keywords'/>
    <!-- Description and Keywords (end) -->
    <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>
    <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.postImageThumbnailUrl' property='og:image'/>
    </b:if></b:if>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
        <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
    <meta expr:content='data:blog.pageName' name='twitter:title'/>
    <b:if cond='data:blog.postImageUrl'>
      <meta content='summary_large_image' name='twitter:card'/>
      <meta expr:content='data:blog.postImageUrl' 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'/>
    <b:if cond='data:blog.metaDescription'>
      <meta expr:content='data:blog.metaDescription' name='twitter:description'/>
    </b:if> 
<b:if cond='data:view.isHomepage'>
 <script type='application/ld+json'>{&quot;@context&quot;:&quot;http://schema.org&quot;,&quot;@type&quot;:&quot;WebSite&quot;,&quot;name&quot;:&quot;<data:view.title.escaped/>&quot;,&quot;url&quot;:&quot;<data:view.url.canonical/>&quot;,&quot;potentialAction&quot;:{&quot;@type&quot;:&quot;SearchAction&quot;,&quot;target&quot;:&quot;<data:view.url.canonical/>search?q={search_term_string}&quot;,&quot;query-input&quot;:&quot;required name=search_term_string&quot;}}</script>
    </b:if>

IMPORTAND :- Just replace the highlighted code wth your blog's description and keywords.

Note :- To make the search description work simply enable the search description from settings, to do that, Go to your blogs dashboard >> Settings >> Navigate to Meta Tags and enable the search description option.