Generador de metaetiquetas

Qué hace

El generador de metaetiquetas escribe las etiquetas que van dentro del <head> de una página HTML: el <title>, la meta description, palabras clave y autor, una directiva robots, el enlace canónico, un color de tema, las declaraciones viewport y charset, el conjunto completo de etiquetas Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) y las etiquetas de tarjeta de X / Twitter.

Mientras escribes, muestra cómo podría verse la página como resultado de búsqueda y como tarjeta social, y revisa los fallos habituales: un título de más de unos 60 caracteres, una descripción ausente, demasiado corta o de más de unos 160 caracteres, una URL canónica relativa, una imagen sin URL absoluta o una configuración regional o un color mal escritos. Todo ocurre en tu navegador, y la vista previa no carga tu imagen a propósito, de modo que la página no hace peticiones de red.

Cómo usarlo

1. Rellena los datos de la página. Título y descripción son lo esencial; los contadores muestran su longitud frente a los límites habituales. Pulsa Ejemplo para ver un caso completo.
2. Introduce la URL canónica de la página y una imagen para compartir. Una ruta relativa como /images/cover.jpg se resuelve con la URL canónica.
3. En las opciones, elige el tipo de Open Graph (website para la mayoría de páginas, article para entradas de blog), el tamaño de la tarjeta, si los buscadores pueden indexar la página y seguir sus enlaces, y qué grupos de etiquetas incluir.
4. Lee los avisos bajo el HTML, revisa las vistas previas y copia el HTML en la plantilla de tu página.

Las opciones se guardan en la dirección de la página y el formulario en tu navegador, así que puedes volver a él o compartir un enlace con los mismos ajustes.

Ejemplo

La página de ejemplo produce etiquetas como estas (abreviado):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Los valores se escapan como HTML, así que las comillas y los ampersands de un título no rompen el marcado, y la configuración regional en-US se normaliza al formato en_US que espera Open Graph.

Consejos

• Escribe un título y una descripción únicos para cada página; los duplicados dificultan distinguir los resultados.
• Pon las palabras más importantes al principio del título, porque los títulos largos se cortan por el final.
• La URL canónica debe ser la dirección exacta que quieres indexar, con el protocolo y tu variante preferida con o sin www.
• Poner robots en noindex saca la página de los resultados, pero solo si los rastreadores pueden seguir leyéndola: no la bloquees también en robots.txt.