logo

Editor JSON Manual

Editor de código para control total sobre tu schema markup

Editor JSON Manual

Para usuarios avanzados que quieren control total sobre su schema markup, el Editor JSON Manual proporciona un editor de código con herramientas de nivel profesional.

Características

  • Editor Syntax-Aware: Edita JSON-LD con una experiencia de edición cómoda
  • Validación en Tiempo Real: Los errores se resaltan mientras escribes
  • Format / Prettify: Auto-indent y formateo de tu JSON con un click
  • Minify: Comprime tu JSON para producción
  • Line Numbers: Rastrea tu posición en schemas grandes
  • Character & Line Count: Stats en vivo mostrando el tamaño del JSON
  • Soporte de Variables: Inserta variables dinámicas de WordPress que se reemplazan al renderizar
  • URL Selector: Elige a qué página se asigna el schema

Variables Dinámicas

El Editor Manual soporta variables dinámicas que se reemplazan automáticamente con datos de WordPress cuando el schema se renderiza en la página:

VariableDescripción
`{{post_title}}`Título del post/página actual
`{{post_url}}`URL del post/página actual
`{{post_date}}`Fecha de publicación
`{{post_modified}}`Última fecha de modificación
`{{post_excerpt}}`Extracto del post
`{{post_thumbnail}}`URL de la imagen destacada
`{{author_name}}`Nombre del autor del post
`{{site_name}}`Título del sitio WordPress
`{{site_url}}`URL del sitio WordPress
`{{site_logo}}`URL del logo del sitio

Validación

Click en Validate para ejecutar una verificación completa:

  1. Syntax Check: ¿Es el JSON válido? Detección línea por línea señala exactamente dónde están los errores
  2. Schema.org Structure: ¿Tiene @context y @type? ¿Son correctos?
  3. Required Fields: ¿Están presentes todos los campos requeridos para el tipo? (ej: Product requiere "name", Article requiere "headline")
  4. Google Guidelines: ¿Cumple con los requisitos de structured data de Google?

La validación corre en tiempo real — verás un indicador de estado mostrando si tu JSON es válido o tiene errores.

Panel de Variables

Click el botón Variables para abrir el Panel de Variables, que muestra todas las variables dinámicas disponibles. Click en cualquier variable para insertarla en la posición del cursor.

Ejemplos de Código

Ejemplo con Variables Dinámicas

json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "{{post_title}}",
  "url": "{{post_url}}",
  "datePublished": "{{post_date}}",
  "dateModified": "{{post_modified}}",
  "description": "{{post_excerpt}}",
  "image": "{{post_thumbnail}}",
  "author": {
    "@type": "Person",
    "name": "{{author_name}}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{site_name}}",
    "url": "{{site_url}}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{site_logo}}"
    }
  }
}