Skip to content

Implement JSON-LD structured data headers for Astro docs pages #123

@ChronosSF

Description

@ChronosSF

Feature Request: JSON-LD Structured Data Headers

Summary

Add JSON-LD structured data (schema.org markup) to the <head> of each documentation page. This improves SEO, enables rich search results (breadcrumbs, article info, etc.), and provides better discoverability for documentation content.

Motivation

Documentation pages currently emit standard <meta> tags (title, description, keywords, Open Graph) via src/components/overrides/Head.astro, but lack machine-readable structured data. Adding JSON-LD allows search engines to understand page content more deeply and potentially surface rich snippets — e.g. TechArticle, BreadcrumbList, or WebPage schema types — in search results.

Suggested Plugin

Use astro-seo-schema, the most widely-used Astro-specific integration for injecting JSON-LD. It provides a <Schema /> component that renders a <script type="application/ld+json"> tag with full TypeScript support via schema-dts:

npm install astro-seo-schema
---
import { Schema } from 'astro-seo-schema';
---
<Schema
  item={{
    "@context": "https://schema.org",
    "@type": "TechArticle",
    headline: title,
    description: description,
    url: Astro.url.href,
  }}
/>

Proposed Implementation

  1. Add astro-seo-schema as a dependency in package.json.
  2. Extend src/components/overrides/Head.astro to include a block using frontmatter fields already available via entry.data (title, description, keywords).
  3. Support at least the following schema types:
    • TechArticle for individual component/guide pages.
    • BreadcrumbList derived from the sidebar/TOC hierarchy.
    • WebSite for the home/index page.
  4. Make the JSON-LD configurable via siteMetaIntegration options (e.g. organizationName, logoUrl) so consuming docs sites can supply their own values.
  5. Ensure the <script type="application/ld+json"> tag survives Astro View Transitions (already handled through Head.astro).

Acceptance Criteria

  • Each doc page emits a valid <script type="application/ld+json"> tag in its .
  • Structured data validates without errors in Google's Rich Results Test and Schema Markup Validator.
  • No regressions to existing tag output or View Transitions behaviour.
  • Configurable at the integration level for all consuming projects (angular, xplat, etc.).

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels
    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions