Projects · Astro SEO

SEO for Astro

@northsoon/astro-seo is the component we use at Northsoon to keep metadata, Open Graph, Twitter Cards, canonical URLs, hreflang, robots, and JSON-LD in one place.

npm github

What it solves

In an Astro site, it is easy to start with two or three loose meta tags. The problem shows up when you have multiple pages, languages, social images, structured data, and different indexing rules.

This package centralizes that SEO layer in a typed component, so each page declares its intent and the final HTML stays consistent.

Includes

Title, description, and canonical URLs
Open Graph for social sharing and messaging apps
Twitter Cards without duplicating fallback data
hreflang for multilingual sites
noindex, nofollow, and robots props
Typed JSON-LD for structured data

Example

---
import { AstroHead } from "@northsoon/astro-seo";
---

<AstroHead
  title="My page"
  description="Description for search engines and social previews."
  canonical="https://example.com/"
  languageAlternates={[
    { hreflang: "en", href: "https://example.com/" },
    { hreflang: "es", href: "https://example.com/es/" },
  ]}
  jsonLd={{
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "My site",
    url: "https://example.com/",
  }}
/>

Used here

This page is rendered with @northsoon/astro-seo: canonical, hreflang, Open Graph, Twitter Card, and JSON-LD all come from the package.

See other packages