Skip to content

seo-patterns.md

Latest commit

 

History

History
168 lines (107 loc) · 4.57 KB

seo-patterns.md

File metadata and controls

168 lines (107 loc) · 4.57 KB
Raw

🔍 SEO Optimization

Comprehensive SEO implementation with internationalization support, structured meta tags, and performance optimization for search engines.

🏗️ SEO Architecture

SEO Composable

Implementation: See app/composables/features/useSeo.ts for complete SEO meta tag management with i18n integration.

Features:

  • ✅ Dynamic meta tags based on page content
  • ✅ Internationalization support for multi-language SEO
  • ✅ Open Graph integration for social sharing
  • ✅ Twitter Card optimization
  • ✅ Structured data preparation

📊 Meta Tag Management

Dynamic Title Generation

Implementation: The SEO composable automatically generates page titles based on:

  • Page-specific translations from i18n/locales/*/seo.json
  • Fallback to site name for missing translations
  • Proper title hierarchy and structure

Meta Descriptions

Implementation: Localized meta descriptions are generated from SEO translation files with fallback support.

🌍 Internationalized SEO

Multi-language Meta Tags

Content: See i18n/locales/*/seo.json for complete SEO content structure including:

Structure:

  • Site information - Name, description, keywords
  • Page-specific content - Individual page titles and descriptions
  • Open Graph data - Social media sharing optimization
  • Locale-specific keywords - Targeted keywords per language

URL Structure

Routing: SEO-friendly URLs with locale prefixes:

  • /fr/auth/login - French authentication page
  • /en/auth/login - English authentication page
  • Automatic canonical URL generation

📱 Social Media Integration

Open Graph Protocol

Implementation: Complete Open Graph meta tags for social media sharing:

  • Dynamic titles and descriptions per page
  • Localized content based on user language
  • Proper image and site information
  • Website type optimization

Twitter Cards

Implementation: Twitter Card optimization for enhanced social sharing with summary_large_image format.

🔧 Usage Patterns

In Pages

Implementation: See authentication pages in app/pages/auth/ for SEO composable usage patterns.

Usage Pattern:

  1. Import useSeo() composable
  2. Pass page key for specific SEO content
  3. Automatic meta tag generation and application

Dynamic Content

Implementation: SEO meta tags automatically update based on:

  • Current locale/language
  • Page content and context
  • User preferences and settings

🎯 SEO Best Practices

Technical SEO

Implementation: The project includes:

  • ✅ Semantic HTML structure
  • ✅ Meta tag optimization with proper hierarchy
  • ✅ Localized URLs for international SEO
  • ✅ Canonical URLs to prevent duplicate content
  • ✅ Language declarations in HTML
  • ✅ Structured data preparation

Performance SEO

Configuration: See nuxt.config.ts for performance optimizations:

  • Server-side rendering for better crawling
  • Automatic image optimization
  • CSS and JavaScript optimization
  • Critical resource prioritization

🚀 Site Configuration

Base URL Configuration

Configuration: See .env.example for NUXT_PUBLIC_SITE_URL configuration for canonical URLs and absolute link generation.

Robots and Sitemap

Implementation: Nuxt automatically handles:

  • Robots.txt generation
  • Sitemap XML creation
  • Proper indexing directives

📈 Analytics Integration

SEO Monitoring

Ready for Integration: The SEO structure supports:

  • Google Analytics integration
  • Search Console verification
  • Social media analytics
  • Core Web Vitals monitoring

✨ Features

  • ✅ Automatic meta generation from translations
  • ✅ Multi-language SEO support
  • ✅ Open Graph optimization
  • ✅ Twitter Card integration
  • ✅ Canonical URLs for all pages
  • ✅ Structured data ready
  • ✅ Performance optimized for Core Web Vitals

🔧 Customization

Adding New Page SEO

  1. Add translations: Create entries in i18n/locales/*/seo.json
  2. Use composable: Call useSeo('pageKey') in your page
  3. Test implementation: Verify meta tags in browser dev tools

SEO Content Structure

Translation Format: Each page should have:

  • title - Page-specific title
  • description - Meta description
  • og.title - Open Graph title
  • og.description - Open Graph description

📚 Resources