Meta tags generator
The right preview on Google and social
Page information
0 / 60 recommended characters
0 / 155 recommended characters
Recommended size: 1200 × 630 px, absolute https address.
Things to check
- The title is empty.
- The description is empty: Google will pick one itself.
- The canonical URL is empty.
- Without an image, shares on social networks will stand out less.
Generated code
Previews
Approximate previews: your image is not loaded (no request to a third-party site), only its host name is shown.
Google result
example.com
example.com
Page title
The page description will appear here.
Facebook / LinkedIn
example.com
Page title
The page description will appear here.
X (Twitter)
example.com
About this tool
This generator builds a page's meta tags from a simple form: title, description, canonical URL, share image, site name, locale, Open Graph type, X card type, X account and theme color. A meter compares the title length with the recommended 60 characters, and the description length with the suggested range of 50 to 155 characters.
A checklist flags common mistakes such as a relative or non-https URL, a missing image, or a badly formatted X handle or locale. The output is available as HTML tags for the head or as a Next.js metadata object, with a separate viewport export for the theme color. Previews give a rough idea of how the page will look on Google, Facebook or LinkedIn, and X.
How to use it
- Fill in the "Page information": "Page title", "Description", "Canonical URL" and "Share image URL".
- Add the "Site name", "Language (locale)", "Open Graph type", "X card type" and "X account" if you need them.
- Fix anything listed under "Things to check" and review the "Previews".
- In "Generated code", pick the "HTML" or "Next.js (metadata)" tab, then click "Copy".
Frequently asked questions
How long should the title and description be?
The tool recommends at most 60 characters for the title and 50 to 155 characters for the description. Past those limits Google often truncates the text in search results. The meters turn amber or red when you fall outside the range.
Does the Next.js code work with the App Router?
Yes. The Next.js tab outputs a metadata export typed as Metadata, with alternates.canonical, openGraph and twitter. If you set a theme color, it goes into a separate viewport export, because Next.js no longer accepts it inside metadata.
Does the tool load my image or crawl my site?
No. The previews show only the image's host name without downloading it, and no request is sent to the site you enter. Everything is computed in your browser from what you type into the form.
What size should the share image be?
The tool suggests a 1200 × 630 px image served over https at an absolute address. A relative or plain http URL triggers a warning, since social networks need a full address to fetch the image.