Meta tags para buscadores y redes, con vista previa
Este generador de meta tags escribe el HTML que controla cómo aparece una página en los resultados de Google y cuando se comparte su enlace en Facebook, LinkedIn, X, Slack, Discord o WhatsApp. Rellena un título, una descripción, una URL canónica y una imagen para compartir, y obtienes las etiquetas SEO principales, las de Open Graph y las de Twitter Card, correctamente escapadas y listas para pegar en tu <code><head></code>, con vistas previas en vivo del fragmento de búsqueda y de cada tarjeta social. Pega el head de una página existente para cargar sus etiquetas y mejorarlas. Todo funciona en tu navegador.
Cómo generar meta tags
- 1Escribe un título y una descripción. Los contadores se ponen en rojo cuando es probable que Google los corte: unos 600 píxeles (≈60 caracteres) para el título y unos 160 caracteres para la descripción.
- 2Introduce la URL canónica de la página, el nombre del sitio y una URL de imagen absoluta — idealmente de 1200 × 630 píxeles — con su texto alternativo.
- 3Elige el tipo de Open Graph, el locale y el estilo de tarjeta de Twitter, y añade tus usuarios de X. Desmarca Permitir indexación en las páginas que deban quedar fuera de los resultados de búsqueda.
- 4Revisa las vistas previas de Google, Facebook, LinkedIn y X, cambia a HTML, elige qué grupos incluir y copia las etiquetas en el
<head>de tu página. - 5Para editar una página existente, haz clic en Importar y pega su HTML o su código fuente.
Las etiquetas que importan para el SEO
- <title>
- La señal on-page más importante y el titular en el que se hace clic en los resultados. Pon el tema principal al principio, que sea único en cada página y termina con la marca. Google reescribe los títulos que considera poco útiles, demasiado largos o llenos de palabras clave.
- meta description
- No es un factor de posicionamiento, pero suele usarse como fragmento bajo el título, así que influye en los clics. Resume la página en 120–160 caracteres con un motivo para visitarla.
- canonical
- <link rel="canonical"> indica la URL preferida cuando el mismo contenido está disponible en varias direcciones (parámetros de seguimiento, http y https, barras finales).
- robots
- noindex deja una página fuera de los resultados y nofollow indica a los rastreadores que no sigan sus enlaces. Index, follow es el valor predeterminado, así que la etiqueta solo se escribe si lo cambias.
- viewport & charset
- No son etiquetas SEO como tales, pero toda página las necesita: UTF-8 y un viewport adaptable son requisitos para la indexación mobile-first.
- keywords
- Google y Bing la ignoran para el posicionamiento desde hace más de una década. Inclúyela solo si la lee un buscador interno u otro sistema.
Open Graph: cómo se ven los enlaces al compartirlos
Open Graph es el protocolo que introdujo Facebook y que hoy leen casi todas las plataformas: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest y muchas más. Las etiquetas esenciales son og:title, og:description, og:image, og:url y og:type; og:site_name y og:locale afinan la tarjeta.
La imagen decide si la tarjeta funciona. Usa una URL https:// absoluta, de 1200 × 630 píxeles (proporción 1,91:1), de menos de 5 MB, en JPEG, PNG o WebP, y aleja textos y logotipos de los bordes porque cada plataforma recorta de forma distinta. Las plataformas guardan las tarjetas en caché: después de cambiar las etiquetas, actualízalas con el Sharing Debugger de Facebook, el Post Inspector de LinkedIn o compartiendo la URL con una query string.
Tarjetas de Twitter / X
X lee su propia etiqueta twitter:card para elegir el diseño — summary_large_image para una imagen a todo lo ancho, summary para una miniatura cuadrada pequeña — y twitter:site y twitter:creator para los usuarios del sitio y del autor. Para el título, la descripción y la imagen recurre a las etiquetas Open Graph, así que el generador solo escribe twitter:title, twitter:description y twitter:image cuando Open Graph está desactivado, para no duplicar marcado.
Actualmente X muestra las tarjetas de imagen grande como la imagen con el título superpuesto y el dominio debajo; las descripciones solo aparecen en las tarjetas summary en algunos clientes.
Longitud del título: caracteres frente a píxeles
Google corta los títulos por anchura, no por número de caracteres: en escritorio el límite ronda los 600 píxeles en una fuente tipo Arial de 20 píxeles, lo que equivale a unos 50–60 caracteres según las letras — "WWW" es tres veces más ancho que "iii". El contador mide el título con esa fuente en tu navegador, así que refleja tus palabras reales. Las descripciones se cortan hacia los 920 píxeles, unos 155–160 caracteres en escritorio y menos en móvil.
El corte no es una penalización — solo oculta el final del texto — pero poner las palabras importantes al principio garantiza que se vean. Asegúrate de que el título y la descripción coinciden con el contenido visible; así es más probable que Google los mantenga.
Dónde poner las etiquetas
Todas estas etiquetas van dentro del elemento <head> de la página y deben estar en el HTML que envía el servidor: los rastreadores de vistas previas no ejecutan JavaScript, así que las etiquetas añadidas con código del lado del cliente son invisibles para Facebook, LinkedIn y X. En frameworks como Next.js, Nuxt o Astro, usa sus APIs de metadatos para renderizarlas en el servidor. Cada valor de atributo se escapa como HTML, así que las comillas y los ampersands de tus títulos no pueden romper el marcado.
Combínalo con un robots.txt que deje a los rastreadores llegar a tus páginas, un sitemap XML con tus URLs canónicas y un favicon para que tu resultado muestre tu icono.
Preguntas frecuentes
- ¿Cuál es la longitud ideal del meta title y la meta description?
- Unos 50–60 caracteres (menos de ~600 píxeles) para el título y 120–160 caracteres para la descripción. Los contadores muestran ambos y se ponen en rojo cuando es probable que Google corte el texto.
- ¿Qué tamaño debe tener una imagen Open Graph?
- 1200 × 630 píxeles (1,91:1) funciona en Facebook, LinkedIn, X y las apps de mensajería. Usa una URL https absoluta, que pese menos de 5 MB, y deja el contenido clave en el centro.
- ¿Por qué la vista previa de mi enlace muestra una imagen o un título antiguos?
- Las plataformas guardan las vistas previas en caché. Usa el Sharing Debugger de Facebook o el Post Inspector de LinkedIn para volver a leer la URL; X actualiza su caché tras una semana aproximadamente, o al instante para una URL con una query string nueva.
- ¿Necesito etiquetas Open Graph y de Twitter a la vez?
- Necesitas Open Graph para la mayoría de las plataformas y al menos twitter:card para X. X recurre a og:title, og:description y og:image, así que las demás etiquetas de Twitter son opcionales si hay Open Graph.
- ¿La meta etiqueta keywords ayuda al SEO?
- No. Google y Bing la ignoran para el posicionamiento desde hace muchos años. Aquí es opcional y solo sirve si algún sistema interno la lee.
- ¿Puedo editar los meta tags de una página existente?
- Sí. Haz clic en Importar, pega el HTML de la página (el código fuente sirve) y los valores de título, descripción, canonical, Open Graph, Twitter y robots se cargan en el formulario.
- ¿Por qué mi imagen para compartir no aparece en la vista previa?
- La URL debe ser absoluta (https://…) y accesible públicamente. Algunos servidores impiden mostrar sus imágenes en otros sitios; las plataformas reales las descargan desde el servidor, así que puede que sí funcione.
- ¿Se sube algo?
- No. Las etiquetas se generan en tu navegador. Solo la imagen para compartir se carga desde la URL que introduces, para mostrarla en las vistas previas.