vasilenko.info

Meta tag generator with preview

/en/tool/meta-tags-generator/ works Counts in the browser; our server opens the page

Enter a URL — our server opens the page and sorts its tags into fields, including ones you may have missed. Then edit them: the preview on the right immediately shows how the link appears in Google search results and a messenger card. Length is measured not only in characters but also in pixels — that is what actually determines where the line is cut off.

promoTwenty years of notes on websitesHow we did it in 2008 and what still works today.Open

Page fields

Get tags from an existing page

The server will open the page and populate the title, description, canonical, robots, all og:*, twitter:*, article:*, product:*, theme-color, and language-version fields. It will also fetch the protocol version and the list of declared icons — they are shown below in their own section. This URL is also used for canonical and og:url.

User agent

Some sites return different content to bots than to people. Load the page twice with different user-agent labels to see the differences in the fields.

What kind of page

This choice sets og:type, opens the fields needed only for this type, adds length guidelines, and changes the JSON-LD markup type.

Length is calculated in two ways at once — see the results on the right.

A search engine may show a snippet from the page instead.

Icon at the start of the line

    It is inserted into the field you used last. Google does not always show the icon, and Yandex almost never does; it is always visible in a messenger card.

    Card image

    The server will report the response code, scheme, protocol version, type, and size. We will also measure the width, height, and aspect ratio here by loading the image in your browser.

      Site, language, accounts
      For articles only
      For products only
      Technical tags

      Leave blank to omit the tag. Common robots values: index, follow, noindex, follow, noindex, nofollow, max-snippet:-1, max-image-preview:large.

      Language versions, link alternate hreflang

      Populated automatically when you load tags from a URL. Separators can be spaces, commas, or semicolons. The code x-default is also recognized.

      How it will look

      Done

        Title, characters
        Title, pixels
        Description, characters
        Description, pixels
        Lines in the tag block

        Pixels are measured using the same font and size Google uses: Arial 20 px for the title and Arial 14 px for the description. Character counts are shown because people are used to them, but line truncation depends on width.

        Ready-made tags

        head.html
        jsonld.json schema.org markup using the same fields

        Place the markup in <script type="application/ld+json"> — the tag with the script is already included in the HTML export above; a separate file contains the raw object.

        Icons and protocol

        Icons are loaded from the same URL shown above in the “Page URL” field. “Load tags” retrieves the declared list; this button checks each URL and reports whether the file is there. The root favicon is checked as well /favicon.ico: the browser requests it automatically, even when nothing is declared in the markup.

        The scan uses one request per icon. The site's shared limit is three hundred requests per hour from one address, shared by all tools.

        On-page details

        Page not loaded

        Protocol version
        Icons declared
        Without a file
        Root /favicon.ico

          The protocol version is the one used to serve the page itself. With HTTP/1.1, a dozen small files are sent in sequence; with HTTP/2 and HTTP/3, they use one connection, so an extra icon no longer costs a separate round trip to the server.

          Declared icons
          WhatURLDimensions and typeResponse

          Bulk check

          One page per line. For a URL only, we will fetch the title and description from the site. “URL; title; description” — we will count what you pasted without making network requests.

          We fetch no more than fifty URLs at a time: the site-wide limit is three hundred requests per hour from one address, shared by all tools.

          List summary

          List not checked

          Rows in list
          With issues
          Empty title
          Empty description

          The issues are the same as in the top panel: empty, longer than the guideline, wider than the Google line, or the title repeats the description.

          List rows
          URLIssuesTitleDescription
          promoCalculate ROI at the same timeCampaign payback based on spend and revenue.Open

          How to use it

          1. Paste the URL of a finished page and click “Load tags.” The fields will be filled with what is currently on the page—title, description, robots, canonical, og:*, twitter:*, article:*, product:*, theme-color, and language versions—so you edit the live data instead of entering it again.

          2. Choose the page type. It determines og:type, the set of additional tags, and the JSON-LD markup type: an article uses Article with dates and an author, while a product uses Product with a price.

          3. Switch platforms on the right. Google clips the title to the line width, X does not show a description in a large card at all, and LinkedIn never shows one—checking this before publication is cheaper than finding out afterward.

          4. Click “Check” next to the image. The server will report the response code, scheme, protocol version, type, and size; the browser will measure the width and height. You will then see whether the card will be built with or without the image.

          5. Open “Icons and protocol.” The declared list arrives with the tags; the “Check icons” button checks every URL and the root /favicon.ico and reports whether a file exists there.

          6. Get the result in the tab you need: HTML for head, a metadata object for Next.js, useHead for Nuxt, or react-helmet markup. The “Link to set” button puts the entire configuration in the URL so you can send it to someone else.

          7. For many pages, scroll down to batch checking. Check fifty URLs at a time, view a table with lengths in characters and pixels, and export CSV.

          promoBrowser task listNo account required—everything is stored on your device.Open

          Example breakdown: a page about choosing a bike

          The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.

          1. Character headroom: 60 − 45 = 15 for the title and 160 − 140 = 20 for the description. Both values are positive.

          2. Pixel headroom is calculated separately: the title is rendered in Arial 20 px, and Google’s line on a computer is about 600 px wide. The same number of characters can produce different widths, so the counter shows both measures.

          3. The “article” type sets og:type=article, opens the date and author fields, and switches JSON-LD to Article.

          4. The HTML block contains fifteen tags: charset, viewport, title, description, robots, canonical, eight Open Graph tags (including og:image:alt), and twitter:card, followed by JSON-LD markup. The tag count appears in the caption above the listing and changes with the fields.

          5. The “Check” button next to the image adds og:image:width and og:image:height to the tags once the dimensions are measured. Facebook uses them to render the card without waiting for the file to load.

          No issues: both lines fit within the character and width limits, and the URLs are complete and use https. Set the title guideline to 40, and an issue will appear along with an ellipsis in the Google card. Click “Check” next to the image, and you will see that no file exists at this URL: example.com returns an error for that request.

          Frequently asked questions

          promoAll toolsForty-four tools, all running in your browser.Open

          Related tools

          6

          UTM builder

          Builds a tagged URL and keeps your campaign list close at hand.

          Open