Qué son las meta tags
Las meta tags son etiquetas invisibles que viven dentro del <head> de una página y le cuentan a Google, a Facebook y a X (Twitter) de qué trata tu contenido. El navegador no las dibuja, pero los buscadores y las redes sociales las leen para decidir qué título mostrar en los resultados y qué tarjeta enseñar cuando alguien comparte tu enlace.
Escribirlas a mano es tedioso y fácil de romper: basta una comilla mal puesta en el título para que el atributo se corte a la mitad. Este generador toma tus datos desde un formulario y produce el bloque completo (SEO clásico, Open Graph y Twitter Card) con todos los caracteres escapados de forma segura, listo para copiar y pegar.
Cómo usar el generador
- Escribe el título y la descripción. Los contadores te avisan si te pasas de los límites recomendados.
- Añade la URL canónica, la imagen para redes y el autor (todos opcionales).
- Elige el tipo de contenido (
og:type) y el estilo de tarjeta de Twitter. - Copia el bloque generado y pégalo dentro del
<head>de tu HTML.
Todo ocurre en tu navegador: ni tus textos ni tus URLs salen de tu equipo.
Las tres capas de etiquetas
El bloque combina tres familias que cumplen funciones distintas. Conviene mantenerlas coherentes entre sí (mismo título, misma descripción) para no confundir a los robots.
| Capa | Etiquetas clave | Quién la lee |
|---|---|---|
| SEO básico | title, meta description, link canonical | Google, Bing |
| Open Graph | og:title, og:description, og:image, og:url, og:type | Facebook, WhatsApp, LinkedIn |
| Twitter Card | twitter:card, twitter:title, twitter:description, twitter:image | X (Twitter) |
Longitudes recomendadas
- Título: hasta 60 caracteres. Google recorta los resultados alrededor de ese punto y tu título aparecería con puntos suspensivos.
- Descripción: hasta 160 caracteres. Es el texto gris bajo el enlace en los resultados; si es más largo, el buscador lo trunca.
Son guías, no leyes: un título de 62 caracteres no te penaliza, pero corres el riesgo de que se corte la parte importante.
Ejemplo resuelto
Supón una entrada de blog con estos datos:
- Título:
Café & Té: la guía "definitiva"(31 caracteres) - Descripción:
Aprende a preparar café y té en casa con métodos sencillos.(59 caracteres) - URL:
https://ejemplo.com/cafe-y-te - Imagen:
https://ejemplo.com/img/cafe.jpg - Autor:
María López, tipoarticle, tarjeta de imagen grande
Fíjate en que el título tiene un & y unas comillas dobles. El generador los convierte en & y " para que no rompan el HTML. El bloque resultante es:
<title>Café & Té: la guía "definitiva"</title>
<meta name="description" content="Aprende a preparar café y té en casa con métodos sencillos." />
<meta name="author" content="María López" />
<link rel="canonical" href="https://ejemplo.com/cafe-y-te" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:title" content="Café & Té: la guía "definitiva"" />
<meta property="og:description" content="Aprende a preparar café y té en casa con métodos sencillos." />
<meta property="og:url" content="https://ejemplo.com/cafe-y-te" />
<meta property="og:image" content="https://ejemplo.com/img/cafe.jpg" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Café & Té: la guía "definitiva"" />
<meta name="twitter:description" content="Aprende a preparar café y té en casa con métodos sencillos." />
<meta name="twitter:image" content="https://ejemplo.com/img/cafe.jpg" />Copia ese bloque tal cual dentro de tu <head> y tu página quedará lista para buscadores y redes.
Preguntas frecuentes
¿Por qué se escapan las comillas y el signo &?
Porque los valores viajan dentro de atributos delimitados por comillas dobles. Si tu título contiene una comilla doble sin escapar, el navegador cree que el atributo termina ahí y el resto se interpreta mal. Convertir " en ", & en & y los signos < > en < > garantiza que el texto se lea como texto y no como código.
¿Necesito de verdad las etiquetas Open Graph y Twitter?
Si te importa cómo se ve tu enlace al compartirlo, sí. Sin og:image ni og:title, redes como WhatsApp o LinkedIn muestran una vista pobre o sin imagen. Twitter puede reutilizar las Open Graph, pero declarar twitter:card te da control sobre si la tarjeta lleva imagen grande o resumen compacto.
¿Qué tamaño debe tener la imagen og:image?
La recomendación estándar es 1200 × 630 píxeles (proporción 1,91:1) para la tarjeta de imagen grande. Usa una URL absoluta y accesible públicamente; las rutas relativas no funcionan porque las redes acceden desde sus propios servidores.
¿Para qué sirve la etiqueta canonical?
link rel="canonical" le dice al buscador cuál es la URL oficial de un contenido cuando existen varias versiones (con parámetros, con y sin barra final, etc.). Así evitas que Google reparta la relevancia entre duplicados y consolidas todo en una sola dirección.
¿El título de la pestaña y el og:title deben ser iguales?
Pueden serlo, y esta herramienta los mantiene iguales por defecto para simplificar. Aun así, algunos editores prefieren un og:title más llamativo para redes y un title más optimizado para búsqueda. Si es tu caso, edita el bloque a mano tras copiarlo.