SEO & Performance Optimization

This guide covers the SEO and performance optimizations implemented in Meister Bill.

Overview

The application is optimized for: - Search Engine Visibility - Google, Bing, AI search engines (ChatGPT, Claude, Perplexity) - Core Web Vitals - Fast loading, interactivity, visual stability - Accessibility - Screen readers, keyboard navigation, semantic HTML

SEO Optimizations

Meta Tags & Structured Data

All pages use the useSeo() composable for consistent SEO:

const { setPageSeo, getOrganizationSchema } = useSeo()

setPageSeo({
  title: 'Page Title - Meister Bill',
  description: 'Page description for search results',
  keywords: ['invoice', 'billing', 'freelancer'],
  type: 'website', // or 'article' for blog posts
})

Automatic meta tags include: - Title and description - Open Graph (Facebook, LinkedIn) - Twitter Cards - Canonical URLs - Hreflang tags (multilingual support) - Publisher and copyright

Multilingual SEO (Hreflang)

Automatic hreflang tags for English and German:

<link rel="alternate" hreflang="en-us" href="https://meister-bill.com/en/page" />
<link rel="alternate" hreflang="de-de" href="https://meister-bill.com/de/page" />
<link rel="alternate" hreflang="x-default" href="https://meister-bill.com/en/page" />

Structured Data (Schema.org)

Multiple schema types implemented:

Schema Type Used On Purpose
Organization Homepage, About, Contact Google Knowledge Panel
WebSite Homepage Site search in Google
Article Blog posts Rich snippets in search
BreadcrumbList All pages Navigation breadcrumbs
SoftwareApplication Features App store-style listings
FAQPage Contact page Expandable FAQ in search
Product Founder Deal Product listings

AI Search Engine Support

robots.txt allows major AI crawlers:

  • OpenAI (ChatGPT, GPTBot, OAI-SearchBot)
  • Google (Google-Extended)
  • Anthropic (Claude, ClaudeBot)
  • Perplexity (PerplexityBot)
  • Microsoft (BingBot, BingPreview)
  • Meta (Meta-ExternalAgent)
  • Apple (Applebot)
  • Common Crawl (CCBot - used by many LLMs)

E-E-A-T Signals

Experience, Expertise, Authoritativeness, Trustworthiness:

  • About Page: Legal entity, founder info, compliance badges
  • Contact Page: Multiple contact methods, physical address
  • Privacy/Terms: Clear policies with structured data links
  • LinkedIn/YouTube: Social profiles in Organization schema

Performance Optimizations

JavaScript Bundle Optimization

Content-Based Chunk Naming:

// nuxt.config.ts
rollupOptions: {
  output: {
    // Use content-based chunk naming for better caching
    entryFileNames: '_nuxt/[name]-[hash].js',
    chunkFileNames: '_nuxt/[name]-[hash].js',
    assetFileNames: (assetInfo) => {
      const info = assetInfo.name || ''
      if (info.endsWith('.css')) return '_nuxt/css/[name]-[hash][extname]'
      return '_nuxt/[name]-[hash][extname]'
    },
  },
}

Benefits: - Long-term caching: Content-based hashes only change when files change - Parallel loading: Smaller, independent chunks load faster - CDN optimization: Consistent filenames maximize cache hits

Additional optimizations: - Terser minification: Removes whitespace, shortens variable names - Console removal: drop_console: true in production - CSS code splitting: Per-component CSS extracted for parallel loading

Component Lazy Loading

Heavy components loaded on-demand:

<!-- Instead of direct import -->
<CurrencyConversionModal />

<!-- Use lazy loading -->
<LazyCurrencyConversionModal />

Components using lazy loading: - LazyCurrencyConversionModal - Heavy conversion logic - LazyImageCropperModal - Image processing

CSS Optimization

  • CSS Code Splitting: Per-component CSS extracted
  • Tailwind Purging: Unused styles removed in production
  • DaisyUI: Component library with minimal CSS overhead

Caching Strategy

Route-based caching headers:

Route Pattern Cache Duration Reason
/, /blog/** 1 year Static content
/member/** No cache Dynamic user data
/sign-in, /sign-up No store Security sensitive
/founder-deal 1 hour Time-sensitive offer

Image Optimization

  • Nuxt Image: Automatic format conversion (WebP, AVIF)
  • Cloudflare Images: Edge-optimized delivery
  • Lazy Loading: Images load as user scrolls
  • Placeholders: Blur-up placeholders for LCP

Minification & Compression

Terser Options:

terserOptions: {
  compress: {
    drop_console: true,    // Remove console.log
    drop_debugger: true,   // Remove debugger statements
  },
}

Core Web Vitals Targets

Metric Target Current Status
LCP (Largest Contentful Paint) < 2.5s Optimized via lazy loading
FID (First Input Delay) < 100ms Optimized via code splitting
CLS (Cumulative Layout Shift) < 0.1 Optimized via image placeholders
TTFB (Time to First Byte) < 600ms Edge deployment on Cloudflare
FCP (First Contentful Paint) < 1.8s Optimized via critical CSS

Monitoring

Umami Analytics

Privacy-friendly analytics (GDPR-compliant): - Page views and visitor counts - Device and browser breakdown - Geographic distribution - No cookies, no personal data collection

Sentry Error Tracking

Performance monitoring: - Core Web Vitals tracking - Error rates and stack traces - Slow API call detection

SEO Checklist for New Pages

When adding new pages:

  1. Add setPageSeo() with title, description, keywords
  2. Check H1 structure - One H1 per page, descriptive
  3. Add structured data if applicable (Article, FAQPage, etc.)
  4. Verify translations - Add to en.json and de.json
  5. Test meta tags - Use Meta Tags Preview
  6. Check hreflang - Verify language alternates render correctly

Testing SEO

Local Testing

# Build for production (minified, optimized)
pnpm --filter @meisterbill/web build

# Preview production build
pnpm --filter @meisterbill/web preview

Tools

  • Google Search Console - Indexing status, search queries
  • PageSpeed Insights - Core Web Vitals scores
  • Rich Results Test - Structured data validation
  • Meta Tags - Social sharing preview
  • Lighthouse - Comprehensive audit

See Also