课程大纲

第一节:渲染策略

  • 问题: 为什么 Googlebot 经常无法"看到" JavaScript 内容。
  • 解决方案: 配置 nuxt.config.ts 以实现混合渲染。我们将为特定路由规则(ISR 与 SWR)设置,以确保产品页面以静态 HTML 形式提供给爬虫。
  • 成果: 通过 Curl 验证的可爬取的页面源代码。

第二节:元数据与可见性

  • 问题: 单页应用(SPA)通常为整个网站共享一个标题标签。
  • 解决方案: 使用 useSeoMeta 和 useServerSeoMeta 以编程方式生成动态标题、描述和规范链接。
  • 社交修复: 调试损坏的 Open Graph (OG) 标签,以确保链接在 WhatsApp/LinkedIn 上显示正确。

第三节:技术基础与索引

  • 问题: 搜索引擎无法找到的孤立页面。
  • 解决方案: 安装并配置 @nuxtjs/sitemap 以自动为动态路由生成 XML 站点地图。
  • 性能修复: 实现 <NuxtImg> 并定义明确的尺寸,以解决累积布局偏移(CLS)问题并加速索引。

第四节:审计、防御与水合

  • 深入探讨: 调试"水合不匹配"——Nuxt 中导致性能问题的首要错误。
  • 审计: 在修复后的项目上运行实时 Lighthouse 审计。
  • Schema.org: 注入 JSON-LD 结构化数据以生成"富文本片段"(搜索结果中的星级/评论)。

要求

  • 参与者必须具备 Vue.js 和 Nuxt 基础知识的实际经验。

受众

  • 开发者
 7 小时

客户评论 (5)

即将举行的公开课程

课程分类