Blogger Meta Tags – A Simple Setup Guide

Blogger meta tags are small snippets of HTML in your template header that tell search engines and social platforms what your blog is about. Set them up properly, and Google gets clean titles and snippets for search results, while social networks display polished preview cards whenever someone shares a link.

Blogger (Blogspot) is a bit quirky because it mixes custom XML tags with standard HTML. That means configuring tags here works slightly differently than on a standard static site, but it's straightforward once you see how the code fits together.

What Are Meta Tags in HTML?

In standard web design, meta tags in HTML sit inside the <head> section of a webpage. They provide metadata—information about the page—that browsers, search crawlers, and social networks read before loading the visible content.

Your visitors never see these tags on the page itself. Instead, they see the end result: search snippets, preview cards on social feeds, and the text on browser tabs.

Here is a standard meta tags example for a typical webpage:

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>My Gardening Tips</title>

<meta name="description" content="Helpful organic gardening advice for small backyards." />

<meta name="robots" content="index, follow" />

On Blogger, you combine regular HTML with Blogger's conditional tags (like <b:if cond='...'>). That way, each post gets its own title and description instead of repeating your homepage details across the entire site.

Essential Web Page Meta Tags for Blogger

You don't need dozens of obscure tags cluttering your template. Sticking to a focused html meta tags list keeps your theme clean and fast.

Setting Up the Meta Title

Your meta title is the headline people see on search engine result pages and in browser tabs.

Older Blogger templates often put your blog name before the post title (Blog Name: Post Title). You want the post title first (Post Title | Blog Name). It reads better for real people scanning search results.

You can set this up with a conditional block inside the <head> section of your theme XML:

<b:if cond='data:view.isHomepage'>

<title><data:blog.pageTitle/></title>

<b:else/>

<title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

This tells Blogger to show your main blog name on the homepage, while individual post pages put the specific article title upfront.

Setting Up Meta Descriptions

Meta descriptions provide a concise 1–2 sentence summary of your post. Search engines don't use them as a direct ranking factor, but a well-written summary convinces searchers to click your link over the competition.

To turn on meta descriptions in Blogger:

1. Open your Blogger Dashboard.
2. Go to Settings and scroll down to the Meta tags section.
3. Turn on Enable search description.
4. Enter a site-wide search description for your homepage (around 140–160 characters).

Once that toggle is active, every draft will include a Search Description field in the right sidebar under Post Settings. Write a summary for each post before publishing. If you want help drafting clean summaries, you can write them faster with a meta description generator.

To ensure your theme outputs this text, check that your template contains this snippet inside <head>:

<b:if cond='data:blog.metaDescription'>

<meta expr:content='data:blog.metaDescription' name='description'/>

</b:if>

Adding Open Graph and Social Meta Tags

When someone drops a link to your post into Facebook, LinkedIn, or a chat app, that platform reads your page's Open Graph tags to build an image preview, headline, and summary. Without them, the app might pull a random sidebar icon instead of your post thumbnail.

Paste this block into your theme header right below <head>:

<!-- Open Graph Meta Tags -->

<meta expr:content='data:blog.pageTitle' property='og:title'/>

<b:if cond='data:blog.metaDescription'>

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

</b:if>

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

<meta expr:content='data:blog.title' property='og:site_name'/>

<b:if cond='data:view.isSingleItem'>

<meta content='article' property='og:type'/>

<b:else/>

<meta content='website' property='og:type'/>

</b:if>

<b:if cond='data:blog.postImageUrl'>

<meta expr:content='data:blog.postImageUrl' property='og:image'/>

</b:if>

The conditional tag <b:if cond='data:blog.postImageUrl'> checks if your post has an image. If it does, it passes that first uploaded image straight into the social preview tag.

How to Edit Meta Tags in Your Blogger Theme

Always back up your theme before touching any code:

1. In Blogger, head to Theme.
2. Click the arrow next to Customize and pick Backup. Download the .xml file to your computer.
3. Click that same menu and select Edit HTML.
4. Click inside the code box and press Ctrl + F (Cmd + F on Mac) to search for <head>.
5. Paste your custom meta tags directly underneath <head>.
6. Click the orange Save icon in the upper right corner.

If you run into an XML parsing error, check your self-closing tags. Blogger insists on strict XML syntax, meaning every tag must end with /> rather than plain >.

Common Mistakes with Blogger Meta Tags

• Hardcoding post titles: Never put static text inside <title> in your theme template. Use dynamic variables like <data:blog.pageName/> so each page generates its own title automatically.
• Skipping the search description field: Leaving the post-level description blank forces search engines to grab random sentences from your body text.
• Duplicate description tags: If you paste a hardcoded HTML meta description into your template while also using Blogger's built-in Search Description setting, your site can output two competing description tags on every page.
• Unclosed tags: Forgetting to close tags (like writing <meta ...> instead of <meta ... />) breaks the Blogger theme editor and keeps you from saving.

Try It with a Free Tool

Writing XML-compatible tags by hand leaves room for typos and syntax slips. You can generate clean, pre-formatted code built for Blogspot templates using the Blogger meta tags tool.

If you work across other platforms or just want standard snippets, try a general meta tag generator. Once your tags are in place, check how your headline and snippet will look in search results using a SERP preview tool before you publish.

FAQ

Why are my Blogger meta descriptions not showing in Google?

Google frequently rewrites descriptions based on what someone searches for. Even when your tag is configured properly, Google might pull an excerpt straight from your page content if it thinks that text answers the query better.

Where do I put meta tags in Blogger?

Meta tags go between the <head> and </head> tags in your theme code. You can find them by opening your Blogger dashboard, selecting Theme, clicking the dropdown next to Customize, and picking Edit HTML.

Do Blogger meta tags need closing slashes?

Yes. Blogger processes themes using XML rather than standard HTML5 parsing. Every self-closing tag must end with a trailing forward slash (for example, <meta name="robots" content="index, follow" />). Leaving off the closing slash triggers an XML error when you try to save.