Start a project
Free tool

Open Graph & Social Meta Tag Generator

Generate, audit, and preview Open Graph and Twitter Card tags in real time. Avoid broken link previews on social platforms and export production-ready metadata for HTML, Next.js, and Astro.

Open Graph & Social Meta Tag Generator: the tool

Quick Presets:

1. Core Metadata Details

Enter your page's live URL, headline, and summary.

44/60 chars
125/160 chars
1.91:1 ratio
Must be an absolute HTTPS URL.

2. Advanced Platform Settings

SEO & Open Graph Audit

Automated validation against social scraper requirements.

100/100★
✓Title Length (40–60 chars)
44/60 chars ✓ Optimal
✓Description Length (110–160 chars)
125/160 chars ✓ Optimal
✓Absolute HTTPS Image URL
✓ Valid secure HTTPS asset
✓Canonical Tag
✓ Defined
✓Twitter / X Creator
✓ Configured
✓Brand / Site Name
✓ Defined

Live Social Card Previews

D

DEESU

https://deesu.org

DEESU — Engineering That Outlasts the Launch

Production software built and operated by senior engineers. Android apps, high-speed web platforms, and cloud infrastructure.

Export Code

<!-- Primary Meta Tags -->
<title>DEESU — Engineering That Outlasts the Launch</title>
<meta name="title" content="DEESU — Engineering That Outlasts the Launch">
<meta name="description" content="Production software built and operated by senior engineers. Android apps, high-speed web platforms, and cloud infrastructure.">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0f6b4c">
<link rel="canonical" href="https://deesu.org">

<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://deesu.org">
<meta property="og:title" content="DEESU — Engineering That Outlasts the Launch">
<meta property="og:description" content="Production software built and operated by senior engineers. Android apps, high-speed web platforms, and cloud infrastructure.">
<meta property="og:image" content="https://deesu.org/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="DEESU">
<meta property="article:author" content="Hamza Fazal">

<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://deesu.org">
<meta name="twitter:title" content="DEESU — Engineering That Outlasts the Launch">
<meta name="twitter:description" content="Production software built and operated by senior engineers. Android apps, high-speed web platforms, and cloud infrastructure.">
<meta name="twitter:image" content="https://deesu.org/og-image.png">
<meta name="twitter:creator" content="@deesu_org">
<meta name="twitter:site" content="@deesu_org">

How it works

The Open Graph Protocol in 2026: Why Link Previews Decide Your Organic CTR

When someone shares your URL on LinkedIn, X (Twitter), Slack, iMessage, or WhatsApp, the platform's automated web crawler requests your HTML, parses the <head> tags, and renders a visual 'unfurled' card. If your Open Graph (OG) tags are missing or improperly configured, the platform falls back to a plain text link or a generic thumbnail — slashing your click-through rate by up to 70%.

While the Open Graph protocol was originally created by Facebook in 2010, it has evolved into the universal metadata standard across the entire web ecosystem. In 2026, modern platforms expect high-resolution 1200×630 pixel images, absolute HTTPS asset URLs, Twitter Card directives (twitter:card), and structured canonical URLs to prevent duplicate content indexing.

The 1200×630 Aspect Ratio Rule and Retina Pixel Density

All major social platforms (Facebook, LinkedIn, X, Discord, and Slack) have standardized on a 1.91:1 aspect ratio. The recommended resolution is 1200 × 630 pixels.

Keeping your Open Graph image at 1200×630 guarantees crisp rendering on high-DPI retina mobile screens while avoiding automatic cropping. If you supply a square image (e.g. 500×500) without specifying twitter:card: summary, platforms will stretch or center-crop the graphic, cutting off logos and headlines.

  • Always use absolute URLs (e.g. https://example.com/og.png), never relative paths (/og.png).
  • Keep total image file size under 5 MB (WhatsApp and Twitter reject files larger than 5 MB).
  • Host OG images on a reliable CDN with fast TLS handshake, since scrapers time out after 2 to 3 seconds.
  • Add og:image:width (1200) and og:image:height (630) to allow Facebook to render the card immediately on the first share without waiting for the image download to finish.

The Platform Caching Nightmare: How to Force-Purge Link Previews

One of the most frustrating issues developers face is updating their Open Graph tags, only to see the old title and broken thumbnail persist on social feeds. This happens because platforms cache link previews heavily on their edge servers for weeks at a time.

To force an immediate cache refresh after deploying changes to your website, use the official platform debugging tools:

  • Facebook & Messenger: Use the Facebook Sharing Debugger and click 'Scrape Again'.
  • LinkedIn: Paste your URL into the LinkedIn Post Inspector to clear the preview cache.
  • X (Twitter): Test in the X Card Validator or append a harmless query parameter (e.g. ?v=2) to force a fresh scrape.
  • Slack & Telegram: Send the link to the @WebpageBot on Telegram, or append a query string parameter in Slack to trigger a cache invalidation.

How Modern Frameworks Handle Open Graph (Next.js, Astro, and Vite)

In modern React and Next.js (versions 14, 15, and 16 with App Router), you no longer need to write raw HTML <meta> tags manually. Instead, you export a typed metadata object or implement dynamic generateMetadata() functions.

For dynamic Open Graph generation, libraries like @vercel/og and Satori convert JSX into SVG and PNG edge images on the fly. However, the static fallback metadata must still be declared in your root or page layout to ensure search engines and bots can inspect the page synchronously without executing client-side JavaScript.

FAQ

Questions, answered

The universal standard is 1200 × 630 pixels (an aspect ratio of 1.91:1). At this resolution, your preview card will appear sharp and uncropped across LinkedIn, X (Twitter), Facebook, Slack, Discord, and WhatsApp. Keep the file size under 5 MB (preferably under 1 MB) in PNG, WebP, or high-quality JPG format.

The four most common reasons are: 1) You used a relative image URL like '/og.png' instead of an absolute URL like 'https://example.com/og.png'; 2) The image server blocks bot user-agents (Cloudflare bot protection or hotlink blocking); 3) The platform has cached the old preview (use the LinkedIn Post Inspector to purge); 4) The image file exceeds 5 MB or is behind authentication.

The HTML <title> tag is used by Google Search SERPs and browser tabs. The og:title tag is explicitly read by social networks and messaging apps. While they often contain similar text, og:title can be more conversational or action-oriented, whereas <title> is optimized for search keyword intent and 60-character SERP truncation.

Not directly as a ranking factor, but significantly through indirect SEO signals. Social preview cards dramatically increase referral traffic, social shares, and natural backlinks. Furthermore, Google's Discover feed and mobile search crawlers parse Open Graph tags as secondary contextual signals.

'summary_large_image' displays a full-width 1200×630 banner above the tweet text, which commands maximum visual attention and achieves much higher click-through rates. 'summary' displays a small square thumbnail (144×144) to the left of the title and description.

Related reading and help

More free tools

Reply within 1 business day

Tell us what you're building.

Send the problem, not a polished brief. We'll tell you what it actually takes to ship it: stack, timeline and cost, before you commit to anything.

Start a projectBook a 20-minute callWhatsApp us