Generator

Meta Tags Generator

Build a complete set of HTML meta tags for any page, right in your browser. Enter the title, description, canonical URL, share image, and site name, and the tool assembles the search tags, Open Graph tags for Facebook and LinkedIn, and Twitter Card tags for X. Live previews show how the link will read in Google results and unfold as a social card, so you can fine-tune the wording and image before you ship. Copy the ready-to-paste head snippet or download it as HTML — nothing you type leaves the page.

  • Generate the title, description, Open Graph, and Twitter Card tags together
  • Preview the Google result and the Facebook and X cards as you type
  • Set the canonical URL, share image, locale, theme color, and robots rule
  • Copy the head snippet or download it as HTML, entirely in your browser
tools/Meta Tags Generator
0 / 60
0 / 160
example.com
https://example.com
Your page title appears here

Your meta description appears here as a short, readable summary of the page.

Quick actions

Overview

A few fields become a complete head snippet — search, Open Graph, and Twitter Card tags in one block — with live previews that show how the page will read before you ship it.

  1. 01

    Complete head snippet

    Produce the title, meta description, canonical link, Open Graph, and Twitter Card tags in one block, ordered and grouped with comments so it pastes cleanly into the head of any page.

  2. 02

    Open Graph for rich shares

    Set og:title, og:description, og:image, og:url, og:type, og:site_name, and og:locale so Facebook, LinkedIn, Slack, and other platforms show a proper card instead of a bare link.

  3. 03

    Twitter Card support

    Choose a summary or large-image card and fill in the title, description, image, and the site and creator handles so the link renders as a card on X.

  4. 04

    Live search and social previews

    Switch between Google, Facebook, and X previews to see roughly how the title, description, domain, and image will be laid out before the page is crawled or shared.

  5. 05

    Length guidance

    Character counters on the title and description show when you are over the lengths that search engines and social cards tend to truncate, so the important words stay visible.

  6. 06

    Canonical, robots, and theme color

    Add a canonical URL to consolidate duplicate pages, switch the robots rule between index and noindex, and set a theme color for mobile browser chrome.

  7. 07

    Safe, escaped output

    Values with ampersands, angle brackets, or quotes are escaped for HTML attributes, so a title with punctuation does not break the tags or the page.

  8. 08

    Copy or download, local only

    Copy the snippet to the clipboard or download it as an HTML file. Everything runs in your browser tab and is not sent to a server by this page.

How to use

Fill in the fields on the left and the previews and snippet on the right update instantly. Adjust until the search and social cards read the way you want.

  1. 01

    Enter the page title and description, keeping an eye on the character counters.

  2. 02

    Add the canonical URL, site name, and a share image URL for rich social cards.

  3. 03

    Pick the Open Graph type and the Twitter card style that fits the page.

  4. 04

    Open Advanced to set the locale, theme color, author, keywords, handles, or a noindex rule.

  5. 05

    Switch between the Google, Facebook, and X previews to check how the link will appear.

  6. 06

    Copy the head snippet or download it as HTML, then paste it into your page head.

Details

Not every tag carries the same weight. A short, accurate title and description plus a solid share image do most of the work; the rest is fine-tuning for individual platforms.

  • Always set a clear title and description; they drive both the search snippet and the social card text.
  • Provide a share image around 1200 by 630 pixels so large-image cards render without cropping or blur.
  • Set the canonical URL to the page’s preferred address to avoid splitting signals across duplicate URLs.
  • Add og:site_name and a Twitter handle so shares are clearly attributed to your brand.
  • Use the article type for posts and the website type for landing pages and home pages.
  • Set a noindex robots rule for staging, thank-you, or thin pages you do not want in search results.

Use cases

Meta tags decide how a page looks the moment it is found or shared, which makes them matter for almost any public-facing site or app.

  1. Blog and article pages

    Give each post a tailored title, description, and share image so it reads well in search results and as a social card.

  2. Marketing landing pages

    Control exactly how a campaign URL appears when it is pasted into chat, posted on social, or surfaced in search.

  3. Product and pricing pages

    Add accurate Open Graph titles and images so shared product links show a clean card instead of a plain URL.

  4. Documentation and changelogs

    Set canonical URLs and consistent descriptions across many pages so search engines index the right version.

  5. Single-page apps

    Generate the static head tags to drop into the shell so crawlers and link unfurlers see real metadata.

  6. Quick QA of social cards

    Preview how a link will unfurl on Google, Facebook, and X before publishing, then adjust the title or image to fit.

See also

Meta tags pair naturally with the rest of a site head. To create the icons that browsers and bookmarks show, use the Favicon Generator to export an ICO and the manifest. To turn a page title into the clean URL that becomes the canonical link, run it through the Slug Generator first. When picking a theme color, check it for legibility with the Contrast Checker , and if a title or description contains special characters you want to inspect, the HTML Encoder and Decoder shows how each one is encoded.

Best practices

Strong metadata is honest, specific, and consistent. A few habits keep your search snippets and social cards accurate as a site grows.

  • Write a unique title and description for every important page rather than reusing one site-wide pair.
  • Keep titles within roughly 60 characters and descriptions within roughly 160 so they are not cut off.
  • Use an absolute https URL for the share image, since relative paths often fail to load on social platforms.
  • Match the title and description to the actual page content; misleading metadata hurts trust and click-through.
  • Re-check a page in a platform’s own debugger after launch, because some platforms cache the first version they fetch.

Limitations

The tool generates the tags; it cannot crawl your page or control how each third-party platform finally renders them.

  • The previews are approximations; each platform has its own exact layout, truncation, and image rules that change over time.
  • Adding tags does not force a re-crawl; search engines and social platforms update on their own schedule and may cache old cards.
  • The share image must be hosted at a publicly reachable URL; a local or private path will not load when the link is shared.
  • Meta keywords are largely ignored by major search engines and are included only for the rare systems that still read them.
  • Good metadata helps presentation but is not a ranking shortcut; content quality and page experience still matter most.

FAQ

Common questions about Open Graph, Twitter Cards, share images, and how these previews relate to what each platform actually renders.

What are Open Graph and Twitter Card tags?

Open Graph tags are meta tags, prefixed with og:, that tell platforms like Facebook, LinkedIn, and Slack the title, description, image, and URL to show when a link is shared. Twitter Card tags do the same for X. Together they turn a plain link into a rich card.

What image size should I use for sharing?

A 1200 by 630 pixel image is the safe choice for large-image cards across most platforms. Use an absolute https URL and keep important text away from the edges, since platforms may crop slightly differently.

Do I still need a meta description for SEO?

Yes. Search engines often use the meta description as the snippet under the title in results. A clear, accurate description that matches the page improves how the result reads and can help click-through, even though it is not a direct ranking factor.

Why does my shared link still show the old preview?

Most platforms cache the metadata the first time a link is fetched. After updating your tags, use the platform’s own sharing debugger or link inspector to force a refresh so the new title, description, and image are picked up.

What is the canonical URL for?

The canonical link tells search engines which URL is the preferred version of a page when the same content is reachable at several addresses. It consolidates ranking signals onto one URL and helps avoid duplicate-content confusion.

Is my input sent to a server?

No. The generator runs entirely in your browser tab. The values you enter, the previews, the generated snippet, and any downloaded file are not sent to a server by this page.

Related tools

Use the generator category when you need meta tags alongside favicons, slugs, IDs, placeholder text, or other site setup tasks.