skills.rest
vinayakkulkarni
vinayakkulkarniCOMMUNITY
Explore all skills by this author →
Website𝕏@_vinayak_kGitHub

nuxt-seo-best-practices

Optimize Nuxt 4 SEO for Cloudflare Pages/Workers deployments.

51|3|Updated Jan 10, 2023
Search Tags:#cloudflare#best-practices#seo#nuxt#nitro#og-image#meta-tags
One-click install
npx skills add https://github.com/vinayakkulkarni/tileserver-rs --skill nuxt-seo-best-practices
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-seo-best-practices
Source: https://github.com/vinayakkulkarni/tileserver-rs/tree/main/.claude/skills/nuxt-seo-best-practices
Command: npx skills add https://github.com/vinayakkulkarni/tileserver-rs --skill nuxt-seo-best-practices

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to optimizing Nuxt 4 applications for search engines, specifically when deployed on Cloudflare Pages/Workers, ensuring better visibility and performance.

Core Features & Use Cases

  • Dynamic OG Image Generation: Learn how to create dynamic Open Graph images efficiently on Cloudflare Workers.
  • Page-Level SEO: Implement best practices for meta tags, canonical URLs, and structured data.
  • Cloudflare & Nitro Configuration: Ensure your Nuxt app is correctly configured for Cloudflare's serverless environment.
  • Use Case: You're building a Nuxt blog and want to ensure every post has a unique, attractive social media preview image and is discoverable by search engines.

Quick Start

Apply the nuxt-seo-best-practices skill to optimize your Nuxt application's SEO for Cloudflare deployment.

Frequently Asked Questions about nuxt-seo-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate dynamic OG images on Cloudflare Workers using Nuxt?▼

Generate dynamic OG images on Cloudflare Workers by using the @cf-wasm/og library within your Nuxt 4 application. This approach efficiently creates unique social media preview images directly at the edge.

What's the best way to configure Nitro for a Nuxt SEO deployment on Cloudflare Pages?▼

Configure Nitro for Cloudflare Pages by setting correct compatibility dates and managing SSR externals. Proper Nitro configuration ensures your Nuxt 4 application's SEO rendering runs efficiently in the serverless environment.

Why does my Satori OG image generation break when I include React components?▼

Satori OG image generation breaks because you must avoid using React in Satori elements. Use standard HTML or supported Nuxt components to ensure the serverless rendering process completes without errors on Cloudflare.

Can I cache dynamically generated OG images on Cloudflare Pages?▼

Yes, you can and should cache dynamically generated OG images on Cloudflare. Implementing caching strategies reduces serverless function executions and improves response times for subsequent social media crawls.

How do I add JSON-LD structured data and meta tags in a Nuxt 4 application?▼

Add JSON-LD structured data and page-level meta tags directly within your Nuxt 4 application pages. Implementing canonical URLs and structured data ensures search engines properly index your content and display rich snippets.

Related Skills

Explore More Software Engineering Skills→
zardusai-cyberzardusai-cyber
1

nuxt4-patterns

Apply Nuxt 4 hydration-safe data fetching patterns with useFetch and useAsyncData.

Community
Advanced
matteotittamatteotitta
29

metadata-lint

Audit HTML head metadata for SEO and social media compliance.

Community
Intermediate
dt418dt418

astro-cloudflare

Optimizes Astro deployments on Cloudflare Workers with KV, R2, D1, Durable Objects, Queues, caching, and security configurations.

Community
Advanced
zzoohubzzoohub

seo

Generate per-page SEO metadata, JSON-LD, hreflang, and OG tags for Next.js.

Community
Intermediate