SEO

Built-in SEO features for maximum search engine visibility and social sharing.

Overview

Mostra includes a comprehensive SEO suite out of the box, giving you everything needed for search engine optimization and social media sharing without any extra setup.

  • Meta Tags - Title, description, and robots directives
  • Open Graph - Facebook, LinkedIn, and other social platforms
  • Twitter Cards - Rich previews on Twitter/X
  • Canonical URLs - Prevent duplicate content issues
  • Structured Data - JSON-LD for rich search results
  • Sitemap - Auto-generated XML sitemap
  • robots.txt - Search engine crawling directives

Basic Usage

There are two ways to use SEO in Mostra:

  • Via Layout - The Layout component includes SEO automatically. Just pass SEO props to Layout.
  • Via SEO Component - Use SEO.astro directly for more control or custom layouts.

Option 1: Via Layout (Recommended)

The Layout component handles SEO automatically. Just pass a title and optionally a description: 

<Layout
  title="My Page Title"
  description="A custom description for this page"
>
  <!-- Page content -->
</Layout>

If no description is provided, it falls back to the site-wide description from site.ts.

Option 2: SEO Component Directly

For custom layouts or more control, import and use the SEO.astro component directly in your page's <head>: 

// In your custom layout or page
import SEO from "../components/SEO.astro";

// In <head>:
<SEO
  title="My Page"
  description="Page description"
  image="/og-image.png"
  type="website"
/>

This is useful when building custom layouts that don't use the default Layout component.

Available Props

Both Layout and SEO components accept these props:

title
string
Page title (required). Automatically formatted as "Title | Site Name"
description
string
Page description for meta tags and social sharing
image
string
OG image URL (absolute URL recommended)
type
"website" | "article" | "product"
Open Graph content type (default: "website")
canonical
string
Override the canonical URL
noindex
boolean
Prevent search engines from indexing this page

The SEO component also accepts these advanced props (used directly on SEO component):

nofollow
boolean
Prevent search engines from following links on this page
publishedDate
string
Article published date in ISO 8601 format (for type="article")
modifiedDate
string
Article modified date in ISO 8601 format (for type="article")
author
string
Article author name (for type="article")
structuredData
object
Custom JSON-LD structured data to merge with defaults

Social Sharing Images

Configure a default Open Graph image in site.ts: 

// src/config/site.ts
export const siteConfig = {
  // ...
  seo: {
    defaultImage: "/og-image.png",
    twitterHandle: "@yourusername",
  },
};

For page-specific images, pass the image prop to Layout: 

<Layout
  title="Product Launch"
  image="/images/product-og.png"
>

Tip: OG images should be 1200x630 pixels for optimal display across all platforms.

Blog Posts & Articles

For blog posts or articles, use the type="article" prop to enable article-specific meta tags: 

<Layout
  title="My Blog Post"
  type="article"
>
  <!-- Post content -->
</Layout>

Structured Data (JSON-LD)

The SEO component automatically generates JSON-LD structured data for:

  • Organization - Your company/brand information
  • WebSite - Site-level metadata
  • WebPage / Article - Page-specific information

This helps search engines understand your content and can enable rich results in search listings.

Sitemap

An XML sitemap is automatically generated at build time using @astrojs/sitemap. Configure the site URL in astro.config.mjs: 

// astro.config.mjs
export default defineConfig({
  site: 'https://yourdomain.com',
  integrations: [
    sitemap(),
  ],
});

After building, your sitemap will be available at /sitemap-index.xml.

robots.txt

A robots.txt file is included at public/robots.txt. Update it with your production domain: 

# public/robots.txt
User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap-index.xml

Deployment Checklist

Before deploying, make sure to:

  • Update site URL in astro.config.mjs
  • Update sitemap URL in public/robots.txt
  • Add a default OG image at public/og-image.png
  • Configure twitterHandle in site.ts (if applicable)
  • Review page titles and descriptions for each page