Which platforms use Open Graph?

Facebook, LinkedIn, Slack, Discord, and many apps read og: tags for previews.

What image size works best?

1200×630px is a common recommendation for og:image assets.

Interested in sponsoring? Reach out to discuss placements.

SEO Tools

Open Graph Tag Generator

Generate og: meta tags.

Last updated: June 2026

og:title

og:description

og:url

og:image (optional)

og:site_name (optional)

Guide

Introduction

When someone shares your link on Facebook, LinkedIn, Slack, or Discord, the preview card pulls from Open Graph meta tags — not from your visible page title or hero image unless those values are declared in og: properties. Missing or incorrect Open Graph markup produces blank previews, wrong images, or truncated titles that undermine click-through on social distribution channels.

Certoflow's Open Graph Tag Generator produces HTML meta tags for social link previews: title, description, URL, type, site name, and image. Output is copy-ready for your page <head>. Processing runs entirely in your browser — campaign URLs, unreleased product pages, and client brand assets never upload to a server. Light and dark theme support keeps the form readable during marketing launch prep.

Pair with Twitter Card Generator for X-specific tags and Meta Tags Generator for core SEO head markup.

What this tool does

The generator accepts page metadata and outputs Open Graph meta properties:

Feature	Behavior
og:title	Preview headline for social cards
og:description	Summary text below the title in previews
og:url	Canonical page URL for the shared link
og:type	Content type — default `website`, use `article` for blog posts
og:site_name	Optional site or brand name
og:image	Optional absolute URL to preview image
Output	HTML meta tags with escaped attribute values

All attribute values are HTML-escaped automatically — ampersands, quotes, and angle brackets in titles or descriptions will not break markup.

How it works

Certoflow's generateOpenGraphTags function builds each tag from input fields:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page summary." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:image" content="https://example.com/og-image.jpg" />

The property attribute distinguishes Open Graph tags from standard name meta tags. Image and site name tags are included only when values are provided.

Escape handling uses escapeHtmlAttr — the same function powering Twitter Card Generator and Meta Tags Generator. Processing is synchronous with no network calls.

Recommended og:image dimensions: 1200×630 pixels for optimal display across Facebook and LinkedIn. Resize assets with Image Resizer before entering the image URL.

Real-world examples

Product launch announcement

Marketing prepares a launch blog post. Enter title, description, production URL, and hero image URL. Copy tags into the Next.js metadata.openGraph object or paste directly into static HTML head.

Documentation site pages

Developer docs shared in Slack need readable previews. Set og:site_name to product name, og:type to website, og:image to branded docs banner. Consistent previews improve internal link sharing adoption.

Client agency deliverable

Agency delivers Open Graph markup spreadsheet per page. Client validates tag syntax by regenerating in Certoflow and comparing output character-for-character before CMS import.

Article vs website type

Blog posts use og:type of article for platforms that adjust card layout. Landing pages use website. Certoflow accepts custom type strings via the type field.

Reusing SERP copy for social

Title and description validated with Meta Title Length Checker and Meta Description Checker transfer directly to Open Graph fields — consistent messaging across search and social.

Common mistakes

Using relative image URLs. og:image requires an absolute URL with protocol. https://example.com/image.jpg, not /image.jpg.

Omitting og:url. Platforms may infer incorrect URLs from share parameters. Always set the canonical page URL.

Image smaller than 200×200 pixels. Facebook rejects or crops tiny images. Target 1200×630 for reliable large card display.

Duplicate conflicting tags. Multiple og:title values from CMS plugins and manual tags confuse parsers. Output one consistent set from Certoflow.

Forgetting to update tags after title changes. Stale og:title persists in platform caches after page edits. Refresh tags and use platform debugger tools to re-scrape.

Only setting Open Graph without Twitter Card tags. X often reads og: tags but explicit twitter: tags provide better control. Generate both.

Related tools

Within the SEO category:

Twitter Card Generator — X-specific card markup
Meta Tags Generator — core title and description meta tags
SERP Snippet Preview — validate copy before social tag generation

Cross-category links:

HTML Formatter — beautify pasted head markup
Image Resizer — prepare 1200×630 og:image assets
Image Dimension Checker — verify image dimensions before deployment

Browse all SEO Tools at /seo.

FAQ

Is my page metadata sent to a server?

No. Tag generation runs locally in JavaScript. Input values never leave your device.

Which platforms read Open Graph tags?

Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage link previews, and many others use og: properties.

What image size should I use?

1200×630 pixels is the common recommendation. Minimum viable sizes vary by platform — larger is safer.

Do I need separate tags for each social network?

Open Graph tags cover most platforms. Add Twitter Card Generator output for X-specific control.

Can I use this offline?

Yes, after the page loads.

Does Certoflow support dark mode?

Yes. Toggle light and dark themes for comfortable editing.

Should og:title match the HTML title tag?

They can match but need not. Social titles sometimes benefit from shorter, punchier copy than SERP titles.

How do I test previews after deployment?

Use Facebook Sharing Debugger, LinkedIn Post Inspector, or Slack unfurl in a private channel.

Are attribute values escaped automatically?

Yes. Quotes and ampersands in titles and descriptions are HTML-escaped in output.

Does this include Twitter Card tags?

No. Use Twitter Card Generator for twitter: properties.

Frequently Asked Questions

Which platforms use Open Graph?: Facebook, LinkedIn, Slack, Discord, and many apps read og: tags for previews.
What image size works best?: 1200×630px is a common recommendation for og:image assets.

Related tools that complement this workflow.