SEO and Open Graph meta tags generator
Fill it in once and get the meta tags block ready for HTML, Next.js or Nuxt, seeing how your link will look in search engines and social networks.
Import from a page's HTML
Paste the <head> (or the whole page, Ctrl+U in the browser) and the fields will be filled in.
MACM
https://miguelacm.es/tools
Herramientas web gratis para desarrolladores | MACM
Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y…
Title 0 / 580 px · description 0 / 920 px
Approximation of each platform's design; networks change their layout and may cache the card.
- Title length is good (51 characters).
- Description length is good (145 characters).
<title>Herramientas web gratis para desarrolladores | MACM</title> <meta name="description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <link rel="canonical" href="https://miguelacm.es/tools"> <meta property="og:type" content="website"> <meta property="og:title" content="Herramientas web gratis para desarrolladores | MACM"> <meta property="og:description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <meta property="og:url" content="https://miguelacm.es/tools"> <meta property="og:site_name" content="MACM"> <meta property="og:locale" content="es_ES"> <meta property="og:image" content="https://miguelacm.es/opengraph-image"> <meta property="og:image:alt" content="Catálogo de herramientas de MACM"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Herramientas web gratis para desarrolladores | MACM"> <meta name="twitter:description" content="Más de 170 herramientas online gratuitas que funcionan en tu navegador: JSON, PDF, imágenes, audio y ciberseguridad. Sin registro y sin anuncios."> <meta name="twitter:image" content="https://miguelacm.es/opengraph-image"> <meta name="twitter:image:alt" content="Catálogo de herramientas de MACM"> <meta name="twitter:site" content="@miguelacm">
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
Meta tags decide how your page appears on Google and which card shows up when the link is shared on X, WhatsApp or LinkedIn, but writing them by hand is easy to get wrong: a relative og:image nobody can load, an hreflang with an underscore or a description Google cuts in half. This generator gathers every tag in one form, measures title and description in pixels like the search engine, previews the card on six platforms and warns about the most common mistakes. The result is ready for plain HTML, the Next.js Metadata API or Nuxt useSeoMeta, and you can also import the tags from a page you already have.
Features
- ✓Title, description, canonical, robots, theme-color, favicon and apple-touch-icon
- ✓Full Open Graph with image, dimensions, alt text and article data
- ✓Twitter Cards summary and summary_large_image with site and author accounts
- ✓hreflang with x-default for multilingual sites
- ✓Previews for Google, X, Facebook and LinkedIn, WhatsApp, Discord and Slack
- ✓Title and description length measured in pixels, the way Google truncates them
- ✓Export to HTML, Next.js Metadata object (checked against its types) and Nuxt useSeoMeta
- ✓Imports tags from an existing page and flags errors: relative URLs, image ratio, hreflang or dates
How do I generate a page's meta tags?
- 1
Fill in or import
Enter title, description, URL and image, or import the tags by pasting a page's HTML.
- 2
Complete social and languages
Add X accounts, content type, article data and versions in other languages.
- 3
Review the previews
Check how it looks on Google and each network and fix the warnings.
- 4
Copy the code
Choose HTML, Next.js or Nuxt and paste the result into your project.
Frequently asked questions
How long should the title and description be?
Google truncates by pixels, not characters: the title is cut around 580 px (about 55-60 characters) and the description around 920 px (about 150-160 characters). The tool measures the real width with the same font.
What size should the Open Graph image be?
1200 × 630 pixels, a 1.91:1 ratio, works well on Facebook, LinkedIn, X and WhatsApp. The URL must be absolute and public; stating width and height helps the card render on the first share.
Why doesn't the card update when I share?
Networks cache previews. After changing the tags, force a refresh with Facebook's Sharing Debugger, LinkedIn's Post Inspector or by sharing the URL with a new parameter.
How is it used in Next.js?
Choose the Next.js output and paste the metadata object into your App Router page.tsx or layout.tsx. If you set theme-color, a viewport export is generated too, which is where Next.js expects it since version 14.
Do meta keywords still matter?
No. Google has ignored them since 2009, which is why the tool does not generate them. What matters is the title, the description as a hook in results, the canonical and the content.
Is my data or image sent anywhere?
No. Everything happens in your browser. The local image is only used for the preview and is never uploaded.
Related tools
Embed Meta Tags Generator on your site
Add Meta Tags Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/meta-tags-generator"
width="100%"
height="700"
frameborder="0"
title="Meta Tags Generator — miguelacm.es"
></iframe>