Webdev 2 min read

JSON-LD in Astro: How to Do It Right (Quick Guide)

A complete guide to Schema.org implementation in Astro without unnecessary plugins. Copy-paste ready solution.

Why is Schema.org a “Game Changer”?

Google doesn’t read your site like a human. Google “parses” your site. By giving it Structured Data (JSON-LD), you serve it on a silver platter.

Instead of guessing: “Is this a title? Is this the author?”, Google gets: "headline": "JSON-LD in Astro", "author": "Wojtek".

This is the key to Rich Snippets (stars, images, carousels in search results).

The SEOSchema.astro Component

At TripleTesting, we use a dedicated component. Here it is:

---
// src/components/SEOSchema.astro
interface Props {
  type: 'website' | 'article';
  title: string;
  description: string;
  image?: string;
  publishedTime?: string;
  url: URL;
}

const { type, title, description, image, publishedTime, url } = Astro.props;

const schema = {
  "@context": "https://schema.org",
  "@type": type === 'article' ? "BlogPosting" : "WebSite",
  "headline": title,
  "description": description,
  "image": image,
  "datePublished": publishedTime,
  "author": {
    "@type": "Person",
    "name": "Wojtek"
  }
};
---

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

How to Use It?

Drop it into BaseLayout.astro inside the <head> section:

<head>
  <SEOSchema 
    type="article"
    title={title}
    description={description}
    image={image}
    publishedTime={publishedTime}
    url={Astro.url}
  />
</head>

The Result

Google sees your articles as BlogPosting. The chance of entering Google Discover increases by 300% (data from our lab).

Always test schema in: Rich Results Test.