SuperDevTools
EN

Meta tag generator with Open Graph preview

Read the tags of an existing page

Paste the source code of a page's <head>, or the whole page. The code is only read: no script runs and no image is loaded.

The page

One version per line: language code, a space, then the full address. x-default marks the default version.

Link sharing (Open Graph and card)

Full https:// address. Recommended size: 1200 × 630 pixels (1.91:1 ratio).

Previews

Approximate previews: every search engine and app has its own layout, cuts text its own way and may rewrite the title or description. An image given by address is not downloaded: only its placeholder is drawn.

Search result
Large image share card
Compact share card
Preview in a messaging app

Have a look at this:

Things to check

    HTML code to paste into the <head>

    Everything happens in your browser: nothing you type or paste is sent anywhere.

    Write and check your head tags in one place

    This meta tag generator builds the lines that go in a page's <head>: title, meta description, canonical URL, robots directives, language, viewport, browser colour, favicon and the Open Graph tags that control how a shared link looks. As you type, four previews are redrawn: a search result, a large image share card, a compact card and a chat message containing the link.

    The output is escaped for you. A title such as Tips & tricks: "Pro" < £20 becomes <title>Tips &amp; tricks: "Pro" &lt; £20</title>, and inside content attributes the double quotes become &quot;.

    How to use it

    1. Fill in “Title (title tag)” and “Meta description”. Under each field a counter shows the number of characters and an approximate width in pixels.
    2. Enter the “Canonical URL”, then set “Indexing (robots)” and “Links on the page (robots)”.
    3. If your site has several language versions, fill in “Other language versions”, one per line, for example fr https://www.example.com/fr/.
    4. In the sharing section, pick the “Content type”, the “Share card” style (summary_large_image for a large picture, summary for a thumbnail), the image address and size, the site name and og:locale (for example en_GB or en_US).
    5. Read “Things to check”, click “Copy code” and paste the result into the <head> of your page.

    To start from a live page, open “Read the tags of an existing page”, paste its source code and click “Read tags”: the form fills itself in. Nothing is sent anywhere: everything stays in your browser.

    What each tag does

    The title is the clickable headline of a search result and the name of the browser tab. The meta description is the summary shown under it. Search engines truncate both by pixel width rather than by a fixed character count, and they sometimes rewrite them. The guides in the tool (roughly 50 to 60 characters for the title, 150 to 160 for the description) are ballpark figures, not an official limit. The built-in example, “Homemade Strawberry Jam: Easy 4-Step Recipe”, is 43 characters long and its description 135, so both fit comfortably.

    The canonical URL names the preferred address when the same page answers at several URLs. A robots tag set to noindex keeps a page out of search results; nofollow asks crawlers not to follow its links.

    Open Graph tags (og:title, og:description, og:image and so on) are read by social networks and messaging apps when someone pastes a link. If you leave the share title and description empty, the page title and description are reused.

    Share image and testing the preview

    A 1200 × 630 pixel image, a 1.91:1 ratio, suits large cards. Enter 600 × 315 and the tool warns that it may look blurry; enter 1080 × 1080 and it tells you the picture will be cropped. The tool never downloads that address; it only draws a placeholder. To see a real picture, use “Try an image from your device”: the file appears in the previews without leaving your computer, and its width and height are filled in.

    These previews are generic mock-ups. Once the page is live, test the link by pasting it into a private chat. Platforms often cache the old preview for a few days, and some offer a tool to refresh it.

    Frequently asked questions

    Should I add a meta keywords tag?

    No. Major search engines have ignored it for years, which is why the tool does not offer it.

    Why is my title shown differently in search results?

    Search engines may replace a title that is too long, vague or out of step with the page.

    The old preview still appears after I changed the tags. Is that normal?

    Yes. Link previews are cached by the sites that display them. Make sure the new tags are live, then wait for their crawler to come back.