Echo

SEO Overview

Echo Boilerplate includes comprehensive SEO features out of the box. This guide covers all SEO functionality, best practices, and how to configure everything.

What's Included

All SEO features available in Echo

robots.txt

Search engine crawling instructions

sitemap.xml

Automated sitemap generation

Structured Data (JSON-LD)

Rich snippets for search engines

OpenGraph & Twitter Cards

Social media previews

Meta Tags

Title, description, canonical URLs

Analytics

Vercel Analytics + optional Google Analytics

robots.txt

Search engine crawling instructions

Located at /robots.txt, this file tells search engines which pages to crawl and index.

How It Works

  • In production: Allows all crawling by default
  • In development/preview: Blocks all crawling
  • Override: Set ROBOTS_DISALLOW_ALL=true to block crawling in production

Configuration

# Production: Allows crawling
User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml
# Development/Preview: Blocks crawling
User-agent: *
Disallow: /
Sitemap: https://yourdomain.com/sitemap.xml

sitemap.xml

Automated sitemap generation

Located at /sitemap.xml, this file helps search engines discover and index all your pages.

What's Included

  • Homepage (/)
  • Blog index (/blog)
  • All published blog posts (/blog/[slug])
  • Last modified dates for each post

How It Works

  • Automatically generated from your database
  • Updates whenever you publish a new post
  • Includes lastmod timestamps
  • Gracefully handles database errors (won't break your site)

Testing

Visit https://yourdomain.com/sitemap.xml to view your sitemap. Submit it to Google Search Console for faster indexing.

Structured Data (JSON-LD)

Rich snippets for search engines

Structured data helps search engines understand your content and enables rich snippets in search results.

Blog Posts

Each blog post automatically includes:

  • BlogPosting schema - Title, description, author, dates, images
  • BreadcrumbList schema - Navigation path for search engines

Example

{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Your Post Title",
"description": "Post description",
"datePublished": "2024-01-01T00:00:00.000Z",
"author": {
"@type": "Person",
"name": "Author Name"
}
}

OpenGraph & Twitter Cards

Social media previews

OpenGraph and Twitter Card meta tags control how your content appears when shared on social media.

What's Included

  • og:type - "article" for blog posts, "website" for other pages
  • og:title - Post title or SEO title override
  • og:description - Post excerpt or SEO description
  • og:image - Cover image, OG image override, or generated OG image
  • twitter:card - "summary_large_image" for rich previews

Image Priority

  1. Explicit OG image URL (from post settings)
  2. Post cover image
  3. Generated OG image via /api/og/post
  4. Default OG image (from site settings)

Meta Tags

Essential meta tags for every page

Essential meta tags are automatically generated for every page.

Page-Level Tags

  • title - Page title (SEO title override if set)
  • description - Meta description (SEO description override if set)
  • canonical - Canonical URL to prevent duplicate content
  • robots - Indexing instructions (respects noindex setting)

Blog Post Overrides

In the admin panel, you can override SEO settings for each post:

  • • SEO Title
  • • SEO Description
  • • Canonical URL
  • • OG Image URL
  • • Noindex flag

Best Practices

Title Tags

  • • Keep under 60 characters
  • • Include your brand name at the end
  • • Use descriptive, keyword-rich titles

Meta Descriptions

  • • Keep under 160 characters
  • • Write compelling, action-oriented copy
  • • Include a call-to-action

Images

  • • Use high-quality images (1200x630px for OG images)
  • • Optimize file sizes (use WebP when possible)
  • • Always include alt text

URLs

  • • Use descriptive, keyword-rich slugs
  • • Keep URLs short and readable
  • • Use canonical URLs to avoid duplicate content