ZenovayTools

Open Graph Generator

Generate Open Graph and Twitter Card meta tags for social media sharing. Live preview of how your link will appear on Facebook, Twitter, and LinkedIn.

Open Graph

0/95
0/200

Image

Recommended: 1200×630 px (1.91:1 ratio)

Twitter Card

Live Preview

Fill in the fields to see how your link will look when shared

Paste these tags inside the <head> of your HTML document.

All processing happens in your browser. No data is sent to any server. Your URLs, titles, and image links are never stored or transmitted.

How to Use Open Graph Generator

  1. 1Fill in your page title, description, and URL.
  2. 2Add an image URL for the social preview.
  3. 3Configure Twitter Card settings.
  4. 4Copy the generated meta tags to your HTML head.
Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

Related Tools

Meta Tag AnalyzerAnalyze meta tags of any webpage. Check title, description, Open Graph, Twitter cards, and get SEO recommendations.
Open Graph CheckerPreview how your page looks when shared on Facebook, Twitter, and LinkedIn. Check all OG and Twitter Card tags.
HTTP Header CheckerInspect HTTP response headers of any URL. Check security headers, caching, content type, and more.
Robots.txt ValidatorValidate and analyze your robots.txt file. Check rules, sitemaps, and common crawling issues.

Frequently Asked Questions

What is Open Graph and why does it matter?▾
Open Graph (OG) is a protocol introduced by Facebook that lets you control how your web pages appear when shared on social media platforms. By adding og:* meta tags to your HTML <head>, you define the title, description, image, and other properties that Facebook, LinkedIn, Slack, WhatsApp, Discord, and many other platforms use when generating link previews. Without OG tags, platforms make their best guess — often picking the wrong image or an unhelpful snippet of text.
Which Open Graph properties are required vs. optional?▾
Required (for a well-formed card): og:title, og:type, og:image, og:url. Recommended: og:description, og:site_name, og:locale. Optional but useful: og:image:width, og:image:height, og:image:alt. Article-specific: article:author, article:published_time, article:section. Product-specific: product:price:amount, product:price:currency. Without the four required properties, some platforms will fall back to guessing or render a plain text link.
What are the best practices for og:image?▾
Use 1200×630 pixels (aspect ratio 1.91:1) — this renders well on Facebook, LinkedIn, and Twitter. Minimum size Facebook will display prominently is 600×315px; smaller images appear as tiny thumbnails. Use PNG or JPG (not WebP, as some platforms may not support it). Keep file size under 5MB for Facebook, ideally under 1MB for fast loading. The image must be publicly accessible — not behind authentication or a firewall. Always set og:image:alt for accessibility and always set og:image:width and og:image:height so platforms can size the container before the image loads.
How do I test my Open Graph tags?▾
Use the official debugger tools: Facebook Sharing Debugger (developers.facebook.com/tools/debug/) scrapes your page and shows exactly what Facebook sees — use the "Scrape Again" button to clear its cache. LinkedIn Post Inspector (linkedin.com/post-inspector/) works similarly. Twitter Card Validator (cards-dev.twitter.com/validator) validates Twitter Card tags. For quick checks, opengraph.xyz and metatags.io show live previews. Note: all these tools cache previews, so after you deploy changes you need to force a re-scrape.
What is the difference between Twitter Card tags and Open Graph?▾
Open Graph (og:*) tags are the cross-platform standard used by Facebook, LinkedIn, Discord, Slack, and most other apps. Twitter Card (twitter:*) tags are Twitter/X's own format and give additional control over how tweets render. Twitter falls back to og:* tags if twitter:* are absent, so you can run a site with only OG tags and Twitter will still show a card — but explicit twitter:* tags let you choose a different title, description, or image specifically for Twitter. The key Twitter-specific tags are twitter:card (summary, summary_large_image), twitter:site (your @handle), and twitter:creator (the author's @handle for bylined content).