What is the difference between Open Graph tags and Twitter Card tags?

Open Graph (`og:*`) tags are read by Facebook, LinkedIn, Slack, and most other platforms that render link previews. Twitter Card (`twitter:*`) tags are read specifically by Twitter/X and let you control the card layout independently, though they typically mirror the Open Graph values.

Why does my social preview still show old data after I updated the tags?

Most platforms cache link previews aggressively. Use Facebook's Sharing Debugger or Twitter's Card Validator to force a re-scrape after you deploy the updated tags.

What image size should I use for og:image?

A minimum of 1200×630px is recommended for a crisp, full-width card on most platforms. Use an absolute URL (including `https://`), not a relative path.

Do I need a Twitter handle to generate Twitter Card tags?

No. The core Twitter Card tags (`twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`) work without one. The `twitter:site` tag, which attributes the card to your account, is only added if you fill in the handle field.

Is the generated snippet safe to paste directly into my HTML?

Yes. Any value that lands inside an attribute (like the title or description) is HTML-escaped, so characters like `&`, ` `, and `"` cannot break out of the attribute or inject markup.

What should I use for og:locale?

Use a language-region code such as `en_US`, `en_GB`, or `vi_VN`. It defaults to `en_US` if left blank.

Meta Tag Generator Online — Open Graph & Twitter Card Free

Meta Tag & Open Graph Preview Generator

A meta tag generator that builds the full set of SEO and Open Graph tags — title, description, canonical link, Open Graph, and Twitter Card meta — from a simple form, then renders a live Google search-result mockup and a social share card so you can see exactly how a link will look before you publish it. Everything updates as you type, values are HTML-escaped automatically, and the finished snippet is ready to paste straight into your page's <head>. Runs entirely in your browser, so nothing you type is sent to a server.

Features

Live head snippet
Generates `<title>`, description, canonical link, Open Graph, and Twitter Card tags as you type.
Google search preview
Mocks up how the title and description will look in a Google search result, with truncated text.
Social card preview
Shows a Twitter/Facebook-style share card with the OG image, title, description, and domain.
Safe by default
Attribute values are HTML-escaped automatically so quotes and angle brackets never break the markup.

How to generate Open Graph and meta tags

Build a complete set of SEO and social meta tags in a few steps.

Fill in the basicsEnter the page title, meta description, and canonical URL.
Add the OG imagePaste the absolute URL of the image used for social share cards.
Set site detailsAdd the site name, an optional Twitter @handle, and the locale (defaults to en_US).
Check the previewsReview the Google search mockup and the social card to confirm the title and description read well when truncated.
Copy the snippetClick Copy and paste the generated tags into the `<head>` of your page.

Examples

Generate tags for a blog post

Input

Title: "10 Tips for Faster Websites" · Description: "Practical performance tips for busy developers." · URL: https://example.com/blog/faster-websites

Output

<title>10 Tips for Faster Websites</title>
<meta name="description" content="Practical performance tips for busy developers.">
<link rel="canonical" href="https://example.com/blog/faster-websites">
<meta property="og:title" content="10 Tips for Faster Websites">
<meta property="og:description" content="Practical performance tips for busy developers.">
<meta property="og:url" content="https://example.com/blog/faster-websites">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">

og:image, og:site_name, and twitter:site are included too once those fields are filled in.

Frequently Asked Questions

What is the difference between Open Graph tags and Twitter Card tags?: Open Graph (`og:*`) tags are read by Facebook, LinkedIn, Slack, and most other platforms that render link previews. Twitter Card (`twitter:*`) tags are read specifically by Twitter/X and let you control the card layout independently, though they typically mirror the Open Graph values.
Why does my social preview still show old data after I updated the tags?: Most platforms cache link previews aggressively. Use Facebook's Sharing Debugger or Twitter's Card Validator to force a re-scrape after you deploy the updated tags.
What image size should I use for og:image?: A minimum of 1200×630px is recommended for a crisp, full-width card on most platforms. Use an absolute URL (including `https://`), not a relative path.
Do I need a Twitter handle to generate Twitter Card tags?: No. The core Twitter Card tags (`twitter:card`, `twitter:title`, `twitter:description`, `twitter:image`) work without one. The `twitter:site` tag, which attributes the card to your account, is only added if you fill in the handle field.
Is the generated snippet safe to paste directly into my HTML?: Yes. Any value that lands inside an attribute (like the title or description) is HTML-escaped, so characters like `&`, `<`, `>`, and `"` cannot break out of the attribute or inject markup.
What should I use for og:locale?: Use a language-region code such as `en_US`, `en_GB`, or `vi_VN`. It defaults to `en_US` if left blank.

Features

Live head snippet

Google search preview

Social card preview

Safe by default

How to generate Open Graph and meta tags

Examples

Generate tags for a blog post

Frequently Asked Questions