Advanced Astroplate Configuration

This comprehensive guide covers advanced configuration options for power users who want to maximize the potential of their Astroplate sites. From deep SEO customization to performance optimization, you’ll learn techniques that separate good sites from great ones.

Table of Contents

Open Table of Contents

• Advanced Design Tokens
  • Complete Color System
  • Typography Scale
  • Spacing System
• Comprehensive SEO Configuration
  • Page-Level SEO
  • Structured Data
  • Site-Level SEO
• Performance Optimization
  • Image Optimization Best Practices
  • Critical CSS Optimization
  • JavaScript Minimization
  • Caching Strategy
• Content Organization Strategies
  • Category Taxonomy
  • Tagging Strategy
  • Featured Content
  • Content Series
• llms.txt and AI Search Optimization
  • Understanding llms.txt
  • Optimizing for AI Summaries
  • Content Quality Signals
• Dark Mode Configuration
  • Dark Mode Best Practices
• Advanced Navigation Patterns
  • Mega Menus
  • Contextual Navigation
• Performance Monitoring
  • Key Metrics
  • Monitoring Tools
• Conclusion

Advanced Design Tokens

Design tokens are the foundation of your site’s visual identity. Beyond basic colors and fonts, you can configure comprehensive design systems.

Complete Color System

A production-ready color system should include states and variations:

{
  "designTokens": {
    "colors": {
      "brand": {
        "primary": "#3b82f6",
        "primaryHover": "#2563eb",
        "primaryActive": "#1d4ed8",
        "secondary": "#6366f1",
        "secondaryHover": "#4f46e5",
        "accent": "#f59e0b",
        "accentHover": "#d97706"
      },
      "background": {
        "page": "#ffffff",
        "surface": "#f8fafc",
        "elevated": "#ffffff",
        "muted": "#e2e8f0",
        "subtle": "#f1f5f9"
      },
      "text": {
        "primary": "#1e293b",
        "secondary": "#64748b",
        "muted": "#94a3b8",
        "inverse": "#ffffff",
        "link": "#3b82f6",
        "linkHover": "#2563eb"
      },
      "border": {
        "default": "#e2e8f0",
        "muted": "#f1f5f9",
        "strong": "#cbd5e1"
      },
      "status": {
        "success": "#22c55e",
        "warning": "#f59e0b",
        "error": "#ef4444",
        "info": "#3b82f6"
      }
    }
  }
}

Typography Scale

Create a harmonious type scale using modular ratios:

{
  "designTokens": {
    "typography": {
      "fonts": {
        "heading": "'Poppins', 'SF Pro Display', -apple-system, sans-serif",
        "body": "'Inter', 'SF Pro Text', -apple-system, sans-serif",
        "mono": "'JetBrains Mono', 'SF Mono', monospace"
      },
      "scale": {
        "ratio": 1.25,
        "base": 16
      },
      "weights": {
        "normal": 400,
        "medium": 500,
        "semibold": 600,
        "bold": 700
      },
      "lineHeight": {
        "tight": 1.25,
        "normal": 1.5,
        "relaxed": 1.75
      }
    }
  }
}

Spacing System

Consistent spacing creates visual harmony:

{
  "designTokens": {
    "spacing": {
      "scale": [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96],
      "container": {
        "padding": 16,
        "maxWidth": 1280
      }
    }
  }
}

Comprehensive SEO Configuration

SEO is critical for discoverability. Here’s how to configure it comprehensively.

Page-Level SEO

Every page should have complete SEO metadata:

{
  "seo": {
    "title": "Advanced Astroplate Guide | My Blog",
    "description": "Master advanced features with this 160-character meta description optimized for search result snippets and click-through rates.",
    "canonical": "https://myblog.com/advanced-guide",
    "robots": "index, follow",
    "keywords": ["astroplate", "advanced", "seo", "configuration"],
    "openGraph": {
      "type": "article",
      "title": "Advanced Astroplate Configuration Guide",
      "description": "Master advanced features for maximum site performance",
      "image": "/images/advanced-guide-og.jpg",
      "imageWidth": 1200,
      "imageHeight": 630,
      "siteName": "My Blog",
      "locale": "en_US",
      "article": {
        "publishedTime": "2026-08-09T00:00:00Z",
        "modifiedTime": "2026-08-11T00:00:00Z",
        "author": "Platform Team",
        "section": "Tutorials",
        "tags": ["seo", "configuration", "advanced"]
      }
    },
    "twitter": {
      "card": "summary_large_image",
      "site": "@myblog",
      "creator": "@platformteam",
      "title": "Advanced Astroplate Configuration",
      "description": "Master advanced features for your blog",
      "image": "/images/advanced-guide-twitter.jpg"
    }
  }
}

Structured Data

The adapter automatically generates JSON-LD structured data, but you can enhance it:

{
  "seo": {
    "structuredData": {
      "@type": "TechArticle",
      "proficiencyLevel": "Expert",
      "dependencies": "Node.js 18+, Git",
      "wordCount": 2500,
      "timeRequired": "PT30M"
    }
  }
}

Site-Level SEO

Configure site-wide SEO in site.json:

{
  "seo": {
    "defaultImage": "/images/default-og.jpg",
    "titleTemplate": "%s | My Blog",
    "defaultRobots": "index, follow",
    "sitemap": {
      "exclude": ["/thank-you", "/preview/*"],
      "changefreq": "weekly",
      "priority": 0.7
    }
  }
}

Performance Optimization

Astroplate achieves 100/100 PageSpeed scores. Here’s how to maintain that.

Image Optimization Best Practices

Images are often the largest assets. Optimize them:

1. Use WebP Format - 25-35% smaller than JPEG
2. Responsive Images - Serve appropriate sizes
3. Lazy Loading - Load images as needed
4. Aspect Ratios - Prevent layout shifts

{
  "content": {
    "type": "inline",
    "content": "![Alt text](/images/hero.webp)"
  },
  "metadata": {
    "images": [
      {
        "src": "/images/hero.webp",
        "width": 1200,
        "height": 630,
        "loading": "eager"
      }
    ]
  }
}

Critical CSS Optimization

The adapter generates optimized CSS from design tokens:

• CSS Custom Properties - Efficient inheritance
• Minimal Specificity - Fast selector matching
• Tree Shaking - Only used styles included

JavaScript Minimization

Astro’s Islands Architecture ensures minimal JavaScript:

• Zero JS by Default - Static HTML ships first
• Selective Hydration - Only interactive components load JS
• Deferred Loading - Non-critical JS loads after render

Caching Strategy

Cloudflare Pages provides excellent caching:

Asset Type	Cache Duration	Strategy
HTML	1 hour	Stale-while-revalidate
CSS/JS	1 year	Immutable
Images	1 year	Immutable
Fonts	1 year	Immutable

Content Organization Strategies

Organize content for maximum discoverability and user experience.

Category Taxonomy

Create a logical category hierarchy:

{
  "metadata": {
    "categories": ["tutorials"],
    "subcategories": ["advanced", "configuration"]
  }
}

Recommended category structure:

• Announcements - News and updates
• Tutorials - Step-by-step guides
• Deep Dives - Technical explorations
• Case Studies - Real-world examples
• Reference - API docs and specifications

Tagging Strategy

Effective tagging improves content discovery:

{
  "metadata": {
    "tags": [
      "seo",
      "performance",
      "design-tokens",
      "configuration",
      "advanced"
    ]
  }
}

Tag best practices:

• Use lowercase with hyphens
• Limit to 5-7 tags per article
• Maintain a consistent vocabulary
• Balance specificity and breadth

Featured Content

Highlight important content:

{
  "metadata": {
    "featured": true,
    "featuredOrder": 1,
    "featuredUntil": "2026-12-31"
  }
}

Content Series

Organize related content into series:

{
  "metadata": {
    "series": {
      "name": "Astroplate Mastery",
      "part": 3,
      "totalParts": 5
    }
  }
}

llms.txt and AI Search Optimization

Prepare your content for AI-powered search engines and assistants.

Understanding llms.txt

The llms.txt standard helps AI systems understand your site:

# My Blog

> A blog about web development and Astroplate

This site contains tutorials, guides, and deep dives into modern web development.

## Main Sections

- [Getting Started](/getting-started): Beginner tutorials
- [Advanced Guide](/advanced-guide): Expert configuration
- [About](/about): About this site

## Important Topics

- Astroplate configuration
- Design tokens
- SEO optimization
- Performance tuning

Optimizing for AI Summaries

Structure content for AI comprehension:

1. Clear Headings - Use descriptive H2/H3 headings
2. Summary First - Lead with key takeaways
3. Lists and Tables - Structured data is easier to parse
4. Consistent Terminology - Use the same terms throughout

Content Quality Signals

AI systems evaluate content quality:

• Original Research - Unique insights and data
• Expert Authority - Author credentials and citations
• Comprehensive Coverage - Thorough topic exploration
• Recent Updates - Fresh, maintained content

Dark Mode Configuration

Configure sophisticated dark mode behavior:

{
  "designTokens": {
    "themeMode": {
      "default": "system",
      "allowToggle": true,
      "persistPreference": true,
      "darkMode": {
        "background": {
          "page": "#0f172a",
          "surface": "#1e293b",
          "elevated": "#334155"
        },
        "text": {
          "primary": "#f1f5f9",
          "secondary": "#94a3b8",
          "muted": "#64748b"
        },
        "brand": {
          "primary": "#60a5fa"
        }
      }
    }
  }
}

Dark Mode Best Practices

• Reduce Contrast - Pure white (#fff) on dark is harsh
• Adjust Saturation - Colors may need adjustment
• Test Accessibility - Maintain WCAG compliance
• Consider Images - May need dark mode alternatives

Advanced Navigation Patterns

Create sophisticated navigation structures:

Mega Menus

{
  "navigation": [
    {
      "label": "Products",
      "megaMenu": true,
      "columns": [
        {
          "title": "Features",
          "items": [
            { "label": "Design Tokens", "url": "/features/design-tokens" },
            { "label": "SEO Tools", "url": "/features/seo" }
          ]
        },
        {
          "title": "Resources",
          "items": [
            { "label": "Documentation", "url": "/docs" },
            { "label": "API Reference", "url": "/api" }
          ]
        }
      ]
    }
  ]
}

Contextual Navigation

Add page-specific navigation:

{
  "metadata": {
    "relatedPages": [
      "/getting-started",
      "/design-tokens-guide",
      "/seo-checklist"
    ],
    "previousPage": "/getting-started",
    "nextPage": "/deployment-guide"
  }
}

Performance Monitoring

Track and maintain performance:

Key Metrics

Metric	Target	Measurement
LCP	< 2.5s	Core Web Vitals
FID	< 100ms	Core Web Vitals
CLS	< 0.1	Core Web Vitals
TTFB	< 800ms	Server response
FCP	< 1.8s	First paint

Monitoring Tools

• PageSpeed Insights - Google’s official tool
• WebPageTest - Detailed waterfall analysis
• Lighthouse CI - Automated performance testing
• Real User Monitoring - Cloudflare Analytics

Conclusion

Mastering these advanced configurations will help you build sites that are fast, discoverable, and maintainable. The key principles to remember:

1. Design systematically with comprehensive tokens
2. Optimize proactively rather than reactively
3. Structure content for both humans and AI
4. Monitor continuously to maintain quality

For more information, explore our other resources:

• Getting Started - Foundational concepts
• About - Platform overview

---

This guide is updated regularly to reflect the latest best practices and platform capabilities.