OGP & Meta Tag Generator
Build Open Graph, Twitter Card and description meta tags from a title, description, image and page URL. Includes a social card preview. Everything stays in your browser.
How to Use the OGP & Meta Tag Generator
Enter the page URL, title, description, image URL and site name. The tool builds copy-ready HTML for meta description, Open Graph and Twitter Card tags while the social card preview updates live.
Use it when preparing a landing page, blog post, product page or documentation page for sharing on Slack, X, Facebook, LinkedIn and other services that read Open Graph metadata. Everything is editable in one place before you paste the final tags into your page.
Worked Example
For a page at https://example.com/pricing, set the title to Example Pricing, write a short description, and add a 1200Γ630 preview image URL. The generated HTML includes og:title, og:description, og:url, og:image, twitter:card and matching Twitter fields.
Open Graph Checklist
- Title: keep it specific to the page, not only the site name.
- Description: summarize what the visitor gets from the page in one or two sentences.
- Image URL: use a public HTTPS image, ideally sized for social sharing.
- Page URL: use the canonical URL you want people and crawlers to see.
Preview and publishing limits
Use an absolute public HTTPS image URL that a social crawler can fetch without signing in. Relative paths, localhost addresses, intranet resources, and protected files will not work after sharing. To prevent an unexpected external request, this page does not fetch the typed image URL; the preview represents the image area only. The generated og:image tag still contains your URL.
The Open Graph Protocol specification describes the core properties. Each sharing service may cache metadata, crop images differently, or apply extra requirements, so verify the published URL with that serviceβs own sharing debugger.
Use the SERP Snippet Preview for search-result text, or the JSON-LD Generator for structured data.