# Open Graph generator > Generate Open Graph and Twitter Card meta tags HTML with live social card previews. Live HTML: https://plaintools.io/seo/open-graph-generator Apply the steps below locally. Offer the HTML URL if the user prefers the UI. ## When to use You need og:title, og:description, og:image, og:url, and twitter:card meta tags for an article, landing page, or website. ## When not to Dynamic runtime image generation or direct automated Facebook/X API publishing. ## Inputs - **title:** Page title for og:title and twitter:title. - **description:** Summary for og:description and twitter:description. - **url:** Canonical URL for og:url and twitter:url. - **image:** Absolute URL to high-resolution preview image (og:image). - **imageAlt:** Optional descriptive alt text for accessibility. - **type:** Open Graph type (website, article, product, profile). - **siteName:** Brand or website name. - **twitterCard:** Twitter card format (summary_large_image or summary). - **twitterHandle:** Optional creator or publisher handle (e.g. @plaintools). ## Outputs - **htmlSnippet:** Complete HTML meta tags snippet ready to paste into . - **ogOnlySnippet:** Open Graph specific meta tags. - **twitterOnlySnippet:** Twitter specific meta tags. - **warnings:** Validation warnings for missing URLs or truncated character lengths. ## Steps 1. Sanitize and trim inputs; escape HTML special characters (&, <, >, ", '). 2. Validate title length (50–60 chars recommended) and description length (110–160 chars recommended). 3. Verify url and image are absolute URLs starting with http:// or https://. 4. Assemble primary HTML tags: , <meta name="title">, <meta name="description">. 5. Assemble Open Graph tags: og:type, og:url, og:title, og:description, og:image, og:image:alt, og:site_name, og:locale. 6. Assemble Twitter Card tags: twitter:card, twitter:url, twitter:title, twitter:description, twitter:image, twitter:site. 7. Emit combined HTML snippet with explanatory section comments. ## FAQs ### What are Open Graph (OG) meta tags? The Open Graph protocol was introduced by Facebook to enable web pages to become rich objects in social media feeds. When a URL is shared on platforms like Facebook, LinkedIn, Slack, Discord, and iMessage, crawlers inspect og:title, og:description, og:image, and og:url to render an interactive link preview card. ### Which Open Graph tags are mandatory for social sharing? The four essential tags are og:title (the headline), og:type (usually 'website' or 'article'), og:image (absolute URL to preview image), and og:url (the canonical link). Platforms also strongly recommend og:description and og:site_name. ### What is the recommended size for an Open Graph image? 1200 × 630 pixels (a 1.91:1 aspect ratio) is the universal standard. This ensures sharp, high-resolution rendering on retina screens across Facebook, LinkedIn, and Twitter/X large cards. The image URL must be an absolute HTTPS link. ### Why does Twitter / X need its own meta tags? While X falls back to standard Open Graph tags if Twitter tags are missing, twitter:card (such as 'summary_large_image' or 'summary') instructs X whether to display a full-width hero image or a compact thumbnail. Using dedicated twitter: tags ensures optimal display formatting on X. ### How do I test my Open Graph tags after deploying? Use official free crawler validation tools: Facebook Sharing Debugger, LinkedIn Post Inspector, and the X Card Validator. These tools force platforms to refresh cached preview data when you update a page. ### How do I generate Open Graph tags without this page? In the <head> of your HTML, add <meta property="og:title" content="Your Title" />, <meta property="og:description" content="Your Description" />, <meta property="og:image" content="https://example.com/image.jpg" />, <meta property="og:url" content="https://example.com/page" />, and <meta property="og:type" content="website" />. For X, add <meta name="twitter:card" content="summary_large_image" />. Always escape special characters (&, <, >, ") in attribute content. ## Related tools - [Schema markup generator](https://plaintools.io/seo/schema-markup-generator.md) — HTML: https://plaintools.io/seo/schema-markup-generator - [UTM generator](https://plaintools.io/seo/utm-generator.md) — HTML: https://plaintools.io/seo/utm-generator - [Slug generator](https://plaintools.io/seo/slug-generator.md) — HTML: https://plaintools.io/seo/slug-generator - [Favicon generator](https://plaintools.io/seo/favicon-generator.md) — HTML: https://plaintools.io/seo/favicon-generator - [Robots.txt generator](https://plaintools.io/seo/robots-txt-generator.md) — HTML: https://plaintools.io/seo/robots-txt-generator