Open Graph & Meta Tags Generator
Generate Open Graph and Twitter Card tags. Preview how your link will appear on social media.
<!-- Open Graph --> <meta property="og:title" content="My Website — Main Title"> <meta property="og:description" content="My website description for social media."> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com"> <meta property="og:image" content="https://example.com/og-image.jpg"> <meta property="og:site_name" content="My Site"> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Website — Main Title"> <meta name="twitter:description" content="My website description for social media."> <meta name="twitter:image" content="https://example.com/og-image.jpg">
Why use it
Control how your site looks when shared on social media
Real preview
See exactly how your link will appear before publishing.
All platforms
Facebook, LinkedIn, Twitter, WhatsApp, and Telegram in one step.
Copy-ready code
Correctly generated HTML tags. Paste into your <head> and done.
No signup
Generate and test your meta tags without creating an account.
How it works
Three steps, no hassle
Enter your page data
Fill in your page's title, description, URL, and image. These are the details users will see when your link is shared.
Choose social networks
Select whether you need Open Graph (Facebook, LinkedIn, WhatsApp), Twitter Card, or both. Customize platform-specific fields.
Copy the HTML code
Copy the generated meta tags and paste them inside your HTML <head>. Verify with Facebook Debugger or Twitter Card Validator.
FAQ
Got questions?
Open Graph Protocol is a web protocol created by Facebook (introduced at F8 2010) that lets any web page become a rich object in the social graph. By including og: meta tags in your HTML <head>, you control exactly what title, description, and image appear when someone shares your link on Facebook, LinkedIn, WhatsApp, Telegram, and most social platforms. Without these tags, platforms try to guess the content with unpredictable results.
The four basic required properties are: og:title (object title), og:type (object type: website, article, product...), og:image (preview image URL), and og:url (canonical page URL). Important optional properties: og:description, og:site_name, og:locale (e.g., en_US), og:image:width, and og:image:height (to prevent reflows during loading). For articles, og:type=article enables additional properties: article:author, article:published_time, article:section.
Facebook has the Sharing Debugger (developers.facebook.com/tools/debug) which renders exactly how your URL will appear when shared and lets you force a cache refresh. Twitter has the Card Validator (cards-dev.twitter.com/validator). LinkedIn has the Post Inspector (linkedin.com/post-inspector). For local development, tools like ngrok or localtunnel expose your localhost so external debuggers can access it. Remember platforms cache metadata — if you change tags, use the debugging tools to invalidate the cache.
The recommended dimensions by Facebook and most platforms are 1200×630 pixels (1.91:1 ratio). This resolution is sufficient for Retina displays and scales well to all preview sizes. The minimum accepted size is 200×200 px. Facebook rejects images smaller than 200×200 or larger than 8 MB. Twitter requires a minimum of 300×157 px for summary_large_image and a maximum of 4096×4096 px with a 5 MB limit. For WhatsApp, the image should be square (1:1) for group chat previews.
Open Graph (og:) is an open protocol adopted by most social platforms. Twitter Cards (twitter:) are specific to Twitter/X and offer additional types: summary, summary_large_image, app, and player. If you define og: tags, Twitter uses them as fallback when twitter: tags are absent. The recommendation is to define both sets for maximum compatibility. Key Twitter Card fields are twitter:card (card type), twitter:site (site's Twitter account), twitter:creator (author's account), and twitter:image (can differ from og:image to optimize dimensions).
Open Graph Protocol: history, Schema.org, and social media crawlers
Open Graph Protocol was introduced by Facebook at the F8 conference on April 21, 2010. The goal was to turn any web page into a first-class object in Facebook's social graph, analogous to how artist, film, and location pages already had rich data structure. The protocol was inspired by RDFa (Resource Description Framework in Attributes), an HTML extension for structured data, but simplified for mass adoption. The name and domain ogp.me were registered that same day. Since its launch, Open Graph was adopted by LinkedIn (2011), Twitter as fallback (2012), WhatsApp (2013), and virtually every relevant social and messaging platform.
The relationship between Open Graph and Schema.org is complementary but sometimes confusing. Schema.org (launched in 2011 by Google, Bing, and Yahoo) defines a structured data vocabulary for search engines, implemented via JSON-LD (recommended), Microdata, or RDFa. Open Graph is optimized for link previews on social networks. A page should have both: Schema.org for SEO and search Featured Snippets, and Open Graph for social sharing. Google uses og:title and og:description as secondary index signals, but JSON-LD Schema.org carries more weight. Social crawlers (facebookexternalhit, Twitterbot, LinkedInBot) only read og: tags, not JSON-LD.
Social media crawlers have important technical characteristics for developers. The user-agent 'facebookexternalhit/1.1' indicates Facebook is processing the URL to generate a preview. These crawlers do NOT execute JavaScript — they only process static server HTML. This means React/Vue/Angular apps with Client-Side Rendering (CSR) without SSR or SSG will not have correct OG metadata, since meta tags are generated dynamically on the client. The solution is Server-Side Rendering (Next.js, Nuxt), Static Site Generation, or a prerendering service (Prerender.io, rendertron) that serves pre-rendered HTML to social media bots.