Generador de metaetiquetas y Open Graph gratis

Cómo funciona

Todo el ensamblaje de etiquetas y análisis de encabezado ocurre directamente en tu navegador: no interviene ningún servidor. La herramienta usa el useMemo de React para construir reactivamente cadenas HTML y la API DOMParser nativa del navegador para leer el marcado de página existente en la función de importación/auditoría.

1. 1
   La entrada del formulario impulsa el ensamblaje en vivo

   Mientras escribes, un hook useMemo reensambla de inmediato todo el bloque de etiquetas: título, meta descripción, propiedades Open Graph y atributos de Twitter Card, escapando caracteres especiales (&, <, >, ") para que la salida sea segura de pegar directamente en HTML.
2. 2
   Validación de URL mediante el constructor URL del navegador

   Cada campo de URL (URL de la página, imagen social) se valida usando el constructor URL integrado del navegador. Solo pasan las direcciones http:// o https:// bien formadas con nombres de host con puntos; los valores no válidos bloquean el botón de copiar y muestran un error en línea.
3. 3
   Importar: DOMParser lee el marcado de encabezado existente

   Si pegas HTML de <head> existente para auditarlo, la herramienta lo ejecuta mediante DOMParser en modo inerte: no se ejecuta ningún script y no se hacen solicitudes de red. Luego consulta el documento analizado en busca de selectores meta conocidos (og:title, twitter:description, enlace canónico, etc.) y prellena los campos del formulario con lo que encuentre.
4. 4
   Vistas previas en vivo de Google y tarjetas sociales

   La herramienta renderiza un resultado de búsqueda de Google con estilo y una vista previa de tarjeta Open Graph en tiempo real usando el mismo estado del formulario, así puedes ver exactamente cómo se truncarán el título y la descripción antes de copiar la salida.

Herramientas relacionadas