Overview
Build and preview the Open Graph and Twitter meta tags a social card needs, with a live large-card preview and character-count warnings for the title and description. Everything is generated in the browser from the fields you fill in.
How It Works
Fill in the page title, site name, destination URL, image URL, and description. The card preview on the left updates live to show how a large-card platform would render the link, and the meta tag block at the bottom regenerates as you type. Amber warnings appear when the title or description falls outside recommended lengths. Copy the ready-to-paste meta tags from the output box.
Step-by-Step Usage Guide
- Enter the page title, site name, URL, image URL, and description.
- Watch the card preview update and read any length warnings.
- Adjust the copy until the title and description sit inside the recommended ranges.
- Copy the meta tags and paste them into the head of the page.
Technical Specifications & Standards
The generated block covers two conventions. The Open Graph group sets og:type website, plus og:url, og:title, og:description, og:image, and og:site_name. The Twitter group uses the name attribute for twitter:card with the summary_large_image value, plus twitter:title, twitter:description, and twitter:image. The preview warnings encode widely used length guidance: titles beyond about 60 characters and descriptions beyond about 160 characters get truncated on most platforms, and the tool also nudges you when the title is under 30 or the description under 70 characters, which usually means you are leaving recognition value unused. The preview pane is a mockup, not a fetcher: it renders your fields and a placeholder image area rather than loading the actual og:image, so a broken image URL will not show here. The recommended image size for large cards is 1200 by 630 pixels, which keeps the image sharp on high-resolution devices across platforms. This tool generates the tags; the separate previewer tool on this site loads the real image and shows platform-specific layouts.
Targeted Use Cases
- Adding share cards to a landing page before a launch.
- Fixing a link preview that renders with the wrong title or a cropped image.
- Checking title and description lengths against platform truncation before publishing.
- Generating a consistent og and twitter tag set from one set of fields.
Notes & Gotchas
- Use an og:image of at least 1200 by 630 pixels so the card is sharp on high-DPI screens.
- Aim for titles of 30 to 60 characters and descriptions of 70 to 160 characters to avoid truncation.
- Verify the tags with each platform's debugger after deploying, since scrapers cache aggressively.
- Keep og:url matching the canonical URL so share counts and previews stay consistent.
Frequently Asked Questions
Why does the preview not show my image?
This tool renders a placeholder in the image area instead of fetching the URL. Use the site's other Open Graph previewer tool to load the actual image and see platform-specific card layouts.
What image size should I use?
1200 by 630 pixels is the widely used size for large cards and matches platform guidance for sharp rendering on high-resolution displays. Keep the file reasonably compressed.
What are the length warnings based on?
On commonly observed truncation points: titles past roughly 60 characters and descriptions past roughly 160 are cut off by most card layouts. The under-length warnings flag copy that is too short to be descriptive.
Do the twitter tags use the right attribute?
Yes. Twitter card tags are conventionally written with the name attribute, and the generated markup does that, while Open Graph tags use the property attribute as their specification requires.