Cómo funcionan las meta etiquetas y las tarjetas para compartir
Qué genera esta herramienta
Las meta etiquetas son las señales invisibles del <head> de una página que indican a los buscadores y a las redes sociales cómo titular, describir y mostrar tu contenido. Esta herramienta convierte un formulario breve en ese marcado: escribes un título, una descripción, palabras clave, el autor y una URL canónica, y genera las etiquetas <meta> y <link> correspondientes junto con sus equivalentes de Open Graph y Twitter Card. El HTML resultante se actualiza mientras escribes, y una vista previa muestra cómo se leería el resultado en una página de búsqueda.
Cuándo conviene usarla
Resulta útil siempre que una página necesite rellenar a mano su sección head: un sitio estático, una landing, una plantilla de CMS o un correo que se abre como página web. También sirve para revisar una página existente: pegas el título y la descripción previstos y los contadores de caracteres avisan de lo que Google podría recortar. Los equipos de marketing la usan para decidir la imagen, el titular y el resumen que aparecen cuando alguien pega el enlace en Slack, X, LinkedIn o Facebook, en lugar de dejar que esas plataformas lo adivinen.
Ejemplo: título, descripción y etiquetas og:
Imagina que introduces el título «Tazas de cerámica artesanales», una descripción de una frase y la URL de una imagen. La salida incluye <title>Tazas de cerámica artesanales</title>, <meta name="description" content="..."> y un <link> canónico. Además, añade og:title, og:description, og:image y og:type para Open Graph, y twitter:card, twitter:title y twitter:image para la Twitter Card. Si la imagen de OG mide 1200x630 píxeles, obtendrás la tarjeta grande que muestran la mayoría de las redes.
Longitud recomendada y casos límite
Mantén los títulos por debajo de unos 60 caracteres y las descripciones por debajo de 160 para que los buscadores los muestren completos; los contadores integrados avisan cuando te pasas. Las directivas de robots —index/noindex, follow/nofollow, además de noarchive y nosnippet— se agrupan en una sola etiqueta <meta name="robots"> que controla el rastreo y el almacenamiento en caché. La URL canónica debe apuntar a la versión preferida de la página para evitar problemas de contenido duplicado. Cuando el marcado esté listo, copia todo el bloque y pégalo justo antes de la etiqueta </head> de cierre.