đź’» Developer Tools

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.

Examples (click to try)
Social card preview
Enter image URL
EXAMPLE.COM
Title
Description

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.

Frequently Asked Questions

Where do I paste the generated Open Graph tags?
Paste the generated HTML inside the page's <head>, near the title, canonical URL and meta description. If you use a CMS or framework, put the same values into its SEO, Open Graph or social sharing fields.
Why doesn't the image preview load?
The image URL must be a publicly accessible HTTPS URL. Local files, intranet URLs, blocked hotlinks and sign-in protected images cannot be previewed by a browser or by social crawlers.
Is my title, description or URL sent to a server?
No. The Open Graph and Twitter Card HTML is generated locally in your browser. The only external request is the browser's normal attempt to display the image URL you type into the preview.