@rgglez/astro-seo

v0.1.2

Published

19 days ago

Astro component for SEO meta tags, Open Graph, Twitter cards, hreflang links, robots directives, and JSON-LD.

Downloads

0High
0Medium
0Low

rgglez

astro astro-component seo ssr meta tags open graph twitter cards JSON-LD structured data

astro-seo

GitHub all releases GitHub issues GitHub commit activity

astro-seo is a component for centralizing SEO headers: title, description, canonical URL, robots directives, language alternates, Open Graph, Twitter Cards, Facebook App ID, and JSON-LD structured data.

It was inspired by @rgglez/svelte-seo.

Installation

npm install @rgglez/astro-seo

pnpm add @rgglez/astro-seo

Basic Usage

Import the component in an Astro layout and render it inside <head>.

---
import Seo from "@rgglez/astro-seo";
---

<html lang="en">
  <head>
    <Seo
      title="Simple page title"
      description="Simple description about a page"
      canonical="https://example.com/simple-page"
    />
  </head>
  <body>
    <slot />
  </body>
</html>

Advanced Usage

---
import Seo from "@rgglez/astro-seo";

const title = "Primal Movement | Natural Movement for Better Health";
const description =
  "Learn about primal movement exercises and how they can benefit your fitness.";
---

<Seo
  {title}
  {description}
  canonical="https://www.primal-movement.com/"
  keywords={[
    "primal movement",
    "natural movement",
    "fitness",
  ]}
  languageAlternates={[
    { hreflang: "en", href: "https://www.primal-movement.com/" },
    { hreflang: "es", href: "https://www.primal-movement.com/es/" },
  ]}
  openGraph={{
    title,
    description,
    url: "https://www.primal-movement.com/",
    type: "website",
    siteName: "Primal Movement",
    images: [
      {
        url: "https://www.primal-movement.com/images/squatting.jpg",
        width: 1200,
        height: 630,
        alt: "Squatting",
      },
    ],
  }}
  twitter={{
    card: "summary_large_image",
    title,
    description,
    image: "https://www.primal-movement.com/images/squatting.jpg",
  }}
  jsonLd={{
    "@type": "WebSite",
    name: "Primal Movement",
    description,
    url: "https://www.primal-movement.com/",
  }}
/>

JSON-LD Graphs

jsonLd accepts either one object or an array. Arrays are rendered as a Schema.org @graph.

<Seo
  jsonLd={[
    {
      "@type": "BlogPosting",
      "@id": "https://example.com/glossary#article",
      headline: "Glossary",
    },
    {
      "@type": "DefinedTermSet",
      "@id": "https://example.com/glossary#defined-term-set",
      name: "Glossary",
    },
  ]}
/>

Props

| Property | Type | Description | |---|---|---| | title | string | Page title, rendered as <title>. Combined with titleTemplate if both are set (%s replaced by title). | | titleTemplate | string | Pattern such as "%s \| My Site". Applied when title is present. | | defaultTitle | string | Fallback title when title is absent. | | description | string | <meta name="description">. Page summary for search snippets. | | keywords | string \| string[] | <meta name="keywords">. Array is joined with , . | | canonical | string \| URL | <link rel="canonical">. Preferred URL to avoid duplicate content. | | amp | string \| URL | <link rel="amphtml">. Points to the AMP version of the page. | | manifest | string \| URL | <link rel="manifest">. Path to the Web App Manifest (PWA). | | base | string | <base href>. Base URL for all relative links on the page. | | languageAlternates | LanguageAlternate[] | Emits <link rel="alternate" hreflang> per entry. Each item is { hreflang, href }. | | robots | string | Raw <meta name="robots"> content (e.g. "index,follow"). Overrides noindex/nofollow when set. | | googlebot | string | <meta name="googlebot"> content. Defaults to the same value as robots. | | noindex | boolean | Sets noindex in the robots meta (unless robots string overrides). | | nofollow | boolean | Sets nofollow in the robots meta. | | nositelinkssearchbox | boolean | Emits <meta name="google" content="nositelinkssearchbox"> to suppress Google's sitelinks search box. | | notranslate | boolean | Emits <meta name="google" content="notranslate"> to suppress auto-translation. | | themeColor | string | <meta name="theme-color">. Browser UI accent color (mobile/PWA). | | applicationName | string | <meta name="application-name">. App name for browser/OS display. | | openGraph | OpenGraph | Emits og:* meta tags. Supports title, type, url, description, images, videos, locale, siteName, and sub-objects article, book, profile, music, movie. | | twitter | TwitterCard | Emits twitter:* meta tags. Supports card, title, description, image, site, creator, and app/player fields. | | facebook | Facebook | Object with appId. Emits <meta property="fb:app_id">. | | jsonLd | JsonLd | Single object or array. Emits <script type="application/ld+json">. Array is wrapped in a Schema.org @graph. @context auto-added if absent. | | additionalMetaTags | AdditionalMetaTag[] | Extra <meta> tags. Each item accepts name?, property?, httpEquiv?, content. | | additionalLinkTags | AdditionalLinkTag[] | Extra <link> tags. Each item accepts rel, href, and optional hreflang, type, sizes, media, as, crossorigin. |

Types available from @rgglez/astro-seo/types.

License

Published under the MIT license. Please read the LICENSE file.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme