Meta Tag & Open Graph Generator

Overview

Builds a complete social and SEO meta tag set from five inputs - title, description, canonical URL, OG image and author - covering the primary meta tags, the full Open Graph set for Facebook and LinkedIn, and the Twitter card tags. The HTML regenerates live and copies in one block.

How It Works

Fill in the page title, description, canonical URL, OG image URL and author. The generated HTML appears in the output box immediately: a title tag plus name-based title/description/author metas, an Open Graph block (og:type website, og:url, og:title, og:description, og:image), and a Twitter block (twitter:card summary_large_image plus url, title, description and image). Click the output or the copy button to take the whole set.

Step-by-Step Usage Guide

1. Enter the page title and description, keeping them within the roughly 60 and 160 character lengths that search snippets display.
2. Set the canonical URL - the absolute, final address of the page including https://.
3. Provide an absolute OG image URL, ideally 1200x630 or larger, that is publicly reachable without authentication.
4. Copy the whole block and paste it into the page's <head>, then validate with a social card debugger before announcing the page.

Technical Specifications & Standards

The template is deliberately conventional. Primary metas use name attributes; Open Graph uses property attributes per the og: namespace that Facebook's crawler and LinkedIn's post inspector read; the Twitter block uses twitter:card summary_large_image, the large-image summary card. One fidelity note: the Twitter tags here are emitted with the property attribute, while Twitter's own documentation uses name - most scrapers accept both, but if a strict validator flags your twitter: tags, that discrepancy is why. What the template does not cover is deliberate: no JSON-LD structured data, no article-specific og:type (article with published_time and author tags), no twitter:site attribution, and no cache-busting for og:image - which matters because Facebook and Twitter cache aggressively, and the standard remedy is appending a version query to the image URL. Character limits are worth respecting upstream: keep titles around 60 characters and descriptions around 160 so search snippets do not truncate, even though the tool imposes no limit. The image URL should be absolute, around 1200x630 pixels for summary_large_image, and publicly reachable - scrapers do not authenticate.

Targeted Use Cases

• Head-setting for a new landing page, with all three tag families consistent from one set of inputs.
• Fixing a link preview that shows an old image or stale description when shared on Slack, X or LinkedIn.
• Scaffolding meta tags for templates and static site generators, where the block becomes a parameterized partial.
• Teaching the difference between name-based metas, the Open Graph property namespace and Twitter card tags.

Notes & Gotchas

• Validate with the platform debuggers - Facebook's Sharing Debugger and X's card validator - after pasting; they also flush each platform's cache.
• Keep title and description within snippet lengths (around 60 and 160 characters); the tool does not enforce limits and neither do scrapers before truncating.
• Use an absolute, public, correctly sized OG image; relative paths and authenticated URLs produce blank previews.
• The twitter tags are emitted with property=; if a validator insists on name=, adjust after pasting - scrapers generally read both.

Frequently Asked Questions