Lite Tools

Meta Tag Generator

Fill in the title, description and page URL to build meta snippets live, with a Google search preview.

0 / 60 characters

0 / 160 characters

Major search engines ignore keywords. Fill it in only when you need it.

Fill in the title or description above and the snippets will appear here in real time.

How to use

  1. Fill in the page title and description. Keep the title within 60 characters and the description within 160. The counter under each box updates as you type, and a yellow notice appears when you go over.
  2. Add the page URL. It drives the canonical link and og:url, plus the address line in the SERP preview. An invalid address raises a red notice and its lines leave the output.
  3. Complete the optional fields: image URL, site name, og:locale, robots and keywords. Anything left empty emits no empty tags.
  4. Check the SERP preview and the three snippets to confirm the copy length and the card style.
  5. Use Copy on each block for one section, or Copy All to take the three sections at once. Then paste them into the head of your page.

FAQ

Where should the generated code go?
Paste everything into the head section of the page, between head and /head. Search engines read the Basic Meta, while social platforms read Open Graph and Twitter Card to build share cards. All three can live together.
Why is og:image missing from the output?
When the image URL is empty, the og:image and twitter:image lines are omitted entirely, so no empty tags ship. Both lines appear automatically once a full image address is provided.
What happens if the title goes past 60 characters?
The page still generates the code, but a yellow notice appears. Engines usually truncate long titles, so put the important words in the first half or tighten the wording before copying.
What does an invalid URL do to the output?
A red notice explains the exact problem, and the canonical and og:url lines step out of the output while the rest stays untouched. Both lines return once the address is fixed.

How to use

  1. Fill in the title and description

    Keep the title within 60 characters and the description within 160. The counter under each box updates as you type, and a yellow notice appears past the limit.

  2. Add the page URL

    The URL drives the canonical link and og:url, plus the address line in the preview. Only full http(s) addresses pass validation, and invalid ones leave the output first.

  3. Complete the social fields

    Image URL, site name and og:locale shape the share card. Leave the image empty and the og:image and twitter:image lines are omitted instead of emitted with empty values.

  4. Copy the snippets

    Each block has its own copy button, and Copy All takes the three sections at once. Paste everything into the head of your page and check the result in a share debugger.

About this tool

Meta tags live in the head of a page. Readers never see them, yet search engines and social platforms rely on them to decide how the page is presented. The title and description map directly to the blue headline and the gray snippet in search results. The og tags control the card shown when a link is shared in chat apps or on social platforms. The twitter tags serve platforms in the X family. Each layer works on its own. When a layer is missing, the platform fetches the page and guesses, and the guess rarely matches what you planned.

This page keeps the three sections in one form. The inputs on the left drive the output on the right, and every change lands immediately without a submit button. Counters sit under the title and description boxes. A yellow notice appears past 60 and 160 characters, the thresholds where search results usually cut off. URLs must be full http or https addresses. A red notice marks invalid ones, and the canonical and og:url lines step out of the output until the address is fixed. Escaping runs locally, so nothing you type leaves the browser.

How it works

Four characters must be escaped inside HTML attribute values. The ampersand becomes & because a bare one starts an entity reference. Angle brackets would break the tag structure itself. A double quote would end a value like content="..." early. Titles and descriptions meet these characters more often than expected: quoted phrases, code snippets and comparison signs all show up. The order matters as much as the list. Escaping the ampersand first keeps already generated entities from being doubled, so < never turns into &lt;. This page follows that order, and the copied output goes straight into any HTML document.

The 60 and 160 figures come from display width. A desktop headline gets roughly 600 pixels, which fits about 60 latin characters, while wider CJK glyphs cut that to around 30. Descriptions usually show two lines, about 160 characters. Going over is not an error. The tail may be replaced with an ellipsis, so front-load what matters. The twitter:card tag takes summary and summary_large_image in this tool. The first puts a small square image beside the text and suits articles and tool pages. The second puts a large image on top and suits visual work. Both rely on twitter:image, and a missing image degrades the card to plain text.

When to use it

  1. Before a page ships

    Generate the full tag set here before an article, product page or campaign goes live. The SERP preview shows roughly what the search result will look like, so truncation and missing descriptions get fixed during publishing instead of after indexing. Pasting the finished block into the head takes one step.

  2. Improving search display

    When a search result truncates the title or rewrites the description, come back here, adjust the copy and regenerate. State what the page solves in the first half of the description and keep the main keywords early. That raises the chance the engine shows your text as written.

  3. Consistent share cards

    Teams running several landing pages can fix one site name, one og:locale and one image size, then generate page by page. Cards look uniform across platforms, the brand reads as one product, and differences between pages are easier to spot when something renders wrong.

Tips & tricks

  • Write the description first. One fluent sentence about what the page offers beats a list of keywords.
  • Use absolute image URLs starting with http or https. Relative paths often fail to load on share cards.
  • After publishing, paste the link into each platform's share debugger to confirm the card renders as expected.

Things to watch

  • The limit is not a wall

    Passing 60 characters risks truncation, not a penalty. Squeezing the title until the sentence breaks hurts clicks more than the cut does. Keep the title readable first and trim later, treating the yellow notice as a reminder rather than a stop sign.

  • Absolute image URLs only

    A relative og:image path fails on most platforms and the card falls back to plain text. Use a full http or https address, and prefer images around 1200 pixels wide, since smaller ones get blurred or rejected by some platforms.

  • Do not stuff keywords

    Major search engines ignore the keywords tag, so stuffing dozens of terms buys nothing and leaves an obvious optimization footprint. Put the effort into the description instead. One fluent sentence about the value of the page outperforms any keyword list.

Related Tools