Open Graph Tag Generator & Social Previewer (2026)
Free Open Graph meta tag generator and social media link previewer. Control how your URLs look when shared on Facebook, LinkedIn, Discord, Slack, and WhatsApp with instant HTML & Next.js code exports.
Open Graph Tags
Copy & paste into <head>
Fill in the fields
to generate Open Graph tags
How it works
- 1Provide your page title, meta description, canonical url, og:type, site name, and 1200x630 featured image in the workspace below.
- 2Run the tool and review the result.
- 3Copy, download, or export the valid open graph (<meta property='og:...'>) html tags and next.js app router metadata when it's ready.
Best fit
Teams and creators who want a quick, browser-based result without extra setup.
Input and output
Page title, meta description, canonical URL, og:type, site name, and 1200x630 featured image
Valid Open Graph (<meta property='og:...'>) HTML tags and Next.js App Router metadata
Common use cases
- Generate Facebook and LinkedIn rich link preview cards.
- Control link unfurling and thumbnail images across Slack and Discord.
- Format canonical URLs and prevent duplicate social share entities.
- Export structured metadata code for Next.js App Router, WordPress, and Shopify.
- Ensure social media share images meet the standard 1200x630 resolution.
Open Graph Tag Generator & Social Previewer (2026) FAQ
What is the recommended Twitter/X card image size in 2026?
The four required Open Graph tags are: (1) og:title (the page headline), (2) og:description (a 1-2 sentence summary), (3) og:image (the thumbnail URL), and (4) og:url (the canonical link). Adding og:type ('website' or 'article') and og:site_name is also strongly recommended.
What is the recommended Open Graph image size?
The ideal image resolution for Open Graph tags across Facebook, LinkedIn, Discord, and Slack is 1200 x 630 pixels (a 1.91:1 aspect ratio). Images must be at least 600 x 315 pixels to display as full-width banner previews.
How do I clear cached Open Graph previews on Facebook or LinkedIn?
Social networks cache link previews for days. To force an immediate update: for Facebook, enter your URL into the official Facebook Sharing Debugger and click 'Scrape Again'. For LinkedIn, use the LinkedIn Post Inspector to purge stale cached metadata.
What is the difference between Open Graph tags and Twitter Cards?
Open Graph (og:*) is an open protocol created by Facebook and adopted by LinkedIn, Slack, Discord, and WhatsApp. Twitter Cards (twitter:*) are proprietary tags for X. X can read Open Graph tags as a fallback, but requires twitter:card to display large full-width banner images.
What og:type should I use for blog posts vs homepages?
Use og:type='website' for your homepage, landing pages, and category indexes. Use og:type='article' for blog posts, news stories, and guides. You can also specify article:published_time and article:author for richer search signals.
How do I add Open Graph tags in Next.js 14 or 15?
In your Next.js page.tsx or layout.tsx, export a metadata object with the openGraph property: export const metadata = { openGraph: { title: '...', description: '...', url:'https://...', siteName: '...', images: [{ url: 'https://...', width: 1200, height: 630 }] } }.
Continue browsing
Related tools
Move laterally into adjacent workflows from the same category without leaving the shared design system or routing model.