DOCSEARCHbyAlgolia
Submit Docs

astro-seo

repository·main·Indexed 23 days ago

https://github.com/jonasmerlin/astro-seo

A component for Astro sites that simplifies the management of SEO-relevant HTML tags, including meta tags, Open Graph, and Twitter cards. It provides a centralized way to configure metadata and supports custom extensions for additional link and meta tags.

Tokens
1.8K
Snippets
5
Records
9
Agent score
30%

What's inside astro-seo

  1. Understand how Astro SEO works

    main

    Astro SEO is a component that bundles the creation of standard SEO-relevant HTML tags. It is designed to be used inside a page's <head> tag.

    The component provides a direct, almost 1:1 translation between its props and the resulting HTML tags. It serves as both a centralized way to manage SEO options and a checklist to ensure all necessary tags are included according to best practices. For implementation details, the core logic resides in /src/SEO.astro.

  3. Using Astro SEO with Layouts

    main

    To maintain a single source of truth for SEO configuration while allowing individual pages to provide specific values, pass SEO props from your page to a Layout component using Astro's standard props pattern.

    // Layout.astro
import { SEO } from "astro-seo";

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<html lang="en">
  <head>
    <SEO
      title={title}
      description={description}
    />
  </head>
  <body>
    <slot />
  </body>
</html>
    // index.astro (your page)
import Layout from "../layouts/Layout.astro";
---

<Layout title="Homepage" description="Welcome to my site">
  <h1>Hello!</h1>
</Layout>

  4. How to use the SEO component

    main

    Import the SEO component and place it inside the <head> section of your Astro page or layout. You can configure various SEO properties including title, description, Open Graph, Twitter, and custom extensions.

    ---
import { SEO } from "astro-seo";
---

<html lang="en">
  <head>
    <SEO
      title="A Very Descriptive Title"
      description="A heavily optimized description full of well-researched keywords."
      openGraph={{
        basic: {
          title: "A Very Descriptive Title",
          type: "A type.",
          image: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
        }
      }}
      twitter={{
        creator: "@jonasmerlins1"
      }}
      extend={{
        // extending the default link tags
        link: [{ rel: "icon", href: "/favicon.ico" }],
        // extending the default meta tags
        meta: [
          {
            name: "twitter:image",
            content: "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
          },
          { name: "twitter:title", content: "Tinker Tailor Soldier Spy" },
          { name: "twitter:description", content: "Agent" },
        ],
      }}
    />
    // ... rest of <head>
  </head>
    <body> // ... body </body>
</html>

  5. Configure Open Graph properties

    main

    Open Graph properties are configured via the openGraph prop. This prop accepts a single object structured according to the Open Graph protocol, using nested objects to separate basic requirements from optional metadata.

    Important: If you provide an openGraph configuration, you must define all four basic properties: title, type, image, and url within the basic object.

    // TypeScript interface of openGraph prop
openGraph?: {
  basic: {
    title: string;
    type: string;
    image: string;
    url: string;
  },
  optional?: {
    audio?: string;
    description?: string;
    determiner?: string;
    locale?: string;
    localeAlternate?: Array<string>;
    siteName?: string;
    video?: string;
  }
}

  6. Extend SEO tags with the extend prop

    main

    Use the extend prop to define any custom <meta> or <link> tags that are not covered by the default component props. This allows you to add arbitrary SEO or resource tags to your <head>.

    <SEO
  extend={{
    // extending the default link tags
    link: [{ rel: "icon", href: "/favicon.ico" }],
    // extending the default meta tags
    meta: [
      {
        name: "twitter:image",
        content:
          "https://user-images.githubusercontent.com/5182256/131216951-8f74f425-f775-463d-a11b-0e01ad9fce8d.png",
      },
      { name: "twitter:title", content: "Tinker Tailor Soldier Spy" },
      { name: "twitter:description", content: "Agent" },
    ],
  }}
/>

  7. Reference: SEO component props

    main

    The SEO component accepts several props to manage metadata, robots directives, and social sharing.

    Note on Open Graph: If you define openGraph.basic.title, you must also define type and image. If you define openGraph.basic.url, you must define title, type, and image.