Skip to content

Meta Tag Generator

Fill in a title, description and image once and get every tag a shared link actually needs — not just the search-engine basics, but the Open Graph and Twitter Card tags that control how the page looks when someone pastes it into Slack, X or LinkedIn.

  • Title, description, canonical, robots
  • Full Open Graph tag set
  • Twitter Card, auto-corrected without an image
  • Missing-field and length validation
  • Copy the whole block at once

Generator

Built in your browser, never sent anywhere

    Fill in title, description and URL to generate the tag block.

    How to generate meta tags for a page

    1. 01

      Enter the basics

      Title, description and the page's absolute URL are required — everything else builds on these three.

    2. 02

      Add a share image

      An Open Graph image is what shows up when the link is pasted into Slack, X, LinkedIn or iMessage. Without one, most platforms fall back to a plain text card.

    3. 03

      Fix anything flagged

      Missing fields block generation; length and image warnings do not, but are worth reading before you publish.

    4. 04

      Copy the block into <head>

      Paste the whole thing into the page's <head>, above anything that might duplicate one of these tags.

    Why the search tags and the social tags are different systems#

    <title> and <meta name="description"> are read by search engine crawlers. Open Graph tags (og:*) are read by Facebook, LinkedIn, Slack, Discord and most other link-preview generators. Twitter Card tags (twitter:*) are read specifically by X. These are three separate systems that happen to overlap in purpose, which is why a page missing Open Graph tags can rank fine in Google and still show up as a bare, imageless link when someone shares it in a group chat.

    Twitter/X does fall back to Open Graph tags if twitter:card is missing, which is why some sites skip Twitter tags entirely — but setting them explicitly is what lets you choose summary_large_image over the smaller default, and costs four extra lines.

    The Open Graph image is worth the most effort#

    Of everything on this page, the share image is what most visibly separates a link that gets clicked from one that gets scrolled past. 1200×630px is the size platforms actually expect — this exact site's own share image is built to that spec for that reason. Smaller images get upscaled and look soft; a very different aspect ratio gets cropped unpredictably by whichever platform is rendering it.

    og:image needs to be an absolute URL. A relative path like /og.png works fine for a normal page load, but the bots that fetch link previews request the image directly with no browser context to resolve a relative path against, so it silently fails.

    What this tool does not replace#

    It does not show you the pixel-accurate truncation of your title and description the way Google actually renders them in search results — that is a genuinely different, more precise calculation the SERP Snippet Preview tool on this site exists specifically for. Use that one to fine-tune length; use this one to make sure nothing is missing from the full tag set.

    It also does not fetch or render your actual page to verify the tags are correctly placed — paste the generated block into your <head>, then check the result with a real link-preview debugger (X's Card Validator, Facebook's Sharing Debugger, or simply pasting the URL into Slack) before trusting it.

    Frequently asked questions

    What size should the Open Graph image be?

    1200×630 pixels is the size most platforms — Facebook, LinkedIn, Slack, X — actually expect and reserve space for before the image loads. Smaller images get stretched and look blurry; a very different aspect ratio gets cropped in ways you do not control.

    Do I need both Open Graph and Twitter Card tags?

    X falls back to Open Graph tags if Twitter Card tags are absent, so it is not strictly required. Setting twitter:card explicitly is what lets you request the larger summary_large_image layout instead of the smaller default, for the cost of four extra tags.

    Why does my shared link show no image even though I set one?

    The most common cause is a relative image URL. The bots that generate link previews fetch the image directly, with no page context to resolve a relative path against — the URL has to be absolute, including https://.

    Is this different from the SERP Snippet Preview tool?

    Yes — this generates the complete tag set, including Open Graph and Twitter Card tags for social sharing. SERP Snippet Preview does one thing this tool does not: shows the pixel-accurate truncation of your title and description exactly as Google renders them. Use both together.

    What does noindex without nofollow actually do?

    It tells Google not to show this page in search results, but still to crawl and follow the links on it. It is an unusual but valid combination — useful for a page you want to keep out of search while still passing link equity through it.

    Can I generate tags automatically from an existing page URL?

    No — this tool has no backend and cannot fetch a live page to read its current tags. You fill in the title, description and image yourself, which also means nothing about your site is ever requested by this tool.

    Is any of this sent to a server to generate?

    No. The tag block is assembled entirely in your browser using JavaScript. Nothing you enter is transmitted, logged or stored.

    Related tools