Open Graph generator
Create social media preview tags for your pages. Configure og:title, og:description, og:image, og:url, and twitter:card, preview how links appear when shared on Facebook, LinkedIn, and X, and copy clean HTML meta tags to paste directly into your <head>.
Runs locally · No tracking · Browser-only
34 characters. Recommended: 50–60 characters.
109 characters. Recommended: 110–160 characters.
Absolute HTTPS URL.
Absolute image URL (recommended: 1200 × 630 px).
Accessibility description for screen readers.
Optional brand or creator handle.
Facebook / LinkedIn Preview
plaintools.io
Plaintools — Private Browser Tools
Fast, private utility shed where files and data never leave your browser. Zero tracking, zero server uploads.
X / Twitter Preview (summary_large_image)
Plaintools — Private Browser Tools
Fast, private utility shed where files and data never leave your browser. Zero tracking, zero server uploads.
plaintools.io
Paste the copied <meta> tags into the <head> section of your HTML document or layout component.
Also building tracking or structured URLs? Use the UTM generator, Slug generator, or Schema markup generator.
Example
Article page with summary large image card
og:title '10 Principles of Resilient Software', og:description 'Practical architecture guide...', og:image 'https://example.com/cover.jpg', og:type 'article', twitter:card 'summary_large_image'. Generates full head meta tags and social card preview.
Related: Schema markup generator, UTM generator, Slug generator, Favicon generator, Robots.txt generator
FAQ
- 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.