Spoold Logo
Back to Blog
8 min read
SEO

Open Graph Meta Tags Checklist for Better Link Previews

Use this Open Graph checklist to improve social previews, Slack and Discord shares, Twitter/X cards, title tags, descriptions, canonical URLs, and preview images.

By Spoold Editorial TeamReviewed for tool accuracy
Editorial Policy
Open HTML PreviewMore guides
#Open Graph#Meta Tags#SEO#Social Preview#HTML

Good link previews need complete, absolute metadata

Open Graph tags control how pages appear when shared in Slack, Discord, LinkedIn, Facebook, and many other surfaces. A good preview needs a clear title, useful description, canonical URL, and an absolute image URL that works for crawlers without login or JavaScript.

When to use this guide

Blog posts

Create consistent previews for tutorials, guides, changelogs, and SEO content.

Tool pages

Make each tool share with a clear title, direct URL, and relevant preview image.

Product launches

Avoid cropped or missing images when links are posted in social feeds and team chat.

Debugging previews

Check whether a platform is reading stale metadata or blocked image URLs.

Open Graph checklist

1

Set the page basics

Include title, description, and a canonical URL for the page.
2

Add Open Graph tags

Add og:title, og:description, og:url, og:type, and og:image.
3

Use absolute image URLs

Social crawlers need a full URL such as https://example.com/og/tool.png, not a relative path.
4

Preview before publishing

Render the page HTML in HTML Preview and inspect the final tags before sharing the URL.

Essential meta tags

TaskInputResult
Titleog:titleShort, page-specific title for the preview card.
Descriptionog:descriptionOne or two sentences that describe the page value.
Imageog:imageAbsolute URL to a crawlable preview image.
URLog:urlCanonical share URL without temporary tracking parameters.

Which metadata matters most for previews?

Preview systems do not read a page like a human. They fetch metadata, pick an image, cache the result, and crop it differently depending on the platform.

Unique title

Each important page should have a title that identifies the specific tool, article, or resource being shared.

Useful description

The description should explain the page result, not repeat the navigation label. This improves previews in chat and search snippets.

Absolute image URL

Use a full https:// URL for og:image. Relative paths often fail in crawlers and third-party preview services.

Stable canonical URL

Use the canonical share URL without temporary tracking parameters, session IDs, or draft-preview paths.

Open Graph publishing checklist

  • 1Confirm title, description, canonical URL, og:url, and og:image are page-specific.
  • 2Use an OG image that still reads when cropped in Slack, LinkedIn, Discord, and messaging apps.
  • 3Make sure the image URL is public, fast, and not blocked by authentication or robots rules.
  • 4Refresh platform preview caches after changing metadata on an already-shared URL.

Copyable Open Graph template

<title>JSON Formatter and Validator | Spoold</title>
<meta name="description" content="Format, validate, edit, and inspect JSON in your browser." />
<link rel="canonical" href="https://spoold.com/tools/json/format" />

<meta property="og:title" content="JSON Formatter and Validator" />
<meta property="og:description" content="Format, validate, edit, and inspect JSON in your browser." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://spoold.com/tools/json/format" />
<meta property="og:image" content="https://spoold.com/og/json-formatter.png" />

<meta name="twitter:card" content="summary_large_image" />

Image checklist

  • Use an image that represents the actual page, tool, or article.
  • Keep important text away from the edges because platforms crop differently.
  • Make sure crawlers can access the image without cookies or auth.
  • Use a stable URL so cached previews do not break after deployment.

Related workflow

This guide is designed to pair with the tool linked below. Use the article to understand the workflow, then open the tool with a real sample so you can validate the result instead of copying a generic answer from a search result.

Common mistakes to avoid

  • Using the same generic title and description on every page.
  • Providing a relative image URL instead of an absolute URL.
  • Blocking preview images with authentication, robots rules, or hotlink protection.
  • Forgetting to update cached previews after changing metadata.

FAQ

Do Open Graph tags directly improve Google rankings?

Not directly. They improve sharing, click quality, and consistency across social and chat platforms.

Should every page have a unique OG image?

Important pages should. At minimum, tool pages and blog posts should not all share a vague generic image.

Can I use the same description for meta and Open Graph?

Yes if it reads well in search results and social previews. Keep it specific to the page.

Try it in HTML Preview

Paste a real sample, run the workflow, and use the guide above as a checklist while you inspect the output.
Open HTML Preview

Related Tools

HTML Preview

Try it

URL Parser

Try it

QR Code

Try it

Related Articles

SEO

How to Read a Lighthouse Report

Understand Lighthouse performance, accessibility, best practices, SEO, Core Web Vitals, audits, opportunities, diagnostics, and what to fix first.

Read more
Web Development

Preview HTML Without a Server: Live HTML, CSS & JavaScript Testing

Test HTML, CSS, and JavaScript in the browser with no server. Live rendering, responsive preview, sandboxed iframe, and shareable links. Free online HTML preview tool for prototyping and debugging.

Read more

Try It Now

Put this guide into practice with our free tools. No sign-up required.

Open HTML Preview
Open Graph Meta Tags Checklist for Better Link Previews | Blog | Spoold