¿Eres un administrador de un sitio o un bloguero independiente que tiene dificultades para agregar el marcado de esquema a Webflow?
El marcado de esquemas, un aspecto importante del SEO técnico, desempeña un papel importante en la optimización del contenido para SEO y AEO. Ayudan a captar los usuarios y la intención de búsqueda de forma simultánea. Por lo tanto, esta guía explicará cómo agregar el marcado de esquemas a Webflow en una guía paso a paso.
Qué es Schema.org?
Schema.org, o marcado de esquema, es una forma lógica pero estructural de organizar el contenido de una página web que indica a los motores de búsqueda qué tipo de contenido ha agregado. Hay estructuras predefinidas en el esquema que informan explícitamente a los algoritmos sobre el contenido agregado al sitio web.
Hay varios tipos de marcado de esquemas que incluyen:
- Publicación de artículo o blog: Incluye el metatitulo, los metadatos, la imagen destacada, la información del autor, la fecha de publicación, las etiquetas, las categorías y mucho más para crear una entrada de blog.
- Esquema del producto: Le dice al motor de búsqueda que el contenido particular de la página web trata sobre un producto con sus ventas, calificaciones de los usuarios, precio, detalles del fabricante y más.
- Página de preguntas frecuentes: Es un esquema que consiste en contenido en formato de preguntas y respuestas que informa explícitamente al motor de búsqueda de que el contenido dado es una pregunta frecuente.
- Esquema Breadcrumb: Este tipo de esquema ayuda a los motores de búsqueda a entender la jerarquía del sitio y por dónde navegan actualmente.
- Esquema de negocios locales: Incluye detalles sobre una empresa local de tu vecindario, sus servicios, disponibilidad, valoraciones de los usuarios, reseñas, detalles de precios y más.
- Esquema del autor: Contiene información sobre un autor, su biografía, su número de artículos y detalles relacionados que ayudan a los motores de búsqueda a conocerlo mejor.
- Esquema de revisión: Es un sistema estructurado en el que los usuarios pueden compartir sus experiencias y puntos de vista sobre un producto o servicio en particular.
¿Por qué es importante el esquema en Webflow?
Si bien Schema ayuda a mejorar la visibilidad y a atraer tráfico segmentado a través de fragmentos, ofrece las siguientes ventajas:
- Resultados de búsqueda más completos: A medida que Schema ayuda a los motores de búsqueda a entender mejor tu contenido, mejora la visibilidad, aumenta el CTR y proporciona mejores resultados de búsqueda. Actualmente, incluso ayuda a la optimización de los motores de respuesta, ya que la búsqueda con IA es la nueva tendencia. Incluso atrae fragmentos destacados.
- Aumenta la visibilidad de la marca: Cuanto mayor sea la optimización y mejor tráfico atraiga, Schema mejora la visibilidad de la marca.
- Mejora las SERP: Gracias a la mejora de los clics, la visibilidad de la marca, el tráfico cualificado, los fragmentos destacados y la generación de fragmentos de IA, el esquema califica automáticamente el contenido con antelación en las SERP.
JSON-LD frente a microdatos
Tanto JSON-LD como los microdatos son formas de agregar esquemas o datos estructurados a su sitio web. Sin embargo, los microdatos se componen de datos incrustados en etiquetas HTML, que son difíciles de mantener a gran escala.
En comparación, Google recomienda añadir un esquema mediante JSON-LD que incluya información en un <script>bloque independiente <head>o <body>que sea más fácil de implementar. Además, es menos complejo y más fácil de mantener, lo que proporciona escalabilidad sin una curva de aprendizaje compleja.
Además, los microdatos están presentes en el contenido HTML y, por lo tanto, pueden ralentizar el tiempo de carga de la página web, lo que repercute negativamente en el SEO, mientras que JSON-LD no dificulta la velocidad de la página.
¿Cómo agregar datos estructurados JSON-LD en Webflow?
Hay tres formas de agregar datos estructurados en Webflow mediante la incrustación de código personalizado, mediante el CMS de Webflow y el esquema dinámico, o mediante herramientas y complementos de terceros. ¡Vamos a discutirlo en detalle!
Método 1: uso de la incrustación de código personalizado
El método más sencillo para agregar datos estructurados en Webflow es dentro de una sección o una página web mediante la etiqueta script.
Para incluirlo, tienes que usar:
<script type="application/ld+json">
{
«@context «:»https://webyansh.com»,
«@type»:» Organización»,
«nombre»: «Webyansh»,
«URL»:»https://webyansh.com»,
«logotipo»:» https://webyansh.com/logo.png»
}
//Aquí, todas las propiedades y sus datos se adjuntarán como pares clave-valor en el formato dado
</script>
Para agregar este script, utilice la opción embed component y agréguelo desde Ajustes de página > Antes de la etiqueta.

Método 2: utilice Webflow CMS y Dynamic Schema
Consta de dos pasos para agregar datos estructurados en Webflow.
Paso 1: Crea campos personalizados en tu CMS, como metatitulo, autor, metadatos, publicar datos, última actualización, auditado por, etc.
Paso 2: A continuación, utilice variables dinámicas para generar automáticamente datos estructurados JSON-LD para cada página web o sección.
<script type="application/ld+json">
{
"@context «:" https://schema.org «,
"@type «: «Publicación de blog»,
«titular»: «{{cms-title}}»,
«autor»: {
"@type «: «Persona»,
«nombre»: «{{cms-author}}»
},
«Fecha de publicación»: «{{cms-date}}»,
«imagen»: «{{cms-image}}»
}
</script>

Método 3: utilizar herramientas y complementos de terceros
La mayoría de los blogueros o personas que no se sienten cómodas escribiendo JSON-LD manualmente, especialmente aquellos que involucran datos a gran escala, usan herramientas y complementos de terceros.
Algunas de las herramientas y complementos para este propósito incluyen:
- Generador de marcado de esquemas (JSON-LD) de TechnicalSEO.com
- Generador de esquemas JSON-LD de jsonld.com
- Generador de esquemas Merkle de twaino.com
Además, copie los datos estructurados JSON-LD generados y péguelos en Webflow mediante el método embed.
¿Cómo agregar un esquema en Webflow?
Paso 1: Generar marcado de esquema
Genere el esquema JSON-LD mediante cualquiera de los métodos enumerados anteriormente.
Paso 2: Abrir el proyecto Webflow
- Inicie sesión en Webflow
- Elija la página de flujo web en la que desea aplicar el esquema
Paso 3: Añadir código JSON-LD
- Ve a Configuración de página > Código personalizado > Antes
De lo contrario, puede usar la función de arrastrar y soltar para pegar el script en el código de inserción.
Paso 4: Publicar y probar
Publica el script y luego pruébalo con herramientas de terceros como Texto de resultados enriquecido de Google, y si hay algún problema con el esquema, corríjalo de inmediato.
Errores comunes al agregar el marcado de esquema a Webflow
Si bien agregar el marcado de esquemas mejora el SEO de su sitio, cualquier error en él puede obstaculizar su crecimiento. Estos son los errores más comunes que comete la mayoría de las personas:
- Sintaxis JSON-LD no válida: El uso de una sintaxis incorrecta, la falta de comandos, corchetes o similares invalida todos los datos estructurados de Webflow.
- Se eligió un tipo de esquema incorrecto: Muchos usan esquemas genéricos en su flujo web en lugar de esquemas específicos, como usar el esquema Article para News y similares. Estos no optimizan el contenido para una visualización óptima de los resultados enriquecidos.
- Valores de campo incompletos e incorrectos: El uso de datos o valores con un formato incorrecto o una sintaxis que no contenga propiedades esenciales produce errores de validación. Por ejemplo, si utiliza MM-DD-YYYY y especifica el valor en un formato diferente, se generará un error.
- Duplicación de marcado de esquemas: Muchas personas escriben manualmente el esquema y lo agregan a su flujo web, además de generar uno con complementos o herramientas para el mismo contenido, creando un esquema no válido.
- No probar el sitio antes de publicarlo: Comprueba siempre el marcado de esquemas del sitio antes de publicarlo para comprobar si hay problemas y resolverlos.
- Errores de ubicación en Webflow: La incrustación incorrecta del script del esquema en la <head><body>sección o en la sección de su flujo web puede provocar conflictos.
Mejores prácticas al agregar esquemas a Webflow
Para evitar los errores mencionados anteriormente, utilice las siguientes prácticas recomendadas:
- Usa el marcado Schema para todos los tipos de contenido, como preguntas frecuentes, reseñas, noticias y no solo artículos.
- Usa complementos o herramientas para generar un esquema y evitar errores de sintaxis.
- Inserte el esquema en la <head>sección.
- Mantén el marcado del esquema actualizado según la estructura y el contenido de tu sitio.
- Usa Google Search Console Analytics para comprobar el rendimiento de los fragmentos en los resultados de búsqueda.
Además, utilice funciones técnicas de SEO adicionales para una mejor optimización.
Formatos de contenido que funcionan bien
Los siguientes tipos de esquemas o formatos de contenido funcionan bien en SEO:
- Artículos/publicaciones de blog/noticias: Los artículos, las publicaciones de blog y el contenido de tipo informativo brindan una mejor visibilidad a tu sitio si se usan con frecuencia.
- Productos de comercio electrónico: El esquema de productos de comercio electrónico con revisión, calificación, precio, detalles y oferta tiene más posibilidades de vender y atraer tráfico calificado.
- Empresas locales: El esquema LocalBusiness con dirección, horario e información de contacto ayuda con el SEO local.
- Copiar y pegar fragmentos de código: Para los sitios web técnicos relacionados con el sector de TI, los fragmentos de código de copiar y pegar funcionan mejor, ya que ayudan a captar la intención del usuario.
- Guías prácticas: El esquema HowTo con instrucciones paso a paso funciona mejor en los tutoriales, ya que guían los algoritmos con un método detallado.
- Preguntas frecuentes: La página de preguntas frecuentes para parejas de preguntas y respuestas es bastante popular, especialmente en los sitios web que venden productos/servicios.
- Evento: Para promocionar eventos, el esquema de eventos funciona con fechas, lugares, artistas, género y otros detalles.
- Ofertas de trabajo: El esquema de publicación de trabajos con la descripción del puesto y esos detalles ayudan a promover los puestos vacantes.
Generación de esquemas de IA en Webflow
Webflow ahora proporciona una IA integrada para la generación de esquemas que puedes usar para agregar esquemas a las páginas de la colección y a todas las demás páginas de tus sitios.
Para usar el generador de esquemas de IA en Webflow, sigue los pasos que se indican a continuación:
- Abra su sitio en Webflow y navegue hasta la página en la que se debe agregar el esquema.
- En la barra de herramientas de la izquierda, selecciona el panel Páginas
- Sitúa el cursor sobre la página y haz clic en el icono de engranaje para abrir Configuración
- Desplázate hasta Marcado de esquema y haz clic en Generar marcado de esquema para que Webflow AI lo cree para tu página
- Haga clic en el botón Guardar y publique su sitio para que el esquema esté activo.

Sin embargo, ya sea que utilices Webflow AI, añadas manualmente o utilices cualquier herramienta de terceros, usa siempre herramientas para probarla.
Localización de esquemas en Webflow
La localización de esquemas en Webflow significa localizar el esquema para una región específica con la intención del SEO local.
Webflow AI no admite el marcado de esquemas específico de la configuración regional, por lo que debe usar el código personalizado manual de Configuración de página para cada versión localizada de la página web. Webflow te permite agregar diferentes esquemas para cada idioma y configuración regional.
Por lo tanto, cree el esquema específico de JSON-LD para la empresa o el proveedor de servicios local en cuestión añadiendo detalles como la moneda, los códigos de idioma, la dirección y más, como en-US para la localización en inglés de EE. UU.
Además, debe usar herramientas generadoras de esquemas para obtener la sintaxis y los campos precisos de la versión. Incluso la propiedad inLanguage debe contener el código de idioma ISO correcto.
Además, vaya a Webflow > Diseñador > Páginas > Página localizada > Configuración > Código personalizado.
A continuación, repite el proceso para todas las versiones lingüísticas de tus páginas web y pruébalas todas para asegurarte de que el esquema es correcto.
Problemas comunes con la localización del esquema de Webflow y cómo solucionarlos
Las funciones de localización nativas de Webflow facilitan la tarea, pero su implementación puede causar muchos problemas. Una de ellas es que el esquema debe estar correctamente localizado para cada versión de la página.
- Esquema de Hardcore sin variables de localización
El error principal es que muchos usuarios utilizan un bloque de esquema único pero estático para la información de la configuración regional principal, por lo que todas las versiones localizadas lo contienen.
Por lo tanto, utilice variables CMS para evitarlo. Por ejemplo, si tu esquema es para la página de producto de un CMS, asegúrate de que los campos como el nombre y la descripción del producto tengan las propiedades de esquema correctas.
Además, para las páginas estáticas, usa el código del esquema localizado en la sección Código personalizado de la configuración de página de cada configuración regional por separado. Esto. El esquema se localizará según el contenido y el idioma.
Además, para el esquema Organization o LocalBusiness, agregue las propiedades @language y AddressCountry para realizar la localización según el idioma y la región de destino.
- Etiqueta hfreflang incorrecta en el esquema
Webflow admite la localización y gestiona las etiquetas hreflang necesarias en el encabezado HTML. Sin embargo, debe especificar señales de localización equivalentes en ciertos tipos de esquemas que no lo admiten.
Por lo tanto, utilice Webflow para colocar las etiquetas rel=» alternate» hreflang=» x» requeridas en los encabezados de las páginas. Asegúrese de que las URL canónicas de cada página localizada apunten a sí mismas en lugar de a la versión en el idioma principal.
- Errores de validación del esquema después de la localización
Con frecuencia, se cambian las cadenas de texto de un bloque JSON-LD, lo que puede provocar errores de sintaxis, especialmente cuando se utilizan diferentes idiomas. Por ejemplo, un título localizado puede incluir comillas dobles sin escapes, lo que crea una estructura JSON-LD no válida.
Por lo tanto, usa Google Rich Results Test en la URL de cada página localizada después de la publicación para validar el esquema. Además, cuando extraigas contenido de los campos del CMS de un esquema de código personalizado, usa los caracteres de escape adecuados para evitar que el esquema se rompa.
Plantillas de esquema reutilizables (listas para copiar y pegar)
A continuación se muestran las plantillas de Schema.org de uso común que funcionan en la mayoría de los sitios web. Puedes copiar estos ejemplos y adaptarlos al contenido de tu página en Webflow.
- Artículo//Esquema de publicación de blogs
Por qué usar esto:
Este es el esquema más común y seguro para blogs, guías y tutoriales. Ayuda a los motores de búsqueda a entender el autor, la fecha de publicación y el contexto de tu contenido.
Utilice este esquema para: publicaciones de blog, guías extensas, artículos de la base de conocimientos.
- Esquema de páginas de preguntas frecuentes
Por qué usar esto:
El esquema de preguntas frecuentes es ideal cuando tu página contiene preguntas y respuestas visibles. Mejora la claridad del contenido y puede mejorar la forma en que la página aparece en los resultados de búsqueda.
Utilice este esquema para: Preguntas frecuentes del blog, páginas de servicio, explicaciones de productos.
- Esquema de la organización
Por qué usar esto:
El esquema organizativo define la identidad de su marca y se usa comúnmente en todo el sitio. Ayuda a conectar su sitio web con su entidad comercial y sus perfiles sociales.
Utilice este esquema para: páginas de inicio, acerca de las páginas, configuración global de SEO.
- Esquema BreadcrumbList
Por qué usar esto:
El esquema Breadcrumb ayuda a los motores de búsqueda a entender la jerarquía de páginas y mejora la claridad de la navegación, especialmente en blogs y sitios web basados en CMS.
Utilice este esquema para: publicaciones de blog, páginas de categorías, documentación.
- Esquema de servicio (genérico)
Por qué usar esto:
El esquema de servicio funciona bien para agencias, consultores y proveedores de servicios profesionales. Es flexible y más fácil de adaptar que los esquemas específicos de producto o SaaS.
Utilice este esquema para: páginas de servicios de agencias, ofertas de consultoría.
Conclusión
La incorporación de marcadores de esquema en Webflow informa a los motores de búsqueda sobre el tema de tu contenido y, por lo tanto, desempeña un papel crucial en el SEO. Incluso ayuda a los bots a rastrear tu sitio, por lo que también desempeña un papel en el SEO. Hay muchos tipos de esquemas disponibles, y elegir el tipo correcto con la implementación es esencial para que la optimización vaya en la dirección correcta.
Preguntas frecuentes sobre la implementación de fragmentos enriquecidos de Schema.org en Webflow (JSON-LD)
¿Cómo agregar un esquema en Webflow?
La forma más recomendada es usar JSON-LD en una etiqueta de script situada dentro de Configuración de página → Antes</body>. Google prefiere JSON-LD porque es limpio, escalable y más fácil de mantener que los microdatos.
¿Webflow admite esquemas dinámicos a través de CMS?
Sí. Puede crear campos de CMS (título, autor, fecha, imagen, etc.) e insertarlos en JSON-LD mediante variables dinámicas. Esto permite que cada elemento del CMS genere automáticamente su propio fragmento enriquecido.
¿Es preciso el generador de esquemas de IA de Webflow?
La IA de Webflow genera un esquema utilizable para la mayoría de las páginas, pero no siempre está listo para la localización o completo para el SEO avanzado. Es buena para una configuración rápida, pero aun así se recomienda revisarla y probarla manualmente.
¿Dónde se debe colocar JSON-LD en Webflow?
Coloque JSON-LD dentro de Configuración de página → Código personalizado → Antes</body> o insértelo dentro de un componente mediante el elemento Embed. El esquema no debe interrumpir la estructura HTML.
¿Puede el marcado de esquemas mejorar las clasificaciones en Google?
Schema no mejora directamente las clasificaciones, pero ayuda a los motores de búsqueda a entender tu contenido. Esto conduce a una mejor visibilidad del SERP, resultados enriquecidos, fragmentos destacados y un CTR más alto, lo que mejora indirectamente el SEO.

