Add JSON-LD structured data to a page

seo-in-astro provides the Layout component to easily add any JSON-LD structured data to a page.

Using the Layout component

1. Import the JsonLdScript component into every page where you want to generate the JSON-LD data.

   pages/article/getting-started.astro

   ---
   import Layout from "@dlcastillop/seo-in-astro/Layout";
   
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "Article",
     headline: "Getting Started with Next.js",
     author: {
       "@type": "Person",
       name: "John Doe",
     },
     datePublished: "2024-01-15",
   };
   ---
   
   <Layout
     title="Getting Started with Next.js"
     description="Learn how to get started with Next.js."
     ogImg="/og-article.png"
     jsonLd={jsonLd}
   >
     <article>
       <h1>Getting Started with Next.js</h1>
     </article>
   </Layout>

2. Check the generated JSON-LD by inspecting the head element of your page.

Related

View related API references.

Layout API Reference for the Layout component.