Generador de etiquetas meta y Open Graph

Escribe las etiquetas que deciden cómo se ve tu página en los resultados de búsqueda y cuando alguien la comparte, con contadores que avisan antes de que el título se corte y una vista previa que se actualiza mientras escribes.

1200×630 píxeles funciona en todas partes.

Vista previa del resultado
Etiquetas generadas
Tu archivo lo procesa tu propio navegador. No se sube, ni se guarda, ni se registra.

Dos textos cortos hacen casi todo el trabajo para que hagan clic en una página: el título que aparece en los resultados de búsqueda y la descripción que va debajo. Si los escribes demasiado largos, se cortan a mitad de frase; si los omites, el buscador se inventa algo con el contenido de tu página, normalmente mal.

Las etiquetas Open Graph hacen lo mismo con los enlaces compartidos en apps de mensajería y redes sociales. Sin ellas, un enlace compartido es una URL pelada; con ellas se convierte en una tarjeta con título, resumen e imagen. Esto genera los dos conjuntos, más los equivalentes de Twitter Card, y te muestra el resultado mientras escribes.

Cómo usar esta herramienta

  1. Escribe el título. Apunta a entre 30 y 60 caracteres: el contador se pone ámbar fuera de ese rango, porque bastante más de 60 suele acabar cortado.
  2. Escribe la descripción. Entre 70 y 160 caracteres es el rango útil; no afecta directamente al posicionamiento, pero sí mucho a que la gente haga clic.
  3. Añade la URL canónica. Le dice a los buscadores qué versión de una página es la buena, algo que importa en cuanto empiezas a usar parámetros UTM.
  4. Añade una imagen de Open Graph. 1200×630 píxeles es el tamaño estándar, y las etiquetas lo dan por supuesto.
  5. Revisa la vista previa y copia el bloque generado dentro del <head> de tu página.

Ejemplo práctico

Una ficha de producto

El título Bolsa de viaje de piel — hecha a mano en Ubrique tiene 50 caracteres, así que sobrevive entero. La descripción menciona el material, el taller y el plazo de entrega en 140 caracteres. La imagen de Open Graph es la foto del producto, así que el enlace se muestra como una tarjeta cuando un cliente se lo manda a alguien.

Arreglar un enlace que se comparte feo

Una entrada de blog compartida en un chat aparece solo como la URL. Añadir og:title, og:description y una og:image de 1200×630 la convierte en una tarjeta en condiciones. Casi todas las plataformas cachean mucho, así que usa su herramienta de depuración para forzar una actualización.

Usos habituales

  • Páginas nuevas en un sitio que no tiene etiquetas meta
  • Páginas de destino creadas para una campaña
  • Entradas de blog y artículos que se van a compartir
  • Fichas de producto donde la descripción es la que provoca los clics
  • Arreglar un enlace que se previsualiza mal en las apps de mensajería
  • Añadir noindex a páginas de pruebas o de agradecimiento

Errores frecuentes

  • El mismo título en todas las páginas — Los títulos duplicados por todo un sitio desperdician la señal más fuerte que hay dentro de la página. Cada página necesita el suyo.
  • Meter palabras clave a presión en el título — Se lee fatal para las personas, lo que reduce los clics, y los buscadores a menudo reescriben los títulos que consideran poco útiles, así que pierdes el control por completo.
  • Una imagen de Open Graph con la proporción equivocada — Cualquier cosa lejos de 1200×630 se recorta de forma impredecible. Deja los detalles importantes lejos de los bordes.
  • Confiar en la etiqueta meta keywords — Ningún buscador importante la usa desde hace más de una década. No hace nada.

Preguntas frecuentes

¿Cómo de largo debe ser un título?

Entre 30 y 60 caracteres. Los buscadores miden la anchura en píxeles y no en caracteres, así que el corte exacto varía, pero 60 es un límite de trabajo seguro. Pon las palabras distintivas al principio por si se corta.

¿La meta descripción afecta al posicionamiento?

Directamente no. Afecta al porcentaje de clics de un resultado que ya posiciona, y eso vale muchísimo. Escríbela como un anuncio: di qué le da la página al lector.

¿Por qué mi enlace sigue mostrando la imagen antigua?

Las plataformas sociales cachean los datos de Open Graph de forma muy agresiva. Usa la herramienta de depuración o el inspector de enlaces de cada plataforma para forzar una nueva lectura después de cambiar las etiquetas.

¿Necesito las etiquetas de Open Graph y las de Twitter Card?

X recurre a Open Graph cuando no encuentra las de Twitter, así que en rigor puedes omitirlas. Incluir ambas son unas pocas líneas más y te da control explícito, por eso este generador produce las dos.

¿Qué hace la etiqueta canónica?

Indica cuál es la URL de referencia de una página. Importa en cuanto el mismo contenido es accesible en varias direcciones: con y sin barra final, con parámetros UTM o con parámetros de orden y filtrado.

¿Se envía algo a un servidor?

No. Todo se genera en la página, lo que resulta útil cuando trabajas en una página que aún no se ha anunciado o en el sitio de un cliente que todavía no está publicado.

Última actualización 2026-09-15