Fixing Blogger Social Previews: How to Stop LinkedIn from Showing Your Homepage Meta Description (and How to Debug with AI)

Infographic comparing a broken LinkedIn social preview showing the wrong homepage meta description to a fixed Blogger preview using dynamic Open Graph tags and AI debugging.

Have you ever spent hours writing an in-depth blog post, shared the link on LinkedIn or Facebook, only to find that the preview card displays your generic homepage title and tagline instead of your post’s unique headline and description?

As I have written before, bloggers' passion should be just blogging—not pulling your hair out over technical glitches that hide your hard work.

This is one of the most frustrating technical SEO glitches on Blogger (Blogspot). It hurts click-through rates (CTR) and confuses readers who expect a preview relevant to the article.

Here is an analysis of why this happens, the exact Blogger XML code needed to fix it, and a breakdown of how to use AI as a real-time technical debugging partner to solve tricky web issues quickly.

Quick Summary: If social networks are pulling the wrong preview text from your Blogger site, your Open Graph (og:) tags are likely hardcoded globally. The fix requires editing your Blogger XML theme to include <b:if> conditional tags, ensuring the homepage displays your brand tagline, while individual posts dynamically pull the data:blog.metaDescription.

Why LinkedIn Shows the Wrong Blogger Meta Description (The Open Graph Problem)

When social media platforms like LinkedIn crawl a webpage, they search the <head> section for Open Graph (og:) meta tags:

  • og:title – The bold headline in the link preview card.
  • og:description – The 1-2 sentence snippet beneath the headline.
  • og:image – The preview image shown with your post.

What Goes Wrong in Blogger Templates

Many bloggers paste custom branding tags directly into their template's <head> section like this:

<meta content='My Blog | Digital Marketing & SEO Services' property='og:title'/>
<meta content='Expert SEO Services. Helping businesses grow.' property='og:description'/>

When placed outside Blogger’s conditional logic tags, this code becomes global. Blogger applies that exact title and description across every page on your domain, including the homepage, archive pages, and every published article.

Consequently, even when you fill out a unique Search Description inside the Blogger post editor, social platforms ignore it in favor of the hardcoded global tag.

Tag Setup How It Works Result on LinkedIn
Hardcoded Tags (The Problem) Applies the exact same static text to every single page on the blog. Forces the generic homepage description onto all individual articles.
Conditional Homepage Tags Uses <b:if> to isolate custom branding to the root URL only. Displays your custom brand tagline only when the homepage is shared.
Dynamic Post Tags (The Fix) Uses expr:content to pull unique data from the post editor. Properly displays the specific article's title and search description.

The Solution: Conditional Open Graph Tags in Blogger XML

To resolve this, tell Blogger to evaluate the visitor's location using conditional tags:

  1. If on the Homepage: Display the branded site title, global description, and brand logo.
  2. If on an Individual Post/Page: Dynamically extract the specific article title (data:blog.pageName), the post search description (data:blog.metaDescription), and the featured post image.

The Working Template Code

In Blogger, go to Theme > click the dropdown next to Customize > Edit HTML. Locate the <head> tag and configure your Open Graph markup as follows:

<head>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- HOMEPAGE ONLY: Static title, description, and square logo -->
    <meta content='YOUR_HOMEPAGE_TITLE' property='og:title'/>
    <meta content='YOUR_HOMEPAGE_DESCRIPTION' property='og:description'/>
    <meta content='YOUR_HOMEPAGE_IMAGE_URL' property='og:image'/>
    <meta content='250' property='og:image:width'/>
    <meta content='250' property='og:image:height'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='website' property='og:type'/>
  <b:else/>
    <!-- INDIVIDUAL POSTS & PAGES: Dynamic title, description, and 16:9 featured image -->
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>
    
    <b:if cond='data:post.featuredImage'>
      <meta expr:content='data:post.featuredImage' property='og:image'/>
      <meta expr:content='data:post.featuredImage' property='og:image:secure_url'/>
      <meta content='1200' property='og:image:width'/>
      <meta content='630' property='og:image:height'/>
    <b:else/>
      <!-- Fallback image if post has no graphic -->
      <meta content='YOUR_DEFAULT_FALLBACK_IMAGE_URL' property='og:image'/>
    </b:if>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta content='article' property='og:type'/>
  </b:if>

Why this works:

  • data:blog.url == data:blog.homepageUrl isolates your custom branding exclusively to your root domain.
  • <b:else/> handles all individual post URLs.
  • expr:content='data:blog.pageName' dynamically pulls the post’s title.
  • expr:content='data:blog.metaDescription' automatically grabs the text from your Search Description field in the post editor.

Three Costly Syntax Traps to Watch Out For in Blogger XML

Blogger uses strict XML parsing. Even a tiny typographical error can cause the template to fail to save or misrender:

  1. Unclosed Meta Tags: In standard HTML5, <meta ... > is acceptable. In XML, every tag must be self-closing (<meta ... />). A missing trailing slash breaks the document structure.
  2. Stray Characters: Stray brackets (like an accidental > on a new line) will trigger an XML parser error when saving the theme.
  3. Duplicate or Orphaned </b:if> Tags: When copying and pasting snippets, duplicate closing tags or redundant og:type lines often slip in. Always trace your opening <b:if> tags to ensure each has exactly one corresponding closing </b:if>.

Bonus Update: The Facebook "Missing Image" Bug (And How We Fixed It)

When I first published this post yesterday, the Open Graph tags worked perfectly, and LinkedIn generated a beautiful preview card with the correct featured image.

However, today when I went to share this exact same link on Facebook, the featured image was completely missing!

I ran the URL through the Facebook Sharing Debugger and was hit with an "Invalid Image Content Type" warning.

So, why did it work on LinkedIn yesterday but break on Facebook today? I used AI to debug my XML template, and we found the culprit.

The Problem:
In my <head> tags, I was originally using this code to pull the image:

<b:if cond='data:post.featuredImage'>
  <meta expr:content='data:post.featuredImage' property='og:image'/>

In Blogger's architecture, data:post variables only work inside the body of the page (within the actual Blog widget). Because I placed them in the global <head> section, Blogger couldn't read them and treated the variable as completely empty.

Because it was empty, my code skipped down to my <b:else/> rule and tried to serve my static fallback logo. Unfortunately, my fallback logo's URL contained spaces, which Facebook's strict scraper rejected entirely, resulting in the "Invalid Image Content Type" error and a blank preview card.

The Solution:
To pull a dynamic post image from the <head> section of a Blogger theme, you cannot use data:post. You must use the global blog tag: data:blog.postImageUrl.

I updated my code to this:

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

As soon as I saved the template and clicked "Scrape Again" in the Facebook Debugger, the warning disappeared, and the featured image populated perfectly!

Don't Forget: Clear the Social Cache

After updating your template, old LinkedIn shares may still show the previous homepage metadata. This occurs because platforms store scraped link previews in their server cache.

To refresh the cache immediately:

  1. Copy your published article URL.
  2. Open the LinkedIn Post Inspector.
  3. Paste the URL and click Inspect.
  4. LinkedIn will re-crawl your page, parse the new dynamic Open Graph tags, and show an updated preview with your specific article title and description.

The 3-Step AI Debugging Framework for Technical SEO

Troubleshooting template code doesn't require a formal computer science background if you know how to use AI as an effective technical partner. When collaborating with an AI to solve web development or SEO bugs, use this framework:

1. State the Symptom, Not Just the Goal

Instead of just asking: "Write Open Graph tags for my blog," provide the exact problem:

"When I share my post on LinkedIn, it displays the homepage meta description instead of the post's unique search description."

Providing the symptom allows the AI to immediately identify structural issues—like static meta tags overriding dynamic conditional tags.

2. Share the Surrounding Code Context

Code rarely lives in isolation. If an error persists:

  • Share the lines immediately above and below the snippet (around 10–20 lines total).
  • Include the line numbers where the problem occurs.
  • Mention the exact platform (e.g., Blogger XML, WordPress PHP, Shopify Liquid) so the AI provides syntax valid for that engine.

3. Debug in Iterative Cycles

Code debugging usually involves two or three small iterations:

  • Step 1: Establish the logic (e.g., separating homepage vs. post conditionals).
  • Step 2: Validate syntax (locating missing slashes, extra tags, or typos).
  • Step 3: Verify externally (checking with tools like the Post Inspector).

Treating AI like a pair programmer—feeding it feedback at each step and checking specific line numbers—makes pinpointing syntax glitches and resolving technical roadblocks straightforward and manageable.

Looking to get even better outputs from AI? Once you master this debugging framework, check out my step-by-step tutorial on how to use the Hybrid Prompt Template to structure your marketing and coding requests.

Next Step for Your SEO: Now that your social previews are technically flawless and ready to share, it's time to build authority. Learn how to find backlink gaps using Gemini AI to uncover where your competitors are getting their traffic.

🧠 Quick Quiz: Test Your SEO & Debugging Knowledge

1. Why does LinkedIn show the wrong preview description for a Blogger post?

2. Which conditional tag ensures your code ONLY runs on the homepage?

3. What is the crucial FIRST step in the AI Debugging Framework?

Frequently Asked Questions about Blogger Social Previews

Why does LinkedIn show my Blogger homepage description instead of my post?
LinkedIn displays your homepage description because the Open Graph meta tags (og:description) in your Blogger template are hardcoded globally. If they are not wrapped in conditional tags, Blogger forces the homepage text onto every individual article.

How do I add dynamic Open Graph tags to Blogger?
To add dynamic tags, edit your Blogger HTML theme and use the <b:if cond='data:blog.url == data:blog.homepageUrl'> statement. Put your static homepage tags inside this rule, and use <meta expr:content='data:blog.metaDescription' property='og:description'/> under the <b:else/> rule for individual posts.

How long does it take LinkedIn to update a link preview?
LinkedIn caches link previews for 7 days. To update a link preview immediately after changing your Blogger code, paste your URL into the LinkedIn Post Inspector and click "Inspect" to force a fresh scrape.

Want More Traffic & Leads?

Get a custom SEO & AI growth strategy for your business. No guesswork, just real results.

Get Your Free Strategy
Anup Ain

About the Author

I’m Anup Ain, an SEO Specialist & Digital Marketing Strategist.

Comments

Popular posts from this blog

Bloggers' Passion Should Be Just Blogging

How to Use the Hybrid Prompt Template — Step-by-Step Tutorial

How to Deal With Joblessness Using Skills and Technology