SEO Configuration

Summit themes are built to rank locally out of the box. Every theme ships a complete local-SEO setup: structured data, lead tracking, a sitemap, and a city × service landing-page engine, plus per-page meta tags powered by @summitthemes/seo. Almost all of it is generated automatically from your src/data/business.json, so accurate metadata follows whatever you put in that one file.

Local SEO Features

What ships in every theme:

City × service landing-page engine: a local-SEO landing page is generated for each combination of your serviceAreas and services: the pages that win "service in city" searches.
Complete JSON-LD schema: structured data is generated for LocalBusiness, Service, FAQPage, AggregateRating, and BreadcrumbList, all populated from business.json so rich results stay in sync with your content.
GA4 lead tracking: phone-tap, form-submit, and booking interactions fire GA4 lead events, so you can measure which pages drive calls and bookings. Set your measurement ID in business.json.
XML sitemap: a sitemap is generated at build time covering every page, including the generated city × service pages, so search engines can crawl the whole site.
Zip-code service-area checker: lets visitors confirm you serve their area, reinforcing local relevance.

Because these are driven by business.json, the fastest way to configure SEO is to fill in your business details (name, phone, services, service areas, reviews, and GA4 id) accurately. Per-page <meta> and social tags are then handled by the AstroSeo component described below.

Install

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

npm i @summitthemes/seo

Basic Usage

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

---
import { AstroSeo } from "@summitthemes/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 "@summitthemes/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" },
  ]}
/>

Extra Meta and Link Tags

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 summit-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 "@summitthemes/seo";
---

In Summit 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 Summit SEO repository on GitHub.

Getting Started

Getting started with Summit's Themes