🔒 Privado por diseño: todo funciona localmente en tu navegador; nada se sube nunca a ningún servidor.
Escrito y mantenido por Javi Morales·Última actualización
Cómo generar tus meta tags
Rellena tu título de página, meta descripción y URL canónica bajo “Básico”, estos tres controlan tu <title>, meta descripción y etiqueta <link rel="canonical">.
Opcionalmente rellena los campos de Open Graph (título/descripción OG si son distintos de los planos, una URL de imagen, el tipo OG, y el nombre de tu sitio), estos controlan cómo se ve la página cuando se comparte en Facebook y LinkedIn.
Opcionalmente fija el tipo de tarjeta de Twitter/X y tus handles @ de sitio/creador.
Observa cómo las tarjetas de vista previa de Búsqueda de Google, Facebook, X y LinkedIn se actualizan al instante mientras escribes, y luego haz clic en Copiar HTML para obtener el bloque de etiquetas <meta> terminado.
Pega el bloque copiado directamente dentro del <head> de tu página, listo.
Por qué importan los meta tags y las vistas previas sociales
El <title> y la meta descripción de una página controlan exactamente lo que aparece en un resultado de búsqueda de Google, y las etiquetas Open Graph/Twitter Card controlan exactamente lo que aparece cuando la página se comparte como enlace en Facebook, LinkedIn, Slack, WhatsApp o X. Equivoca cualquiera de estos, un og:image que falta, un og:title obsoleto que quedó de un rediseño de página, una URL canónica que apunta a la página equivocada, y un enlace que debería verse atractivo aparece en su lugar como una caja gris en blanco sin imagen, o con el título equivocado, justo en el momento en que alguien está decidiendo si hacer clic en él.
Escribir a mano este bloque correctamente significa recordar qué etiqueta usa property="og:..." frente a name="twitter:...", qué campos recurren a qué otros campos cuando se dejan en blanco (Twitter recurriendo a Open Graph, Open Graph recurriendo a tu título/descripción planos), y acertar con el escapado de atributos HTML para cualquier título o descripción que contenga un ampersand, una comilla o un ángulo. Esta herramienta gestiona todo eso y te deja ver el resultado real (como una tarjeta de vista previa real, no solo un muro de etiquetas) antes de que pegues jamás nada en tu sitio.
Todo ocurre en tu navegador
No hay ningún viaje de ida y vuelta al servidor en ningún momento: escribir en un campo, ver la vista previa en vivo actualizarse, y generar el bloque HTML final son todo JavaScript puro que se ejecuta en tu propia pestaña del navegador. Esto importa incluso para una página que ya es pública, ya que podrías estar iterando sobre un título o descripción para una página que aún no está en vivo, o redactando texto social que no quieres que aparezca en ningún sitio antes de que esté listo.
Usos habituales
Configurar el título, descripción y etiqueta canónica de SEO de una nueva entrada de blog o página de aterrizaje.
Arreglar una vista previa de compartir social rota o ausente (el clásico problema de “caja gris en blanco” al desplegar un enlace).
Comprobar cómo se verá una página al compartirla en Slack, WhatsApp o Discord (que generalmente leen las mismas etiquetas Open Graph que Facebook).
Auditar los meta tags de una página existente copiando sus valores actuales y comprobando las vistas previas en vivo.
Generar un bloque consistente de Open Graph/Twitter Card en muchas páginas de un sitio estático.
Redondear la huella legal/SEO básica de un sitio junto con un generador de política de privacidad antes del lanzamiento.
Fijar una og:image para una entrada de blog técnica usando una captura de pantalla de código como imagen de vista previa social en lugar de un banner genérico.
Cómo funciona, en imágenes
Generador de Meta Tags en pleno proceso: un formulario agrupado en secciones Core, Open Graph y Twitter (título de página, meta descripción y URL canónica, y después los campos de OG que recurren a ellos si se dejan vacíos), con las etiquetas generadas listas para pegar.Dónde ocurre el trabajo en una página de SysFenix que no tiene ninguna entrada de archivo: la herramienta llega como JavaScript normal dentro de la página, calcula la respuesta en tu propio dispositivo y la muestra ahí mismo, de modo que la subida, la cola y el registro en servidor que necesita una herramienta online típica no ocurren nunca.
Preguntas frecuentes
¿Se sube alguno de los datos de mi página a un servidor?
No. Cada campo que escribes, las tarjetas de vista previa en vivo, y el bloque de etiquetas `<meta>` generado se construyen todos dentro de tu pestaña del navegador con JavaScript puro, nada sobre tu título, descripción, URL o dirección de imagen se envía jamás a ningún sitio. Incluso un título o descripción para una página sin publicar que aún no quieres indexada nunca sale de tu dispositivo.
¿Hay un límite en cuánto texto puedo introducir?
No hay un límite estricto de caracteres impuesto por la propia herramienta, pero las plataformas reales sí imponen sus propios límites prácticos, Google trunca títulos/descripciones largos en los resultados de búsqueda (ve la vista previa en vivo de Google y el verificador de ancho de píxeles SERP dedicado para una comprobación más precisa), y las plataformas sociales recortan títulos/descripciones muy largos en sus propias maquetaciones de tarjeta. Mantén los títulos por debajo de unos 60 caracteres y las descripciones por debajo de unos 155-160 caracteres para los resultados más seguros en todas partes.
¿Por qué se rellenaron automáticamente og:title y twitter:title cuando solo escribí un título de página?
Si dejas en blanco el campo "Título OG", recurre automáticamente a tu título de página plano (y lo mismo para que "Descripción OG" recurra a tu meta descripción), esto coincide con cómo la mayoría de sitios reales configuran las cosas, ya que el título para compartir en redes sociales suele ser idéntico al título de la página. Rellena los campos de título/descripción OG solo cuando quieras que las plataformas sociales muestren un texto distinto al de tu etiqueta `<title>` y meta descripción.
¿Por qué las tarjetas de vista previa de X (Twitter) y Facebook muestran exactamente el mismo título, descripción e imagen?
Esta herramienta mantiene deliberadamente una única ruta compartida de título/descripción/imagen que alimenta tanto las etiquetas Open Graph como Twitter Card en lugar de cuatro conjuntos de campos totalmente independientes, ya que Twitter/X en sí mismo ya recurre a leer tus etiquetas `og:title`/`og:description`/`og:image` siempre que sus propios equivalentes `twitter:*` faltan, en la práctica los dos son casi siempre idénticos de todas formas. Si realmente necesitas un texto específico para Twitter, edita directamente las líneas `twitter:title`/`twitter:description`/`twitter:image` en el HTML generado antes de pegarlo en tu página.
¿Qué tan precisas son las tarjetas de vista previa, se verán exactamente así en Google, Facebook, X y LinkedIn?
Son aproximaciones cercanas y honestas, no clones pixel-perfect de las plataformas reales, que rediseñan periódicamente sus maquetaciones de tarjeta y no publican especificaciones exactas. La vista previa de Google reutiliza la misma estimación aproximada y abiertamente revelada de truncado por ancho de píxel que la herramienta dedicada de verificación de píxeles SERP de este sitio; las tarjetas de Facebook/X/LinkedIn se construyen según la maquetación general bien conocida de cada plataforma (imagen, nombre del sitio, título, descripción) para que puedas comprobar la sensatez de tus etiquetas antes de publicar, pero siempre verifica lo real con la propia herramienta oficial de depuración de cada plataforma (Sharing Debugger de Facebook, Card Validator de X, Post Inspector de LinkedIn) una vez que tu página esté en vivo.
¿Tengo que rellenar todos los campos?
No, normalmente solo se necesitan el título de página y la meta descripción para un SEO básico. Todo lo demás (URL canónica, imagen OG, nombre del sitio, handles de Twitter) es opcional, y el bloque HTML generado simplemente omite cualquier línea `<meta>` cuyo valor subyacente esté en blanco en lugar de emitir una etiqueta vacía o engañosa.
¿Qué URL debería usar para la imagen OG, subo una imagen aquí?
No subes nada aquí, pega la URL completa, pública y absoluta (empezando por `https://`) de una imagen ya alojada en algún sitio accesible por los propios rastreadores de Facebook/X/LinkedIn, por ejemplo una imagen ya en tu sitio en vivo o una CDN. Una ruta relativa como `/images/photo.jpg` no funcionará una vez pegada en el `<head>` de una página real, ya que los rastreadores sociales obtienen la imagen de un servidor completamente distinto al que sirve tu HTML. Si aún no tienes una imagen, genera una primero con un generador de imagen OG, alójala en algún sitio público, y luego pega esa URL aquí.
¿Cuál es la diferencia entre los tipos de tarjeta de Twitter "summary" y "summary large image"?
"Summary con imagen grande" muestra una imagen de vista previa grande y ancha encima del título/descripción, la opción más llamativa y más usada, y el valor por defecto de esta herramienta. "Summary" muestra una pequeña miniatura cuadrada junto al texto en su lugar, que algunos sitios prefieren para un aspecto más compacto en timelines con mucha actividad. Ambas leen el mismo `twitter:image` subyacente; solo cambia el valor de `twitter:card` y el renderizado propio de X.
Formatea, valida y minifica JSON en tu navegador, imprime bonito, o consigue una línea/columna clara ante una entrada inválida. Nada sale de tu dispositivo.
