How to Add Open Graph Tags to a Blogger Website

To add Open Graph tags to Blogger, edit the theme HTML, put the tags inside the document’s <head>, save, and inspect the rendered page source. A simple setup can use Blogger’s page title and current page URL plus a stable image URL. Post-specific images and descriptions need theme-aware template logic: Blogger exposes post data, but there is no single verified snippet that works unchanged in every theme.

This guide is in English. The title’s “in Hindi” describes the search topic; the steps and code below are in English. Adding tags supplies metadata for link previews, but does not guarantee that every social network will display it exactly as expected.

1. Back up the theme and open its HTML

1. Open your Blogger dashboard and select the blog.
2. Under My theme, use the theme backup option to save a copy before editing. This is a practical precaution.
3. Go to Theme > More > Edit HTML.
4. Search the template for <head and for existing og: properties. Themes may already output Open Graph metadata.

Blogger documents the Edit HTML route and saving changes in its theme design help. Blogger also warns that added code and third-party widgets are used at the author’s risk.

2. Understand the tags to add

Open Graph metadata belongs in the page’s HTML head. The protocol requires these four properties for each page:

• og:title: the title for the shared page.
• og:type: the kind of object, such as website or article.
• og:image: an absolute URL for a representative image.
• og:url: the canonical URL for the page.

og:description and og:site_name are optional, generally recommended properties. When an image is supplied, the protocol says to include og:image:alt. See the Open Graph protocol documentation for the property definitions and structured image fields.

3. Add a basic Blogger template example

Inside the existing <head>, add a single set of tags. Replace the example image URL with a stable, publicly accessible image that represents your blog or page:

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta property='og:type' content='website'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta property='og:image' content='https://example.com/path/to/share-image.jpg'/>
<meta property='og:image:alt' content='A representative image for this page'/>

This is an adaptable example, not a universal theme patch. Blogger’s data-tag documentation lists pageTitle and url as available values. Confirm that your selected theme accepts those expressions and emits the intended values in the rendered page. The protocol describes og:description but the cited Blogger data references do not establish a globally available description expression, so do not paste an unverified expression such as data:blog.metaDescription.

Choosing the object type

The sample uses website as a basic site-wide value. For an individual post, article may be a more fitting type. Blogger’s data-tag reference documents post title and permalink within the Blog Posts data, but the exact conditional and scope depend on the template. Change the type only where your theme can reliably emit the right value for that page.

4. Choose a fixed or page-specific image

A fixed image URL is straightforward and can serve as a fallback across the blog. It is less tailored to individual posts. A page-specific image can better represent a post, but depends on theme-specific access to that post’s data and image. Do not assume a universal dynamic og:image expression: verify the selected theme’s data model and inspect the output for both the homepage and a post.

Use an absolute HTTPS URL that remains available to visitors and sharing services. Provide meaningful alt text with og:image:alt. The Open Graph protocol also defines image metadata such as secure URL, MIME type, width, and height; add these only when you know the corresponding values. The cited sources do not establish one image size that is universal across social platforms.

5. Save and verify the rendered HTML

1. Save the theme in Blogger.
2. Open the blog homepage and a representative post in a browser.
3. View each page’s source and search for og:title, og:type, og:image, and og:url.
4. Check that each value is rendered correctly: the intended title, the correct page URL, and a working image URL.
5. Check that the tags are inside <head> and that there is only one intended set of each property.

Template expressions are evaluated by Blogger, so the source of the rendered page is the useful check; seeing the expression in the theme editor alone does not prove it emitted the desired value.

6. Keep search description settings separate

Blogger’s search description is a separate setting under Settings > Meta tags > Enable search description. Blogger describes it as a blog summary that can help users choose the blog in search results. The reviewed Blogger help does not say this setting generates Open Graph tags. Set it if useful for search-result descriptions, but verify Open Graph output independently.

Common problems and fixes

Symptom	Likely cause	What to check
No preview metadata in page source	Tags were placed outside <head>, changes were not saved, or the wrong theme was edited.	Reopen the active theme editor, confirm the tags are inside the head, save, and inspect the rendered source again.
The literal Blogger expression appears in the output	The expression is unsupported in that location or theme.	Check Blogger’s documented data tags and the theme’s structure. Use the rendered HTML as the authority and remove expressions that do not resolve.
A different title or URL appears	The value is not page-aware in the current theme, or another tag supplies a conflicting value.	Inspect all Open Graph tags in the head and verify homepage and post output separately.
Two images or titles seem to compete	The theme already emits Open Graph tags, or the new set duplicates them.	Search the template and rendered source for every og: property. The protocol gives preference to the first tag from top to bottom when values conflict; retain one intentional value per property.
The image URL is present but the image is unavailable	The URL is not public, is misspelled, redirects unexpectedly, or the resource is no longer hosted.	Open the exact absolute image URL in a browser and confirm it loads without authentication.
The search description changed but the share metadata did not	Blogger search-description settings and Open Graph tags serve separate purposes.	Keep the search setting as needed and verify the Open Graph properties in rendered HTML.
A social post still shows an old preview	The sharing service may be showing previously retrieved data.	First confirm the current page source is correct. The sources here do not establish a platform’s cache refresh behavior, so check that platform’s current tools or documentation for its refresh process.

Reliability and maintenance checklist

• Keep a backup of the theme before changing template code.
• Use one intentional set of tags and check the rendered homepage and post pages after theme changes.
• Use a stable image URL and page-appropriate title and canonical URL.
• When changing themes, repeat the source inspection; template data and existing metadata can differ.
• Do not treat the presence of tags as a promise about how a particular social network renders or refreshes a preview.

Or skip the browser setup

For capturing a rendered page as an image, ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a screenshot or PDF; the request below captures the Stripe homepage as WebP. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.

FAQ

Do Open Graph tags improve search ranking?

The cited Open Graph and Blogger sources describe page metadata and Blogger’s separate search-description setting; they do not establish a search-ranking benefit.

Can I use the same image for every Blogger page?

Yes, a stable fixed image is the simpler fallback. A post-specific image is more representative when your theme can emit it correctly.

Does enabling Blogger search description add og:description?

The reviewed Blogger help does not make that claim. Inspect the rendered source and add a description tag only with a verified template value.

Will every social network show the same preview?

There is no such guarantee in the cited protocol or Blogger documentation. Check the rendered tags and consult the relevant platform’s current preview behavior.

Sources

• Blogger Help: Change the design of your blog
• Blogger Help: Page elements tags for layouts
• Blogger Help: Layouts Data Tags
• Blogger Help: Manage your blog’s settings
• Open Graph protocol: Basic Metadata and structured properties