> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wudlet.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agente Schema.org (JSON-LD)

> Aprende a generar, personalizar e instalar el marcado Schema.org de tu marca en WordPress, Shopify, Webflow, Next.js y más plataformas.

El **Agente Schema.org (JSON-LD)** de Wudlet analiza el sitio web de tu marca y genera el marcado estándar de datos estructurados para que los motores de búsqueda (como Google y Bing) reconozcan la información oficial de tu negocio y habiliten resultados enriquecidos.

***

## ¿Qué es Schema.org y para qué sirve?

Schema.org es el vocabulario estándar respaldado por los principales motores de búsqueda (Google, Microsoft Bing, Yahoo y Yandex) para estructurar y clasificar información en la web.

El código generado en formato **JSON-LD** actúa como una declaración técnica explícita sobre tu organización. No altera la apariencia visual de tu sitio web para los visitantes, pero le proporciona a los rastreadores de búsqueda información estructurada y verificable:

* El nombre oficial y comercial de la empresa.
* La dirección web canónica (`url`).
* Los perfiles institucionales vinculados (`sameAs`), como LinkedIn, X o Crunchbase.
* El tipo de organización (`Organization`, `Corporation`, etc.).

<Info>
  Google utiliza los datos estructurados de Schema.org para comprender el contenido de las páginas, alimentar el panel de información del Grafo de Conocimiento (Knowledge Graph) y mostrar resultados enriquecidos en las páginas de resultados de búsqueda.
</Info>

***

## Cómo ejecutar el agente en Wudlet

<Steps>
  <Step title="1. Ingresa a la sección de Agentes">
    En el menú lateral de Wudlet, haz clic en **Agentes**.
  </Step>

  <Step title="2. Ejecuta el Agente Schema.org">
    En la tarjeta **Agente Schema.org (JSON-LD)**, haz clic en el botón **Ejecutar agente**.
  </Step>

  <Step title="3. Inicia el análisis">
    En el panel lateral que se abrirá a la derecha, haz clic en **Generar Schema.org**.
    El agente analizará automáticamente las páginas de tu dominio activo y construirá el código en pocos segundos.
  </Step>

  <Step title="4. Revisa los atributos pendientes (si los hay)">
    Si el agente no encontró datos como la fecha de fundación o la razón social en tu web, te los mostrará en un recuadro amarillo. Puedes escribir el dato ahí mismo y hacer clic en la flecha para que se agregue automáticamente al código.
  </Step>
</Steps>

***

## Ya tengo el código generado, ¿qué hago ahora?

Una vez que el agente termine de generar el marcado, verás un bloque de código en la pantalla. Sigue estos tres pasos para dejarlo funcionando en tu sitio web:

### Paso 1: Copia el código

1. Asegúrate de tener seleccionada la pestaña **Etiqueta `<script>`** en la parte superior del editor.
2. Haz clic en el botón **Copiar**.

El fragmento que acabas de copiar tiene una estructura parecida a esta:

```html theme={null}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://tudominio.com/#organization",
      "name": "Tu Marca",
      "url": "https://tudominio.com",
      "sameAs": [
        "https://www.linkedin.com/company/tumarca",
        "https://x.com/tumarca"
      ]
    },
    {
      "@type": "WebSite",
      "@id": "https://tudominio.com/#website",
      "url": "https://tudominio.com",
      "name": "Tu Marca"
    }
  ]
}
</script>
```

***

### Paso 2: Pégalo en tu sitio web según tu plataforma

El objetivo universal es pegar este fragmento dentro de la cabecera (entre las etiquetas `<head>` y `</head>`) de tu página principal. Elige tu plataforma a continuación:

<AccordionGroup>
  <Accordion title="WordPress" icon="wordpress">
    1. En tu panel de administración de WordPress, ve a **Plugins** > **Añadir nuevo**.
    2. Busca e instala el plugin gratuito **WPCode** (anteriormente llamado *Insert Headers and Footers*) y actívalo.
    3. En el menú lateral izquierdo de WordPress, haz clic en **Code Snippets** > **Header & Footer**.
    4. En la caja grande que dice **Header**, pega el código que copiaste de Wudlet.
    5. Haz clic en **Save Changes** (Guardar cambios) en la esquina superior derecha.
  </Accordion>

  <Accordion title="Shopify" icon="shopify">
    1. En tu panel de Shopify, ve a **Tienda online** > **Temas**.
    2. En tu tema actual, haz clic en el botón de tres puntos (`...`) y selecciona **Editar código**.
    3. En la lista de archivos de la izquierda, busca y abre `theme.liquid` (bajo la carpeta *Layout*).
    4. Con `Ctrl+F` (o `Cmd+F`), busca la etiqueta de cierre `</head>`.
    5. Justo una línea **arriba** de `</head>`, pega el código copiado de Wudlet.
    6. Haz clic en **Guardar** en la esquina superior derecha.
  </Accordion>

  <Accordion title="Webflow" icon="cube">
    1. En tu panel de Webflow, abre la configuración de tu proyecto (**Project Settings**).
    2. Ve a la pestaña **Custom Code** (Código personalizado).
    3. En el campo de texto titulado **Head Code**, pega el código que copiaste de Wudlet.
    4. Haz clic en **Save Changes** y luego en **Publish** (Publicar) en tu dominio de producción.
  </Accordion>

  <Accordion title="Framer" icon="f">
    1. En tu proyecto de Framer, ve a **Settings** (icono de engranaje) > **General**.
    2. Desplázate hacia abajo hasta la sección **Custom Code**.
    3. En el campo **Start of `<head>` tag**, pega el bloque de código.
    4. Haz clic en **Save** y publica tu sitio (*Publish*).
  </Accordion>

  <Accordion title="Wix" icon="w">
    1. En el panel de control de tu sitio en Wix, ve a **Ajustes** > **Avanzado** > **Código personalizado**.
    2. Haz clic en el botón **+ Añadir código personalizado**.
    3. Pega el código de Wudlet en el campo de texto.
    4. Asígnale un nombre (por ejemplo: *Schema Org Wudlet*).
    5. En la opción *Colocar código en*, selecciona **Encabezado (Head)**.
    6. Haz clic en **Aplicar**.
  </Accordion>

  <Accordion title="Squarespace" icon="square">
    1. En el menú de inicio de Squarespace, ve a **Configuración** > **Avanzado** > **Inyección de código** (*Code Injection*).
    2. En el recuadro superior titulado **Encabezado** (*Header*), pega el código.
    3. Haz clic en **Guardar** en la esquina superior izquierda.
  </Accordion>

  <Accordion title="Next.js / React / HTML puro" icon="code">
    * **En HTML estático o Vite:** Pega el bloque de `<script>` directamente dentro de la etiqueta `<head>` en tu archivo `index.html`.
    * **En Next.js (App Router):** Abre tu archivo `app/layout.jsx` o `app/layout.tsx` y colócalo dentro de `<head>` o mediante el componente `<Script>` de Next.js:
      ```jsx theme={null}
      <head>
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(tuSchemaObjeto) }}
        />
      </head>
      ```
  </Accordion>
</AccordionGroup>

***

### Paso 3: Verifica que Google lo lea correctamente (Toma 1 minuto)

Para tener la total certeza de que el código quedó bien instalado y no tiene ningún error de formato:

<Steps>
  <Step title="Abre la Prueba de Google o el Validador de Schema.org">
    Accede a la [Prueba de resultados enriquecidos de Google](https://search.google.com/test/rich-results) o a la herramienta oficial del [Validador de Schema.org](https://validator.schema.org/).
  </Step>

  <Step title="Ingresa tu dirección web">
    Escribe la dirección de tu página web (ejemplo: `https://tudominio.com`) y haz clic en **Ejecutar prueba** (*Run Test*).
  </Step>

  <Step title="Confirma los resultados en verde">
    En el panel derecho verás las entidades detectadas: **`Organization`** y **`WebSite`** con 0 errores y 0 advertencias.
  </Step>
</Steps>

***

## ¿Qué resultados esperar y cómo verificar la indexación?

Una vez instalado y verificado con el validador oficial:

1. **Solicita la reindexación en Google Search Console:**
   * Ingresa a [Google Search Console](https://search.google.com/search-console).
   * En la barra superior de búsqueda (**Inspeccionar las URLs de...** / **Inspect any URL in...**) o desde la pestaña **Inspección de URLs** (*URL inspection*) en el menú lateral, introduce la URL completa de tu página principal (ejemplo: `https://tudominio.com/`) y presiona **Enter**.
   * Tras unos segundos de análisis de la URL, haz clic en el botón **Solicitar indexación** (*Request indexing*). Esto notificará a Googlebot para priorizar el rastreo de tus nuevos datos estructurados.
2. **Procesamiento por parte de los motores de búsqueda:** Durante los siguientes rastreos habituales de Googlebot y Bingbot, los motores registrarán y validarán las etiquetas de datos estructurados de tu página principal.
3. **Consolidación de la información:** A medida que los motores confirman la correlación entre tu dominio y los enlaces oficiales declarados en `sameAs`, se consolida la información corporativa de tu marca en su índice y se facilita la activación de resultados enriquecidos.
