Astroria
Copied to clipboard!

SEO Components

1 min read

SEO Components

10 components for search engine optimization and analytics.

PageMeta

Complete SEO meta tags including Open Graph and Twitter cards.

---
import PageMeta from "@components/seo/PageMeta.astro";
---

<head>
  <PageMeta
    title="Getting Started"
    description="Learn how to set up Astroria Docs"
    image="/og-image.png"
    type="article"
    publishedTime="2024-01-15"
    modifiedTime="2024-06-01"
  />
</head>

Props

PropTypeDefaultDescription
titlestringrequiredPage title
descriptionstringrequiredMeta description
imagestring-OG image URL
type'website' | 'article''website'Page type
publishedTimestring-Article publish date
modifiedTimestring-Article modified date

SchemaOrg

JSON-LD structured data for rich search results.

---
import SchemaOrg from "@components/seo/SchemaOrg.astro";
---

<head>
  <SchemaOrg
    type="TechArticle"
    title="API Reference"
    description="Complete API documentation"
    datePublished="2024-01-15"
    dateModified="2024-06-01"
  />
</head>

Props

PropTypeDefaultDescription
type'TechArticle' | 'WebPage' | 'FAQPage'requiredSchema type
titlestringrequiredPage title
descriptionstringrequiredPage description
datePublishedstring-Publish date
dateModifiedstring-Modified date

CanonicalURL

Auto-generated canonical link tag.

---
import CanonicalURL from "@components/seo/CanonicalURL.astro";
---

<head>
  <CanonicalURL />
  <!-- Or with custom URL -->
  <CanonicalURL url="/docs/guide/" />
</head>

Props

PropTypeDefaultDescription
urlstringcurrent URLCustom canonical URL

HreflangTags

Multi-language SEO tags for internationalization.

---
import HreflangTags from "@components/seo/HreflangTags.astro";
---

<head>
  <HreflangTags
    currentLang="en"
    translations={[
      { lang: "en", url: "/docs/guide/" },
      { lang: "es", url: "/es/docs/guide/" },
      { lang: "ja", url: "/ja/docs/guide/" }
    ]}
  />
</head>

Props

PropTypeDefaultDescription
currentLangstringrequiredCurrent page language
translations{ lang: string; url: string }[]requiredAvailable translations

StructuredData

Generic JSON-LD schema markup for any schema type.

---
import StructuredData from "@components/seo/StructuredData.astro";
---

<head>
  <StructuredData
    type="BreadcrumbList"
    data={{
      itemListElement: [
        { "@type": "ListItem", position: 1, name: "Home", item: "/" },
        { "@type": "ListItem", position: 2, name: "Docs", item: "/docs/" }
      ]
    }}
  />
</head>

Props

PropTypeDefaultDescription
type'Article' | 'BreadcrumbList' | 'WebPage' | 'FAQPage' | 'HowTo'requiredSchema type
dataRecord<string, unknown>requiredSchema data

OpenGraph

Standalone Open Graph and Twitter card tags.

---
import OpenGraph from "@components/seo/OpenGraph.astro";
---

<head>
  <OpenGraph
    title="Astroria Docs"
    description="Premium documentation theme"
    image="/og-image.png"
    type="website"
    siteName="Astroria"
    locale="en_US"
    twitterCard="summary_large_image"
    twitterSite="@astroria"
  />
</head>

Props

PropTypeDefaultDescription
titlestringrequiredPage title
descriptionstringrequiredPage description
imagestring-OG image URL
type'website' | 'article''website'Page type
urlstringcurrent URLPage URL
siteNamestring'Astroria Docs'Site name
localestring'en_US'Locale code
twitterCard'summary' | 'summary_large_image''summary_large_image'Twitter card type
twitterSitestring-Twitter handle

AnalyticsTracking

Google Analytics 4 integration.

---
import AnalyticsTracking from "@components/seo/AnalyticsTracking.astro";
---

<head>
  <AnalyticsTracking measurementId="G-XXXXXXXXXX" />
</head>

Props

PropTypeDefaultDescription
measurementIdstringrequiredGA4 measurement ID

SearchAnalytics

Track search queries and provide analytics.

---
import SearchAnalytics from "@components/seo/SearchAnalytics.astro";
---

<SearchAnalytics enabled={true} />

Props

PropTypeDefaultDescription
enabledbooleantrueEnable tracking

Usage in JS:

// Get popular searches
window.getSearchAnalytics(); // Returns top 10 queries

ArticleAnalytics

Track article views, scroll depth, and time on page.

---
import ArticleAnalytics from "@components/seo/ArticleAnalytics.astro";
---

<ArticleAnalytics
  articleId="getting-started"
  title="Getting Started Guide"
/>

Props

PropTypeDefaultDescription
articleIdstringrequiredUnique article ID
titlestringrequiredArticle title

Tracked Events:

  • page_view - Initial view
  • time_on_page - Seconds spent
  • scroll_depth - 25%, 50%, 75%, 100%

MaintenanceBanner

Site-wide maintenance or incident notice.

---
import MaintenanceBanner from "@components/seo/MaintenanceBanner.astro";
---

<MaintenanceBanner
  message="Scheduled maintenance in progress"
  estimatedEnd={new Date('2024-06-15T18:00:00')}
  type="maintenance"
/>

Props

PropTypeDefaultDescription
messagestring'We are currently performing scheduled maintenance.'Banner message
estimatedEndDate-Estimated completion time
type'maintenance' | 'incident' | 'planned''maintenance'Banner type (affects color)

Types:

  • maintenance - Yellow background
  • incident - Red background
  • planned - Blue background