Guía de Implementación

Aprende cómo agregar marcado de esquema a tu sitio web y mejorar tu visibilidad en búsquedas con fragmentos enriquecidos.

Inicio Rápido

  1. Genera tu esquema: Usa nuestro generador para crear marcado JSON-LD válido
  2. Copia el código: Haz clic en el botón "Copiar Código" para copiar tu esquema
  3. Agregar a tu página: Pega el código en la sección head de tu HTML
  4. Pruébalo: Usa la Prueba de Resultados Enriquecidos de Google para validar

Dónde Agregar Marcado de Esquema

El marcado de esquema debe agregarse dentro de una etiqueta script con tipo application/ld+json en el HTML de tu página.

<!DOCTYPE html>
<html>
<head>
  <title>My Article</title>

  <!-- Add schema markup here -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Your Article Title",
    "author": {
      "@type": "Person",
      "name": "John Doe"
    }
  }
  </script>
</head>
<body>
  ...
</body>
</html>

Ejemplos del Mundo Real

Aquí hay ejemplos completos y listos para copiar de tipos de esquema comunes:

📄 Artículo de Blog con Autor

Perfecto para publicaciones de blog y contenido editorial

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "10 Tips for Better SEO in 2025",
  "image": "https://example.com/images/seo-tips.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://example.com/authors/jane-smith"
  },
  "datePublished": "2025-01-15",
  "dateModified": "2025-01-20",
  "publisher": {
    "@type": "Organization",
    "name": "Marketing Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "description": "Learn the latest SEO strategies to boost your rankings in 2025."
}
</script>

🛍️ Producto con Reseñas

Producto de comercio electrónico con precios y calificaciones

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Wireless Bluetooth Headphones",
  "image": "https://example.com/products/headphones.jpg",
  "description": "Premium noise-cancelling headphones",
  "brand": {
    "@type": "Brand",
    "name": "AudioTech"
  },
  "offers": {
    "@type": "Offer",
    "price": "79.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/products/headphones"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "127"
  }
}
</script>

🏪 Negocio Local

Para restaurantes, tiendas y negocios de servicios

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "The Cozy Cafe",
  "image": "https://example.com/cafe.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102",
    "addressCountry": "US"
  },
  "telephone": "+1-415-555-0123",
  "openingHours": "Mo-Fr 08:00-20:00, Sa-Su 09:00-21:00",
  "priceRange": "$$",
  "servesCuisine": "American, Coffee",
  "acceptsReservations": "true"
}
</script>

❓ Esquema FAQ

Para páginas de preguntas frecuentes

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is schema markup?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Schema markup is structured data that helps search engines understand your content and display rich snippets in search results."
      }
    },
    {
      "@type": "Question",
      "name": "How long does it take to see results?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Rich snippets typically appear within 1-4 weeks after implementation, though results vary."
      }
    }
  ]
}
</script>

Instrucciones Específicas por Plataforma

WordPress

Agrega marcado de esquema a publicaciones o páginas individuales:

  • Usa un plugin como "Insert Headers and Footers"
  • O agrega directamente al archivo header.php de tu tema
  • Yoast SEO y RankMath también soportan marcado de esquema

Shopify

Agrega al archivo theme.liquid de tu tema en la sección head.

Next.js / Nuxt / React

Usa next/head o la gestión de head de tu framework:

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={ { __html: JSON.stringify(schema) } }
  />
</Head>

Google Tag Manager

Crea una etiqueta HTML personalizada con tu marcado de esquema y configúrala para disparar al cargar la página.

Probando Tu Esquema

Después de implementar el marcado de esquema, pruébalo para asegurar que sea válido:

Mejores Prácticas

Mantenlo preciso: Asegúrate de que tu esquema coincida con el contenido real de tu página. El marcado engañoso puede resultar en penalizaciones.

Usa tipos específicos: Elige el tipo de esquema más específico. Usa BlogPosting en lugar del genérico Article cuando sea apropiado.

Incluye campos recomendados: Aunque solo los campos requeridos son obligatorios, los campos recomendados mejoran la apariencia de tu fragmento enriquecido.

Prueba antes de desplegar: Siempre valida tu esquema con la Prueba de Resultados Enriquecidos de Google antes de publicar.

Actualiza regularmente: Mantén tu esquema actualizado cuando cambie el contenido (precios, fechas, disponibilidad, etc.).

Solución de Problemas

¿El esquema no aparece en los resultados de búsqueda?

Los fragmentos enriquecidos pueden tardar de 1 a 4 semanas en aparecer después de la implementación. Google no garantiza resultados enriquecidos incluso con marcado válido. Asegúrate de que tu página tenga contenido de calidad y siga las directrices para webmasters.

¿Errores de validación?

Verifica campos requeridos faltantes, URLs inválidas (deben ser absolutas, no relativas), formatos de fecha incorrectos (usa ISO 8601) y escape apropiado de comillas en JSON.

¿Múltiples esquemas en una página?

Puedes incluir múltiples tipos de esquema en una página usando etiquetas script con tipo application/ld+json separadas o combinándolos en un array.

Errores Comunes a Evitar

No uses esquema para contenido oculto: El esquema debe describir contenido visible en la página.

No marques contenido de otras páginas: Cada esquema debe describir solo la página actual.

No uses URLs relativas: Siempre usa URLs completas con protocolo (https://) para campos de imagen, url y otros enlaces.

No falsifiques reseñas o calificaciones: Marcar reseñas o calificaciones que no existen puede resultar en penalizaciones manuales.

💡 Consejo Profesional

Los fragmentos enriquecidos no aparecen inmediatamente. Después de implementar el marcado de esquema, puede tomar de unos días a unas semanas para que Google rastree tu página y muestre resultados enriquecidos. ¡Ten paciencia y enfócate en la calidad del contenido!