Open Graph Generator
Fill in the fields above to generate your meta tags.
When you share a page on social platforms, Open Graph and Twitter Card tags control the title, description, and preview image that show up. This generator turns five simple inputs into a clean, ready to paste block of og: and twitter: meta tags. Everything runs in your browser, with no signup and nothing sent to a server.
How to use
- Enter the page title and a short description.
- Paste the canonical URL and the image URL (both must be absolute, starting with https://).
- Choose the type: website for a regular page, or article for a blog post or news story.
- Review the generated tag block in the results area.
- Click Copy tags and paste the block inside the head element of your page.
Examples
- Title: How to Bake Sourdough, Type: article. Output includes og:title, og:description, og:url, og:image, og:type set to article, plus twitter:card set to summary_large_image and matching twitter tags. Nine tags in total.
- A homepage with Type: website produces the same nine tags with og:type set to website, ready to drop into the page head.
- A title containing an ampersand or quotes (Tips & "Tricks") is escaped automatically so the attribute value stays valid HTML.
FAQs
- What is the difference between website and article type?
- The og:type value tells platforms how to treat the page. Use website for general pages like your homepage or a landing page, and use article for blog posts, news stories, and other dated content. It is the main thing that changes between the two outputs here.
- Why do the URL and image have to be absolute?
- Open Graph and Twitter Card consumers fetch your page from outside your site, so they cannot resolve relative paths. The canonical URL and the image URL must be full absolute URLs starting with https:// (or http://) so the crawler knows exactly where to look.
- What image size works best for the preview?
- A landscape image around 1200 by 630 pixels works well for the large summary card used by most platforms. Keep it under a few hundred kilobytes so it loads quickly when a link is shared.
- Does this also create Twitter Card tags?
- Yes. Alongside the og: tags it outputs twitter:card set to summary_large_image, plus twitter:title, twitter:description, and twitter:image, so the same preview works across both Open Graph and Twitter clients.
- Where do I paste the generated tags?
- Put the whole block inside the head element of the page, ideally near your other meta tags. In a framework like Next.js you can also map these values into the metadata or head configuration instead of pasting raw tags.
- Is my data sent anywhere?
- No. The tags are built entirely in your browser. Nothing you type is uploaded or stored, so you can safely use it for unpublished or internal pages.
Related tools
- Meta Tag GeneratorGenerate clean HTML meta tags: title, description, canonical, and robots. Get a ready to paste block with length warnings built in.
- SERP Snippet PreviewPreview how your page title and meta description may appear in search results, with live character counts and length warnings.
- UTM BuilderBuild a campaign tracking URL with utm_source, utm_medium, utm_campaign, and optional term and content. Values are encoded for you.
- Robots.txt GeneratorBuild a valid robots.txt file from simple inputs. Set user-agent rules with allow and disallow paths, add a sitemap, then copy the result.
- Meta Tag and OG Preview GeneratorGenerate title, description, Open Graph, and Twitter tags, then preview how your page looks in Google, Facebook, X, and LinkedIn.
- Keyword Density CheckerPaste text and see the most frequent words plus their density percentage. Ignore stop words and pick how many top words to show.