TechLead
Lección 6 de 13
5 min de lectura
SEO

Datos estructurados y Schema

Implementar JSON-LD para resultados enriquecidos

Datos estructurados para SEO

Los datos estructurados ayudan a los motores a entender mejor tu contenido y pueden habilitar resultados enriquecidos como estrellas, FAQs e información de productos en los resultados.

Formato JSON-LD

Google recomienda JSON-LD para datos estructurados:

// Basic Article schema
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn React Hooks",
  "author": {
    "@type": "Person",
    "name": "John Developer"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/react-hooks.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "TechLead",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

Tipos comunes de schema

Tipos de contenido:

  • Article / BlogPosting
  • HowTo / Tutorial
  • FAQPage
  • Course / LearningResource
  • VideoObject

Tipos de negocio:

  • Organization
  • LocalBusiness
  • Product
  • Review / AggregateRating
  • BreadcrumbList

Ejemplo de schema FAQ

// FAQ schema for rich results
const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What are React Hooks?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "React Hooks are functions that let you use state and other React features in functional components."
      }
    },
    {
      "@type": "Question",
      "name": "When should I use useEffect?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use useEffect for side effects like data fetching, subscriptions, or DOM manipulation."
      }
    }
  ]
};

// In Next.js page
export default function Page() {
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
      />
      {/* Page content */}
    </>
  );
}

Schema de breadcrumbs

const breadcrumbSchema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "React",
      "item": "https://example.com/react"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Hooks",
      "item": "https://example.com/react/hooks"
    }
  ]
};

Probar datos estructurados

  • Google Rich Results Test: https://search.google.com/test/rich-results
  • Schema Markup Validator: https://validator.schema.org
  • Google Search Console: Reportes de mejoras

Continuar aprendiendo