March 05, 2021

Blogger Custom Head Content & Meta Tags

Blogger is a Google powered free blogging platform. Blogger loads the content of the 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 a 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 the 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 a 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. The following code snippet adds a 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

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

The canonical URL tells search engines what the original or official version of the current page is. Whereas a favicon tags adds an icon to the browser tab. The code snippet below adds a canonical URL from the 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 of the browser's title bar. The following code snippet adds theme color meta tags with a 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 tell feed aggregators and platforms where the content of the website resides. Whereas the publisher link tag tells about the creator or publisher of the page. The following code snippet with blogger special tags adds blog feed tags for atom and RSS and the publisher meta tag with the 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 when shared on social platforms. The 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 a 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 the 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 the og:image meta tag. If data:blog.postImageUrl has a value, then add that value otherwise, fallback to a 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 the Twitter platform to control how a page will look when shared on Twitter. The following code snippet can be used to add twitter card tags for site, title, description and image.

  • Add the summary_large_image card tag to define for Twitter to use the image card for display.
  • Add a 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 the blog's title as the og:title tag. Otherwise, check if data:blog.pageName has a value: add that value or fallback to blog's title.
  • Add a meta tag for twitter:description.
  • Finally, add twitter:image meta tag. If data:blog.postImageUrl has a value, then add that value; otherwise, fallback to a custom URL of your choice. Notice we used Google's JS function to resize the image to be 600 pixels wide, which is the recommended smallest image size for a 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 websites plays 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