March 05, 2021

Blogger Custom Head Content & 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 <b:include data='blog' name='all-head-content'/> special include tag. 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.

 

Responsive & Browser Meta Tags

Responsive meta tags are used to adapt to different screen sizes and devices. They tell the browser how to scale and render a page. Following code snippet adds responsive 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 (Search Engine Optimization) & Base URL Tag

Title tag adds a title to a web page and is the first place to tell search engines about the topic of the page. Following snippet adds title tag with some conditions to check what page user is currently viewing. Then we add a 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 & FavIcon Tags

Canonical URL tells search engines what is the original or official version of current page. Whereas favion tags add an icon to browser tab. The code snippet below adds canonical URL from current URL in the view, locale tag and favicons of 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 Meta Tags

Theme color meta tags are used to change the color browser's title bar. Following code snippet adds theme color meta tags with specific theme color of the page.

<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 & Author/Publisher Tags

Feed links tells feed aggregators and platforms where the content of website resides. Whereas publisher link tag tells about the creator or publisher of page. Following code snippet with blogger special tags adds blog feed tags for atom and RSS and the publisher meta tag with author name.

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

Open Graph Meta Tags

Open Graph meta tags are used to control how a page looks like when shared on social platforms. Following code snippet adds 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 Meta Tags

Twitter Card meta tags are used specifically for twitter platform to control how a page will look like when shared on twitter. Following code snippet can be used 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