mcpField
N
nuxt-seo-best-practices

nuxt-seo-best-practices

github.com/vinayakkulkarni营销与增长4364 次安装14 周前更新
代码仓库

关于 nuxt-seo-best-practices

面向部署到 Cloudflare Pages 或 Workers 的 Nuxt 4 应用的 SEO 参考技能，将 11 条规则归入四个优先级类别，涵盖元数据、结构化数据、OG 图片和部署配置。

主要功能

  1. 01四个优先级类别中的 11 条规则
  2. 02动态 OG 图片指南
  3. 03页面元数据和社交标签
  4. 04JSON-LD 结构化数据
  5. 05Cloudflare 与 Nitro 配置

适用场景

  1. 01添加页面级 SEO 元数据
  2. 02生成社交分享图片
  3. 03添加结构化数据
  4. 04配置 Nuxt 以部署到 Cloudflare

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/nuxt-seo-best-practices确认已加载。

包含的文件

除 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

详细介绍

Nuxt SEO 最佳实践

适用于部署到 Cloudflare Pages/Workers 的 Nuxt 4 应用的全面 SEO 优化指南。包含 4 个类别中的 11 条规则，并按影响程度排序，以指导自动重构和代码生成。

Nuxt 4.5 注意事项： 现在由 unhead v3 管理 head；useHead 的类型检查更严格（升级后的类型错误通常反映了真正的收紧，而非回归），并且不再支持 Promise 输入。本指南中的所有 useHead/useSeoMeta 示例都使用普通同步值，并兼容 v3。

适用场景

以下情况请参考这些指南：

  • 在 Cloudflare Workers 上生成动态 OG 图像
  • 设置页面级 SEO 元标签和组合式函数
  • 添加 JSON-LD 结构化数据
  • 配置 Nitro 以部署到 Cloudflare Pages
  • 处理与 SSR 不兼容的仅客户端库
  • 设置社交分享元数据（Open Graph、Twitter Cards）
  • 使用 Satori 生成图像（绝不要使用 React）

按优先级划分的规则类别

优先级类别影响前缀
1OG 图像生成CRITICALog-
2页面 SEO 与元数据HIGHmeta-
3结构化数据MEDIUMschema-
4Cloudflare 与 Nitro 配置HIGHcf-

快速参考

1. OG 图像生成（CRITICAL）
  • og-cf-workers - 使用 @cf-wasm/og 在 Cloudflare Workers 上生成动态 OG 图像
  • og-no-react - 为 Satori 元素使用纯 JS 对象，绝不要使用 React
  • og-cache-headers - 使用 immutable 标头缓存 OG 图像，以便 CDN 缓存
  • og-corp-cross-origin - 使用 CORP 跨域策略提供 OG 图像，否则所有社交卡片都会悄然失效
2. 页面 SEO 与元数据（HIGH）
  • meta-use-page-seo - 用于保持页面级 SEO 一致性的可复用组合式函数
  • meta-social-tags - 正确设置 Open Graph 和 Twitter Card 元标签
  • meta-canonical-url - 为每个页面设置规范 URL 和 og:url
3. 结构化数据（MEDIUM）
  • schema-json-ld - 在 app.vue 中添加 JSON-LD 结构化数据，以获得 Google 富媒体搜索结果
4. Cloudflare 与 Nitro 配置（HIGH）
  • cf-compatibility-date - 固定 compatibilityDate，绝不要使用 'latest'
  • cf-nitro-config - 用于 CF Pages 的 Nitro 配置（nodeCompat、process.stdout、WASM）
  • cf-ssr-externals - 为仅客户端库配置 SSR 外部依赖
  • cf-wasm-import - 为 Cloudflare Workers 配置 WASM 模块

使用方法

阅读各规则文件，了解详细说明和代码示例：

rules/og-cf-workers.md
rules/meta-use-page-seo.md
rules/_sections.md

每个规则文件包含：

  • 简要说明规则的重要性
  • 错误代码示例及说明
  • 正确代码示例及说明
  • 其他背景信息以及 Nuxt/Cloudflare 专属说明

完整汇总文档

如需包含所有扩展规则的完整指南，请参阅：AGENTS.md

评论

支持 Markdown