ThisCalculator

Everyday

Blogger Open Graph: How to Add Social Share Tags

Updated · Standard formula, shown below

Blogger Open Graph: How to Add Social Share Tags

Blogger does not add Open Graph (OG) tags to your blog by default, which means when you share a post on Facebook, X (Twitter), LinkedIn, or WhatsApp, the platform may not show the right title, description, or image. You can fix this by adding a small piece of HTML code to your Blogger theme, either through the built-in Search Description and Search Image settings or by editing the template directly. This article explains what Open Graph is, how Blogger handles it, and the exact steps to make your shared links look professional.

What Is Open Graph?

Open Graph is a protocol introduced by Facebook in 2010 that lets web pages control how they appear when shared on social media. It works through meta tags in the <head> section of your HTML. The three most important tags are:

  • og:title — the headline shown in the share card
  • og:description — the text under the headline
  • og:image — the thumbnail image

Without these tags, social platforms try to guess the title from your page’s <title> tag, the description from a random paragraph, and the image from the first picture they find. That often leads to missing images, wrong text, or a generic link preview.

Why Blogger Doesn’t Have Full OG Tags by Default

Blogger is a hosted platform, and its default theme templates include only basic meta tags. The default <head> section of a standard Blogger theme contains:

  • <title> — the post title
  • <meta name='description'> — only if you fill in the search description
  • No og: tags at all

This is a common complaint among Blogger users. The platform does have a Search Description field in the post editor, but it’s not connected to Open Graph. As a result, when you share a Blogger post, Facebook and other platforms often show your blog’s name as the title and skip the image entirely.

How to Add Open Graph Tags to Blogger

There are two main methods: using the built-in settings (limited) or editing the template (full control).

Method 1: Use Blogger’s Built-in Settings (Partial Fix)

  1. Go to Blogger Dashboard → Settings → Meta Tags.
  2. Enable Search Description and write a description for your blog.
  3. Enable Search Image and upload an image (this is used as a fallback).

This only sets a site-wide description and image. It does not add per-post OG tags, so shared posts still won’t show the specific post’s title or featured image.

Method 2: Edit Your Theme Template (Recommended)

  1. Go to Theme → Edit HTML.
  2. Find the line that starts with <head> (usually near the top).
  3. Paste the following code just after that line:
<b:if cond='data:blog.metaDescription'>
  <meta property='og:description' expr:content='data:blog.metaDescription'/>
<b:else/>
  <meta property='og:description' expr:content='data:blog.pageName'/>
</b:if>
<meta property='og:title' expr:content='data:blog.pageName'/>
<meta property='og:type' content='website'/>
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>

This code uses Blogger’s built-in data tags to pull the post title, description, URL, and image. However, data:blog.postImageUrl only works if you have set a Post Image in the post editor (the icon next to the title). If you haven’t set one, the tag will be empty.

For a more robust solution, you can use a conditional to grab the first image from the post body, but that requires a more complex script. A simpler alternative is to use a third-party service like Facebook’s Sharing Debugger to manually scrape the page after you update the template.

How to Test Your Open Graph Tags

After adding the code, you need to test whether it works. The most reliable way is to use the official debugging tools from each platform:

  • Facebook / Meta: Sharing Debugger — enter your post URL and click “Scrape Again�.
  • X (Twitter): Card Validator — note that Twitter uses its own twitter:card tags, but it falls back to OG tags if those are missing.
  • LinkedIn: Post Inspector — enter your URL to see the preview.

If the image doesn’t appear, check that the image URL is absolute (starts with https://) and that the image is at least 200×200 pixels (Facebook recommends 1200×630).

Common Problems and Mistakes

  • Missing image: If you don’t set a post image, data:blog.postImageUrl is empty. Always set a featured image in the post editor.
  • Wrong title: If you use data:blog.title instead of data:blog.pageName, every share will show your blog name, not the post title.
  • Old cache: Social platforms cache the OG data. After making changes, use the debugging tools to force a re-scrape.
  • Duplicate tags: If you paste the code twice, you’ll have duplicate OG tags, which can confuse platforms. Check your template for existing OG tags before adding.
  • HTML errors: A single misplaced quote or missing slash can break the entire template. Use the “Preview� button before saving.

Open Graph vs. Twitter Cards

Twitter Cards are a separate protocol, but they can reuse OG tags. If you want a dedicated Twitter card, you can add:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" expr:content='data:blog.pageName'/>
<meta name="twitter:description" expr:content='data:blog.metaDescription'/>
<meta name="twitter:image" expr:content='data:blog.postImageUrl'/>

However, Twitter’s validator now accepts OG tags as a fallback, so most users don’t need both.

Frequently Asked Questions

Why is my Blogger post not showing an image when shared on Facebook?

The most common reason is that you haven’t set a Post Image in the Blogger editor. Open Graph requires an image URL, and if none is provided, Facebook shows a blank card. Set a featured image for every post, and then use the Sharing Debugger to refresh the cache.

Do I need to add both OG and Twitter Card tags?

No. Twitter’s validator reads OG tags as a fallback. If you add only OG tags, Twitter will use them. Adding Twitter Card tags gives you more control over the card type (e.g., summary vs. large image), but it’s optional.

Will adding OG tags slow down my blog?

No. Meta tags are tiny and have no measurable impact on page load time. The only effect is that social platforms may make an extra request to scrape your page, but that happens in the background and doesn’t affect your visitors.

Can I use a custom image for each post without setting a post image?

Yes, but it requires a more advanced template edit. You can use a conditional to extract the first image from the post body, but that’s fragile. The easiest method is to always set the post image in the editor.

Why does Facebook show the old title even after I updated the code?

Facebook caches the OG data for a period. Use the Sharing Debugger and click “Scrape Again� to force Facebook to fetch the new tags. The same applies to LinkedIn and X.

What if my blog has a custom domain? Does that matter?

No. The OG tags work the same with a custom domain. Just make sure your canonical URL (data:blog.canonicalUrl) reflects the correct domain. If you recently changed from a .blogspot.com domain, you may need to re-scrape all your old URLs.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.