Documentation

Getting started with Lexington's Themes

SEO Configuration

Every theme includes a basic SEO setup powered by @lexingtonthemes/seo.
The package renders SEO <meta> and <link> tags in your page <head> using a single AstroSeo component, with sensible defaults and support for Open Graph, Twitter Cards, and more.

Install

The package is already included in Lexington themes. To add it to another Astro project:

npm i @lexingtonthemes/seo

Basic Usage

Import and use the <AstroSeo /> component in a page or layout:

---
import { AstroSeo } from "@lexingtonthemes/seo";
---

<AstroSeo
  title="Your Page Title"
  description="Your page description for search engines"
  canonical="https://yourdomain.com/current-page"
/>

Place it inside your layout’s <head> (or in the page that wraps the head). The component outputs the appropriate <meta> and <link> tags.

Open Graph and Twitter

For rich previews on social and messaging apps, pass openGraph and twitter props:

---
import { AstroSeo } from "@lexingtonthemes/seo";
---

<AstroSeo
  title="Your Page Title"
  description="Your page description"
  canonical="https://yourdomain.com/current-page"
  openGraph={{
    url: "https://yourdomain.com/current-page",
    title: "Your Page Title",
    description: "Your page description",
    site_name: "Your Site Name",
    images: [
      {
        url: "https://yourdomain.com/og-image.png",
        width: 1200,
        height: 630,
        alt: "Page preview image",
      },
    ],
  }}
  twitter={{
    cardType: "summary_large_image",
    site: "@yoursite",
    handle: "@yourhandle",
  }}
/>

Noindex and Nofollow

For internal or preview pages you don’t want indexed:

<AstroSeo
  title="Internal Preview"
  description="Internal preview page."
  noindex={true}
  nofollow={true}
/>

Language Alternates

For multi-language sites, use languageAlternates:

<AstroSeo
  title="Docs"
  description="Documentation page."
  canonical="https://example.com/docs"
  languageAlternates={[
    { hreflang: "en", href: "https://example.com/docs" },
    { hreflang: "sv", href: "https://example.com/sv/docs" },
  ]}
/>

Add custom meta or link tags when needed:

<AstroSeo
  title="PWA Page"
  description="PWA-enabled page."
  additionalMetaTags={[
    { name: "theme-color", content: "#0f172a" },
    { property: "og:locale", content: "en_US" },
  ]}
  additionalLinkTags={[
    { rel: "icon", href: "/favicon-32x32.png", sizes: "32x32" },
    { rel: "manifest", href: "/site.webmanifest" },
  ]}
/>

API Overview

Main props:

  • Core: title, description, canonical
  • Social: openGraph, twitter, facebook
  • Robots: noindex, nofollow, robotsProps
  • i18n: languageAlternates, mobileAlternate
  • Custom: additionalMetaTags, additionalLinkTags

The component supports standard SEO meta, full Open Graph (including type-specific fields for Article, Video, etc.), Twitter Cards, and advanced robots directives via robotsProps. For full types and options, see the lexington-seo source.

Migrating from @astrolib/seo

If you’re moving from @astrolib/seo, only the import path changes; the prop shape is compatible:

---
// import { AstroSeo } from "@astrolib/seo";
import { AstroSeo } from "@lexingtonthemes/seo";
---

In Lexington Themes

  • The base layout includes <AstroSeo /> so you get essential meta tags without extra setup.
  • Individual pages (e.g. template detail, blog post, changelog) pass their own title, description, canonical, and often openGraph / twitter so each URL has correct metadata for search and social.

For more examples and development details, see the Lexington SEO repository on GitHub.

Getting Started