mcpField
N
nuxt-seo-best-practices

nuxt-seo-best-practices

github.com/vinayakkulkarniMarketing & growth4364 installsUpdated 14w ago
Repository

About nuxt-seo-best-practices

A reference skill for SEO work on Nuxt 4 applications deployed to Cloudflare Pages or Workers. It organizes 11 rules into four priority categories, with examples for metadata, structured data, OG images, and deployment configuration.

Key features

  1. 0111 rules in four priority groups
  2. 02Dynamic OG image guidance
  3. 03Page metadata and social tags
  4. 04JSON-LD structured data
  5. 05Cloudflare and Nitro configuration

Use cases

  1. 01Adding page-level SEO metadata
  2. 02Generating social sharing images
  3. 03Adding structured data
  4. 04Configuring Nuxt for Cloudflare

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vinayakkulkarni/vue-nuxt-best-practices --skill nuxt-seo-best-practices

After installing, type/nuxt-seo-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

AGENTS.md
metadata.json
package.json
rules/
_sections.md
_template.md
cf-compatibility-date.md
cf-nitro-config.md
cf-ssr-externals.md
cf-wasm-import.md
meta-canonical-url.md
meta-social-tags.md
meta-use-page-seo.md
og-cache-headers.md
og-cf-workers.md
og-corp-cross-origin.md
og-no-react.md
schema-json-ld.md
scripts/
build.ts
validate.ts

Details

From the project README

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.

Nuxt 4.5 note: head management now runs on unhead v3 — useHead typing is stricter (type errors after upgrading are usually genuine tightening, not regressions) and promise input is no longer supported. All useHead/useSeoMeta examples in this skill use plain synchronous values and are v3-compatible.

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

PriorityCategoryImpactPrefix
1OG Image GenerationCRITICALog-
2Page SEO & MetaHIGHmeta-
3Structured DataMEDIUMschema-
4Cloudflare & Nitro ConfigHIGHcf-

Quick Reference

1. OG Image Generation (CRITICAL)
  • og-cf-workers - Generate dynamic OG images on Cloudflare Workers with @cf-wasm/og
  • og-no-react - Use plain JS objects for Satori elements, NEVER React
  • og-cache-headers - Cache OG images with immutable headers for CDN
  • og-corp-cross-origin - Serve OG images with CORP cross-origin or every social card silently breaks
2. Page SEO & Meta (HIGH)
  • meta-use-page-seo - Reusable composable for consistent page-level SEO
  • meta-social-tags - Proper Open Graph and Twitter Card meta tags
  • meta-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 libraries
  • cf-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

Comments

Markdown supported