SEO Best Practices for Modern Web Apps

Search Engine Optimization (SEO) is a fundamental requirement for modern web publications.

---

1. Dynamic Meta Tags & Page Titles

Every page must contain unique <title>, <meta name="description">, and <link rel="canonical"> elements.

<title>SEO Best Practices for Modern Web Apps</title>
<meta name="description" content="Master technical SEO, OpenGraph metadata, and structured data." />
<link rel="canonical" href="https://example.com/blog/seo-best-practices/" />

---

2. Automated Sitemap & RSS XML Feeds

Astro generates production sitemaps automatically using @astrojs/sitemap.

// astro.config.mjs
import sitemap from '@astrojs/sitemap';

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

---

3. Structured Data (JSON-LD)

Include application/ld+json structured data for Google Rich Results:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "SEO Best Practices for Modern Web Apps",
  "datePublished": "2026-08-03"
}
</script>

Canonical URLs

A canonical URL tells search engines which version of a page is the authoritative one. This prevents duplicate content penalties when multiple URLs serve the same content (e.g., /blog/post vs /blog/post/).

<link rel="canonical" href="https://example.com/blog/seo-best-practices/" />

In Astro, use the site base URL with the Astro.url helper:

---
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---
<link rel="canonical" href={canonicalURL} />

Open Graph Metadata

Open Graph tags control how your pages appear when shared on social media (LinkedIn, Twitter/X, Discord):

<meta property="og:type" content="article" />
<meta property="og:title" content="SEO Best Practices for Modern Web Apps" />
<meta property="og:description" content="Master technical SEO, OpenGraph metadata, and structured data in Astro." />
<meta property="og:image" content="https://example.com/og/seo-post.png" />
<meta property="og:url" content="https://example.com/blog/seo-best-practices/" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SEO Best Practices for Modern Web Apps" />

Robots Meta Tag

Control page indexing with the robots meta tag:

<!-- Allow indexing (default behaviour) -->
<meta name="robots" content="index, follow" />

<!-- Prevent indexing (drafts, thin content, paginated pages) -->
<meta name="robots" content="noindex, nofollow" />

<!-- Index but do not follow links -->
<meta name="robots" content="index, nofollow" />

Heading Hierarchy

Each page should have exactly one <h1> — usually the article title rendered by the layout. Subsequent sections use <h2>, subsections use <h3>, and so on.

Do not skip levels (e.g., <h1> → <h3>). Screen readers and search engines use heading structure to understand page hierarchy.

JSON-LD Structured Data (Extended)

Beyond basic BlogPosting, structured data can unlock rich results for FAQs and breadcrumbs:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is a canonical URL?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A canonical URL is the preferred URL for a page when multiple URLs serve identical content."
      }
    }
  ]
}
</script>

Validate your structured data using Google’s Rich Results Test.

Core Web Vitals and SEO

Google uses Core Web Vitals — LCP, INP, and CLS — as ranking signals. A fast, stable page experience is now a direct ranking factor. See the Core Web Vitals Optimization Guide for implementation details.

Common SEO Mistakes in Web Apps

Mistake	Consequence	Fix
JavaScript-only rendering	Googlebot may not index content	Use SSG or SSR
Missing <title> tag	Browser shows URL in tab; poor SERP snippet	Always include unique title
Duplicate meta descriptions	Reduced CTR from search results	Write unique descriptions per page
Missing alt attributes on images	Content invisible to screen readers and image search	Always add descriptive alt text
Pagination without canonical	Duplicate content penalty	Use rel=canonical on paginated pages

Sitemap and robots.txt

A sitemap tells search engines which URLs to crawl. A robots.txt file tells them which URLs to skip.

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

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

Astro generates the sitemap automatically with the @astrojs/sitemap integration. Verify your sitemap is accessible at /sitemap-index.xml after each build.