Open Graph Preview
Social media preview & meta tag generator
📝 Open Graph Data
Recommended: 1200×630 pixels
🐦 Twitter Card
Warnings:
- • Title is short (16/30 min)
👁️ Preview: Facebook
example.com
My Great Article
An engaging description that encourages users to click. Ideally 155-160 characters long.
📋 Meta Tags
<meta property="og:title" content="My Great Article" /> <meta property="og:description" content="An engaging description that encourages users to click. Ideally 155-160 characters long." /> <meta property="og:image" content="https://picsum.photos/1200/630" /> <meta property="og:url" content="https://example.com/artikel" /> <meta property="og:type" content="article" /> <meta property="og:site_name" content="My Website" /> <meta property="og:locale" content="en_US" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@myhandle" /> <meta name="twitter:creator" content="@myhandle" /> <meta name="twitter:title" content="My Great Article" /> <meta name="twitter:description" content="An engaging description that encourages users to click. Ideally 155-160 characters long." /> <meta name="twitter:image" content="https://picsum.photos/1200/630" />
How to Preview Open Graph Tags
- Enter your page title, description, and image URL
- Add optional fields: URL, site name, type, locale
- See live previews for Facebook, Twitter, and LinkedIn
- Check for validation warnings and errors
- Copy the generated meta tags for your HTML
Frequently Asked Questions
What is Open Graph?
Open Graph is a protocol that controls how URLs are displayed when shared on social media. It defines the title, description, image, and other metadata shown in link previews.
What's the ideal OG image size?
The recommended size is 1200×630 pixels (1.91:1 ratio). This works well across Facebook, Twitter, and LinkedIn. Minimum recommended: 600×315 pixels.
Why doesn't my preview match what I see on Facebook?
Facebook caches OG data. Use Facebook's Sharing Debugger to clear the cache. Also ensure your image URL is absolute (starts with https://) and publicly accessible.
Do I need both OG and Twitter Card tags?
Twitter falls back to OG tags, but for best results, include both. Twitter Cards offer additional features like large image cards and app cards.
Where do I put these meta tags?
Place OG meta tags in the <head> section of your HTML, before any other content. They should be on every page you want to be shareable.
Category:
Developer Tools →Related Tools
Base64 Encoder / Decoder
Encode text or files to Base64, or decode Base64 back to its original form. Supports URL-safe Base64...
JSON Formatter & Validator
Format, validate, minify, and explore JSON data. Interactive tree view with syntax highlighting and ...
Cron Expression Generator
Build and understand cron expressions visually. Schedule tasks with human-readable explanations and ...