Add Meta Tags and Structured Data (BlogPosting + Breadcrumb) to Blogger

Add Meta Tags and Structured Data (BlogPosting + Breadcrumb) to Blogger

Last updated: August 14, 2025 — by BloggerWidgetLab

Why These Steps Matter

Setting up Meta Tags helps search engines and social media platforms understand your site and display it attractively when shared. Adding Structured Data (Schema.org) tells Google about your post as a BlogPosting and shows a Breadcrumb in search results, improving both appearance and click-through rate (CTR).

Before You Start

  • Prepare a logo for your blog (preferably PNG with transparency).
  • Prepare a default image (1200×630) for posts without images.
  • If you have one, get your Twitter/X handle for sharing cards.

Step 1 — Add Meta Tags inside <head>

From your Blogger dashboard → ThemeEdit HTML, search for </head> and paste the following snippet right before it:

<!-- ===== Basic Meta Tags ===== -->
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="BloggerWidgetLab offers the latest Blogger widgets, SEO tips, and design guides to grow and monetize your blog."/>
<meta name="keywords" content="Blogger widgets, Blogger SEO tips, Blogger templates, blog design, blog growth, blog monetization"/>
<meta name="author" content="BloggerWidgetLab"/>

<!-- ===== Open Graph / Facebook ===== -->
<meta property="og:title" content="BloggerWidgetLab - Blogger Widgets, SEO Tips & Blog Design"/>
<meta property="og:description" content="Discover the latest Blogger widgets, SEO tips, and design tutorials to grow your blog and boost earnings."/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://bloggerwidgetlab.blogspot.com/"/>
<meta property="og:image" content="https://bloggerwidgetlab.blogspot.com/path-to-your-image.jpg"/>

<!-- ===== Twitter Card ===== -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="BloggerWidgetLab - Blogger Widgets, SEO Tips & Blog Design"/>
<meta name="twitter:description" content="Discover the latest Blogger widgets, SEO tips, and design tutorials to grow your blog and boost earnings."/>
<meta name="twitter:image" content="https://bloggerwidgetlab.blogspot.com/path-to-your-image.jpg"/>
<meta name="twitter:site" content="@YourTwitterHandle"/>

Note: Replace path-to-your-image.jpg with a real OG/Twitter image (1200×630). Replace @YourTwitterHandle with your username (without @) or remove that line.

Step 2 — Add Structured Data (BlogPosting + Breadcrumb)

This snippet works only on post pages. It uses the first image in the post or falls back to your default image and logo.

<b:if cond='data:blog.pageType == "item"'>
<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:post.url/>"
  },
  "headline": "<data:post.title.esc/>",
  "description": "<data:post.snippet.esc/>",
  "image": "<b:if cond='data:post.firstImageUrl'><data:post.firstImageUrl/><b:else/>https://bloggerwidgetlab.blogspot.com/default-image.jpg</b:if>",
  "author": {
    "@type": "Person",
    "name": "BloggerWidgetLab"
  },
  "publisher": {
    "@type": "Organization",
    "name": "BloggerWidgetLab",
    "logo": {
      "@type": "ImageObject",
      "url": "https://bloggerwidgetlab.blogspot.com/logo.png"
    }
  },
  "datePublished": "<data:post.date.iso8601/>",
  "dateModified": "<data:post.lastUpdated.iso8601/>"
}
</script>

<!-- BreadcrumbList Schema -->
<script type='application/ld+json'>
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://bloggerwidgetlab.blogspot.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "<data:blog.pageTitle/>",
      "item": "<data:blog.url/>"
    }
  ]
}
</script>
</b:if>

Post a Comment

0 Comments