¿Qué son los meta tags y por qué molestarse en escribirlos?
Los meta tags son instrucciones invisibles en la sección `<head>` de tu página. Le dicen a Google qué título mostrar en los resultados de búsqueda, a Facebook qué imagen usar para la previsualización y al navegador en qué idioma está el contenido. Sin ellos Google elige su propio título (normalmente peor que el tuyo), y la previsualización de Facebook muestra un enlace sin imagen, el dominio en vez del título.
Aquí rellenas un formulario, activas interruptores para las secciones que necesitas (Básico, OpenGraph, Twitter Card, Article), y a la derecha ves cuatro previsualizaciones de exactamente cómo se verá tu enlace en resultados de Google, en Facebook, en X (Twitter) y en LinkedIn. Copias el bloque HTML terminado y lo pegas entre `<head>` y `</head>` en tu página.
Título y descripción para un buscador son la optimización SEO de mejor coste-efectividad. Un par bien escrito sube el CTR un 20-50% con cero cambios al contenido de la página.
Cómo usarla
- Empieza con Básico: escribe un título (máx 60 caracteres, Google trunca los más largos) y descripción (140-160 caracteres). Esto aparece en los resultados de Google.
- Activa OpenGraph y rellena og:image (URL a una imagen 1200×630 px). Sin ella, Facebook, LinkedIn y Slack muestran una previsualización sin miniatura.
- Activa Twitter Card, elige `summary_large_image` (tarjeta grande con imagen grande). Escribe tu handle (@tu-empresa) en el campo site.
- Si la página es una entrada de blog, activa Article y rellena las fechas de publicación/modificación y autor.
- A la derecha ves previsualizaciones en vivo para 4 plataformas. Ajusta la longitud de título/descripción, comprueba avisos, copia el bloque HTML entero y pégalo en `<head>` en tu página.
Cuándo ayuda esta herramienta
Situaciones comunes donde vale la pena generar un set completo de meta tags:
- Nueva entrada de blog. Escribe un título, descripción, og:image, configura fechas de publicación/modificación y copia el bloque HTML a tu CMS (WordPress tiene campos SEO Yoast / Rank Math, Next.js tiene `generateMetadata`).
- Página de oferta de empleo. RR. HH. comparte el enlace en LinkedIn, la previsualización tiene que verse profesional. Sin og:image LinkedIn solo muestra el dominio.
- Landing de producto. La campaña publicitaria necesita previsualizaciones ordenadas en Facebook Ads. Escribe og:type=product, og:image con una foto potente, og:price (vía og:price:amount + og:price:currency).
- Auditoría SEO de cliente. Comprueba páginas clave, genera un bloque meta fresco para cada una, entrega el HTML a los developers para desplegar.
- Landing de app móvil. Antes del lanzamiento en App Store / Google Play, comprueba cómo se ve el enlace cuando alguien lo pega en iMessage o Slack.
- Sitio internacional. Para cada versión de idioma genera un bloque separado con `og:locale=es_ES` (o `en_US`) para que Facebook sepa qué versión mostrar.
Tras desplegar el código, comprueba cómo se ve con la previsualización OpenGraph. Si también generas datos estructurados (JSON-LD), usa el generador de schema JSON-LD.