March 05, 2021

Blogger Custom Head Content and Meta Tags

Blogger is a google powered free blogging platform. Blogger loads content of head element with blogger's special include tag whereas some meta tags can be manually added. In this post we will learn how to add custom head content and meta tags to blogger theme.

Blogger Custom Head Content and Meta Tags

Meta tags are important for search engines to understand more about your website or blog. Blogger includes some content of head element using a special include tag <b:include data='blog' name='all-head-content'/>. Learn in this post how to add blogger meta tags without using blogger's include tag and how to add open graph tags and twitter card tags in simple and easy way.

 

SEO (Search Engine Optimization) Tags

Add responsive design meta tag, Internet Explorer engine meta tag, content type tag and generator meta tag.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='IE=edge' http-equiv='X-UA-Compatible'/>
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>

Title Tag and Base URL

Add title tag with some conditions to check what page user is currently viewing. Then we base tag with value of blog URL.

<title>
    <b:if cond='data:view.isPage || data:view.isPost'>
    <data:blog.pageName.escaped/> | <data:blog.title.escaped/>
    <b:elseif cond='data:view.isError'/>
    404-Not Found | <data:blog.title.escaped/>
    <b:else/>
    <data:blog.title.escaped/>
    </b:if>
</title>

<base expr:href='data:blog.url'/>
 

Canonical and Favicon Tags

Add canonical URL from current URL in the view. Add locale tag and favicons with different sizes.

<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:blog.url' expr:hreflang='data:blog.locale' rel='alternate'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon-precomposed'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon-precomposed' sizes='114x114'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon-precomposed' sizes='72x72'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon-precomposed' sizes='144x144'/>
 

Theme Color UI Tags

Add theme color meta tags to set specific color for browser's address bar. Set Microsoft devices browsers as well.

<meta expr:content='data:skin.vars.theme_color_1' name='theme-color'/>
<meta expr:content='data:skin.vars.theme_color_1' name='msapplication-navbutton-color'/>
 

Blog Feed and Author Tags

Add blog feed tags for atom and RSS. Add the publisher meta tag with author name.

<!-- Feeds & Author Links -->
<data:blog.feedLinks/>
<data:blog.meTag/>
<!-- /Feeds & Author Links -->
 

Open Graph Tags

Following is the code snippet to add open graph tags for locale, site name, URL, type, title, description and image.

  • Add meta og:locale and og:site_name tags.
  • Add og:url meta tag.
  • Add meta tag for og:type. If the current page is of type "page" or "post" then the value is "article" otherwise the value should be "website".
  • Add og:title meta tag. If it is an error page then prepend "404-Not found" to blog's title as og:title tag. Otherwise check if data:blog.pageName has a value add that value or fallback to blog's title.
  • Add og:description meta tag.
  • Finally add og:image meta tag. If data:blog.postImageUrl has a value then add that value else fallback to custom URL of your choice. 
<!-- Open Graph Tags -->
<meta content='en_US' property='og:locale'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/>

<meta expr:content='data:blog.canonicalUrl' property='og:url'/>

<b:if cond='data:view.isPage || data:view.isPost'>
    <meta content='article' property='og:type'/>
    <b:else/>
    <meta content='website' property='og:type'/>
</b:if>

<b:if cond='data:view.isError'>
    <meta expr:content='&quot;404-Not Found | &quot; + data:blog.title.escaped' property='og:title'/>
    <b:else/>
    <meta expr:content='data:blog.pageName ? data:blog.pageName.escaped : data:blog.title.escaped' property='og:title'/>
</b:if>

<meta expr:content='data:blog.metaDescription.escaped' property='og:description'/>

<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 600)' property='og:image'/>
    <b:else/>
    <meta content='URL_TO_IMAGE' property='og:image'/>
</b:if>
<!-- /Open Graph Tags -->
 

Twitter Card Tags

Following is the code snippet to add twitter card tags for site, title, description and image.

  • Add summary_large_image card tag to define for twitter to use image card for display.
  • Add meta tag for twitter:site and use data:blog.title value for it.
  • Add title with twitter:title meta tag. If it is an error page then prepend "404-Not found" to blog's title as og:title tag. Otherwise check if data:blog.pageName has a value add that value or fallback to blog's title.
  • Add meta tag for twitter:description.
  • Finally add twitter:image meta tag. If data:blog.postImageUrl has a value then add that value else fallback to custom URL of your choice. Notice we used the google's JS function to resize image to be 600 pixels wide which is recommended smallest image size for twitter card. 
<!-- Twitter Card Tags -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.title.escaped' name='twitter:site'/>
<b:if cond='data:view.isError'>
    <meta expr:content='&quot;404-Not Found | &quot; + data:blog.title.escaped' property='twitter:title'/>
    <b:else/>
    <meta expr:content='data:blog.pageName ? data:blog.pageName.escaped : data:blog.title.escaped' property='twitter:title'/>
</b:if>
<meta expr:content='data:blog.metaDescription.escaped' property='twitter:description'/>

<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='resizeImage(data:blog.postImageUrl, 600)' property='twitter:image'/>
    <b:else/>
    <meta content='URL_TO_IMAGE' property='twitter:image'/>
</b:if>
<!-- /Twitter Card Tags -->

SEO meta tags are useful to control how pages appear in search results and improve visibility in search listings. Adding open graph tags and twitter card tags to website play a key role in boosting click-through rates by providing relevant and attractive snippets. Test meta tags on https://opengraph.dev website for all meta tags snippets preview.

Home