Developer

Meta tags generator

Title, description, Open Graph and Twitter, with a social card preview.

  • Instant
  • Free
  • Private (processed locally)
  • No sign-up
Social preview
Generated tags

A link that begs to be clicked

Without meta tags, a shared link only shows a bare URL. With them, it becomes a card with image, title and description — far more engaging. This tool generates them and shows you the rendering before you publish.

  1. Fill in the fields

    Title, description, page and image URL, site name.

  2. Check the preview

    The social card updates live, just like on the networks.

  3. Copy the tags

    Paste them into the <head> of your HTML page.

The generated tags

TagRole
<title> / descriptionTitle and summary for search engines
og:title / og:descriptionText shown by Facebook, LinkedIn, etc.
og:imageCard image (1200 × 630 recommended)
twitter:cardCard format on X (large image or summary)

Everything is computed in your browser. Remember to use absolute URLs for the image, otherwise networks won’t be able to load it.

Frequently asked questions

What is Open Graph?

Open Graph is a protocol created by Facebook that describes a web page through “og:” tags. When a link is shared, networks read these tags to show a title, description and image instead of a raw URL.

What size for the share image?

For a “large image” card, aim for 1200 × 630 pixels (1.91:1 ratio). This is the size recommended by Facebook, LinkedIn and X. Use an absolute URL (https://…) because networks don’t follow relative paths.

Do I need Twitter tags on top of Open Graph?

X (Twitter) reads Open Graph first, but “twitter:card” is still useful to pick the format (large image or summary). The other twitter:* tags fall back to og: when missing. Including them avoids nasty surprises.

How long should the title and description be?

Aim for about 60 characters for the title and 110 to 160 for the description. Beyond that, networks and engines truncate the text. The live preview shows you the real rendering instantly.