nuxt-seo-best-practices
Nuxt SEO Best Practices
Comprehensive SEO optimization guide for Nuxt 4 applications deployed to Cloudflare Pages/Workers. Contains 11 rules across 4 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Generating dynamic OG images on Cloudflare Workers
- Setting up page-level SEO meta tags and composables
- Adding JSON-LD structured data
- Configuring Nitro for Cloudflare Pages deployment
- Handling SSR-incompatible client-only libraries
- Setting up social sharing meta (Open Graph, Twitter Cards)
- Working with Satori for image generation (NEVER use React)
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | OG Image Generation | CRITICAL | og- |
| 2 | Page SEO & Meta | HIGH | meta- |
| 3 | Structured Data | MEDIUM | schema- |
| 4 | Cloudflare & Nitro Config | HIGH | cf- |
Quick Reference
1. OG Image Generation (CRITICAL)
og-cf-workers- Generate dynamic OG images on Cloudflare Workers with @cf-wasm/ogog-no-react- Use plain JS objects for Satori elements, NEVER Reactog-cache-headers- Cache OG images with immutable headers for CDN
2. Page SEO & Meta (HIGH)
meta-use-page-seo- Reusable composable for consistent page-level SEOmeta-social-tags- Proper Open Graph and Twitter Card meta tagsmeta-canonical-url- Canonical URLs and og:url for every page
3. Structured Data (MEDIUM)
schema-json-ld- JSON-LD structured data in app.vue for Google Rich Results
4. Cloudflare & Nitro Config (HIGH)
cf-compatibility-date- Pin compatibilityDate, never use 'latest'cf-nitro-config- Nitro config for CF Pages (nodeCompat, process.stdout, WASM)cf-ssr-externals- SSR external config for client-only librariescf-wasm-import- WASM module configuration for Cloudflare Workers
How to Use
Read individual rule files for detailed explanations and code examples:
rules/og-cf-workers.md
rules/meta-use-page-seo.md
rules/_sections.md
Each rule file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and Nuxt/Cloudflare-specific notes
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
More from vinayakkulkarni/vue-nuxt-best-practices
nuxt-best-practices
Nuxt 3/4 performance optimization and architecture guidelines for building fast, maintainable full-stack applications. This skill should be used when writing, reviewing, or refactoring Nuxt code to ensure optimal patterns. Triggers on tasks involving data fetching, server routes, auto-imports, rendering modes, or Nuxt-specific features.
107vue-best-practices
Vue.js performance optimization guidelines for building fast, maintainable applications. This skill should be used when writing, reviewing, or refactoring Vue.js code to ensure optimal performance patterns. Triggers on tasks involving Vue components, reactivity, Composition API, state management, or performance improvements.
53nuxt-geo-best-practices
Nuxt GEO (Generative Engine Optimization) guidelines for getting cited by ChatGPT, Perplexity, Claude, Google AI Overviews, and Gemini. Covers AI crawler access (llms.txt, GPTBot/ClaudeBot/PerplexityBot allowlisting), content extractability for RAG retrieval, entity clarity via JSON-LD, and the evidence-backed +40% visibility levers (statistics, citations, quotations) from the GEO arxiv paper. Triggers on tasks involving GEO, AEO, AI search, LLM visibility, llms.txt, AI crawlers, ChatGPT citations, Perplexity, AI Overviews, generative engines, or AI mentions.
4