¿Qué son las meta tags y las etiquetas Open Graph?
Las meta tags son líneas cortas de HTML en el <head> de una página que la describen para las máquinas, no para las personas. Los buscadores leen el <title> y la meta description para los resultados de búsqueda. Las apps sociales y de mensajería leen las etiquetas Open Graph (og:title, og:description, og:image) para crear la tarjeta de vista previa que ves cuando alguien comparte una URL, y X también lee sus propias etiquetas twitter:.
Un generador de meta tags las escribe todas a partir de unos pocos campos, para que no tengas que recordar la sintaxis exacta. Este además muestra cómo se verá el enlace en siete plataformas y puede revisar el HTML de una página existente para encontrar etiquetas que faltan o están mal.
Cómo generar meta tags y revisar las vistas previas de enlaces
Generar etiquetas
- Título de la página. El contador muestra los caracteres y el ancho aproximado en píxeles frente al límite de unos 580 px de Google en escritorio, con un aviso cuando es probable que se corte o es demasiado corto.
- Descripción. El contador avisa por encima de 160 caracteres y por debajo de 70.
- URL de la página (se usa para el enlace canonical y para
og:url), URL de la imagen para compartir (1200 x 630, https absoluta) y Texto alternativo de la imagen. - Nombre del sitio y Tipo: website, article, product, profile, video.other, music.song o book.
- Tipo de tarjeta de X (Imagen grande o Cuadrado pequeño) y tu Usuario de X.
- Color del tema, Configuración regional (p. ej.
en_US,en_IN,hi_IN; para español,es_ESoes_MX) y Robots (index/noindex, follow/nofollow). - Revisa las Vistas previas del enlace a la derecha. Usa los chips para ver Todos o solo Google, Facebook, X, LinkedIn, WhatsApp, Slack o iMessage.
- Haz clic en Copiar etiquetas y pega el bloque en el
<head>de tu página.
Comprobar mi HTML
- Abre tu página publicada, mira el código fuente (Ctrl+U, o Cmd+Option+U en Mac), cópialo todo y pégalo en la pestaña Comprobar mi HTML. Prueba un ejemplo te enseña cómo funciona.
- Lee la puntuación (“x de y comprobaciones superadas”) y la lista: cada etiqueta aparece como Encontrado, Comprobar o Falta, con una solución corta.
- Las vistas previas pasan a mostrar lo que mostraría la página que pegaste. Haz clic en Editar estas etiquetas en el generador para cargarlas en el formulario, corregirlas y copiar un bloque limpio.
Referencia de meta tags: longitudes y tamaños
| Etiqueta | La usa | Pauta |
|---|---|---|
<title> | Google, pestaña del navegador, alternativa al compartir | Unos 50-60 caracteres; Google corta por ancho (unos 580 px en escritorio) |
meta name="description" | Fragmento de Google, alternativa al compartir | Unos 120-155 caracteres; Google puede reescribirla |
link rel="canonical" | Buscadores | La URL principal de la página, absoluta |
og:title, og:description | Facebook, LinkedIn, WhatsApp, Slack, iMessage y la mayoría de las apps | Igual que el título y la descripción, salvo que quieras una versión específica para compartir |
og:image | Todas las vistas previas de enlaces | 1200 x 630 px (1,91:1), JPG o PNG, URL https absoluta, que pese poco (unos cientos de KB cargan rápido) |
og:image:alt | Lectores de pantalla en algunas apps | Una descripción corta de la imagen |
og:type, og:site_name, og:locale | Apps sociales | Normalmente website o article; el nombre de tu marca; p. ej. en_US |
twitter:card | X | summary_large_image para una tarjeta ancha, summary para un cuadrado pequeño |
meta name="robots" | Buscadores | Déjalo en index, follow salvo que la página deba quedar fuera de los resultados |
meta name="theme-color" | Navegadores móviles | Tiñe la barra del navegador en algunos móviles |
El bloque generado también incluye meta charset y meta viewport, que toda página necesita. Los límites y las reglas de visualización de las plataformas cambian, así que toma los recuentos de caracteres como pautas al momento de escribir esto.
Quién necesita un generador de meta tags
- Webs de pequeños negocios hechas a mano o en un hosting sencillo, donde nadie añadió etiquetas para compartir y los enlaces aparecen como URL sin más en WhatsApp.
- Blogueros que escriben un título y una imagen pensados para compartir en cada artículo.
- Desarrolladores que quieren un bloque head correcto y listo para copiar para una landing page o un proyecto personal.
- Profesionales del marketing que revisan una página de campaña antes de enviar un email o lanzar un anuncio, para que la vista previa no salga con la imagen equivocada.
- Creadores que lanzan la página de un curso o producto y quieren que se vea bien cuando sus fans la comparten en Stories de Instagram, X o LinkedIn.
Consejos y errores comunes con las meta tags
- Usa URL de imagen https absolutas.
/images/og.jpgohttp://suelen fallar; el comprobador marca los dos casos. - Deja el texto importante en el centro de la imagen. WhatsApp y algunas apps la recortan a un cuadrado o una miniatura más pequeña. Crea una con el generador de imágenes OG.
- Escribe un título y una descripción únicos para cada página. Si se repiten en toda la web, todos los resultados parecen iguales.
- Pon la palabra clave principal al principio del título, pero escribe para personas; los títulos llenos de palabras clave acaban reescritos.
- No dejes noindex activado por error después del lanzamiento; el comprobador avisa cuando lo encuentra.
- Cuenta con la caché. Después de cambiar las etiquetas, las plataformas pueden mostrar la vista previa antigua durante un tiempo. Facebook y LinkedIn tienen sus propias herramientas de depuración para actualizarla; las demás se actualizan con el tiempo.
- Revisa la longitud de las descripciones con el contador de caracteres cuando escribas muchas a la vez.
Generador frente a depuradores de plataformas y plugins de CMS
El Depurador de contenido compartido de Facebook, el Post Inspector de LinkedIn y herramientas parecidas leen tu página publicada y muestran exactamente lo que ve esa plataforma, y pueden actualizar su caché. Úsalas después de publicar. Solo cubren su propia plataforma y necesitan que la página esté online.
Los plugins de SEO para WordPress y otros CMS escriben estas etiquetas automáticamente, y son la mejor opción si usas esos sistemas. Este generador queda en medio: funciona antes de que la página esté publicada, muestra siete vistas previas una junto a otra y te da HTML simple para cualquier web, incluidas las páginas hechas a mano y los hostings estáticos.
Cómo funciona: no se descarga ni se sube nada
Las etiquetas y las vistas previas se crean en tu navegador. El comprobador analiza el HTML que pegas y nunca hace peticiones a tu web, así que también funciona con páginas de pruebas protegidas con contraseña. No se envía nada a Biolinko. La única petición externa es la propia imagen para compartir, que tu navegador carga desde la URL que escribes para mostrarla en las vistas previas.
Las vistas previas de enlaces y tu link in bio
La URL de tu link in bio es probablemente el enlace que más compartes: en bios, DM, firmas de email y WhatsApp. Una página de Biolinko como biolinko.me/yourname define su propio título, descripción e imagen para compartir a partir de tu perfil, así que se ve bien en todas partes sin tocar código. Mira el link in bio para pequeños negocios, o crea tu página gratis.
Actualizado el 8 de octubre de 2026