关于SEO + 如何提升SEO

什么是SEO？

SEO（Search Engine Optimization，搜索引擎优化） 简单来说，就是通过一系列技术和内容手段，让你的网站在搜索引擎（如 Google、百度、必应）的搜索结果中排名更高，从而获得更多的免费（自然）流量

搜索引擎是如何工作的？

1. 派出“爬虫”抓取信息搜索引擎会派出无数的“网络爬虫”（也叫蜘蛛或机器人），24小时不间断地在互联网上“闲逛”。它们沿着一个链接跳到另一个链接，把访问过的网页内容（文字、图片等）整个复制下来，存回搜索引擎的巨型服务器里。
2. 建立“目录”方便查询如果直接把抓来的所有网页堆在一起，想找东西就像大海捞针。所以，搜索引擎会读这些网页的关键词、标题、结构等，为它们建立一个巨大的“索引目录”。当你在搜索框输入关键词时，它并不是去实时浏览整个网络，而是在这个已经整理好的目录里快速查找。
3. 给结果“排名”再呈现这是最关键的一步。同样包含你关键词的网页可能有几万个，谁排第一？这时，搜索引擎的算法就登场了。它会通过几百个因素（比如网页的相关性、内容质量、网站的权威性、打开速度等）给每个网页打分，然后按照分数从高到低，把结果展示给你（也就是我们说的搜索引擎结果页SERP）。

如何提升SEO？

技术 SEO

为了确保搜索引擎爬虫能顺畅地抓取和理解你的网站。

• 核心 Web 指标 (Core Web Vitals)： 关注页面的加载速度、交互延迟和视觉稳定性。尽量减少 LCP（最大内容绘制）时间，通常建议在 2.5 秒以内。
• 语义化 HTML 标签： 不要全篇都是 <div>。合理使用 <h1>（页面标题，每页仅限一个）、<h2>（小标题）、<ul>、<nav> 和 <footer>。
• 站点地图 (Sitemap) 与 Robots.txt：生成 sitemap.xml 并提交给 Google Search Console，告诉爬虫你有哪些页面。通过 robots.txt 禁止爬虫抓取不重要的私有页面（如管理后台）。
• HTTPS 加密： 安全性是搜索引擎排名的硬性指标之一。

内容 SEO

关键词策略： 调研用户会搜什么（使用 Google Keyword Planner 等工具），将关键词自然地分布在：标题 (Title Tag)：最重要的位置。元描述 (Meta Description)：吸引用户点击的广告词。正文前 100 字：让爬虫快速确认主题。

内容深度与质量： 搜索引擎喜欢能一次性解决用户问题的长难内容，而不是简单的几句套话。

图片优化：必须添加 Alt 属性（描述图片内容），因为爬虫看不见图片，只能读文字。使用 WebP 等现代格式减小体积。

站外 SEO

高质量外链 (Backlinks)： 如果有权威网站链接到你，搜索引擎会认为你的网站也是权威的。

社交媒体信号： 内容在社交平台上的转发和讨论虽然不直接计入排名，但能显著增加曝光度和引流。

Nuxt 与 SPA在SEO上的差异

SPA 的困境（两阶段抓取）：
Google 等爬虫抓取 SPA 时会经历两个阶段：

1. 抓取初始 HTML（此时是空的）；

2. 进入队列等待渲染（爬虫有空时才会执行 JS 生成内容）。这个等待期可能是几小时，也可能是几周，甚至可能因为 JS 报错导致爬虫直接放弃渲染，导致内容无法被搜索到

Nuxt 的优势（一步到位）：
Nuxt 采用 SSR（服务端渲染）。当爬虫请求页面时，服务器已经把内容填进了 HTML 里。爬虫在第一阶段就能直接读到完整的文本、链接和结构，无需等待 JS 执行

搜索引擎给每个网站的抓取资源（时间、算力）是有限的，这被称为“爬虫预算”。

• SPA： 运行 JavaScript 非常耗费算力。如果你的网站需要大量计算才能渲染出内容，爬虫可能会因为“太累了”而减少抓取你网站页面的频率。
• Nuxt： 发送的是纯静态 HTML。爬虫解析 HTML 的速度比运行 JS 快成百上千倍。这意味着在同样的预算下，爬虫能抓取你更多的页面，加快新内容的收录速度。

搜索引擎（尤其是 Google）会将网站的性能作为排名权重。Nuxt 在这两个指标上具有压倒性优势：

• FCP (首次内容绘制)： SPA 需要下载完巨型 JS 文件后才开始画页面；Nuxt 直接返回 HTML，浏览器瞬间就能渲染出文字和布局，分值更高。
• LCP (最大内容绘制)： 因为关键内容（如 Banner 图、标题）在 HTML 中已存在，浏览器能更早地开始加载这些核心元素，从而提升排名。

SEO分数提升真实实践：（基于Nuxt）

在博客中经过测试，Lighthouse测试，SEO 由 83分 提升到了 100 🏅🏅🏅

1. nuxt.config 文件中添加SEO标签 （站点全局配置）

例如:（更多的配置没有添加）

meta: [
        { name: 'description', content: '布莱克的技术博客：前端、算法、工程化与生活记录。' },
        { name: 'robots', content: 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1' },
      ]

作用：

• 搜索引擎索引：Google等搜索引擎会读取这个描述，用于理解页面主题
• 搜索结果展示：在搜索结果页面（SERP）中，这个描述通常会作为页面下的说明文字显示
• 点击率影响：好的描述能显著提高用户点击率

⚠️此处配置会被页面级覆盖，在动态页面中通过 useHead 进行覆盖

2.nitro中添加配置：（站点地图）

Nitro 是 Nuxt 3 的服务端引擎，负责将你的 Nuxt 应用编译、部署、运行在任何支持 JavaScript 的环境中

站点地图（sitemap.xml）告诉搜索引擎你的网站有哪些页面、上次更新时间以及更新频率，是爬虫抓取的路线图。没有它，搜索引擎可能漏掉你新发布的文章

nitro: {  
  routeRules: {
    // 静态资源缓存控制
    '/robots.txt': {
      headers: { 'cache-control': 'public, max-age=3600' }
    },
    '/sitemap.xml': {
      headers: { 'cache-control': 'public, max-age=600' }
    }
  }
}

在server/routes/下面创建robots.txt以及sitemap.xml文件

什么是 robots.txt？

作用： 告诉搜索引擎爬虫哪些页面可以抓取，哪些不可以。

# robots.txt 内容示例
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /login/
Disallow: /api/
Sitemap: https://你的域名/sitemap.xml

什么是 sitemap.xml？

作用： 告诉搜索引擎你的网站有哪些重要的 URL，以及它们的优先级和更新频率。

Sitemap 里有什么？没有什么？

<!-- ✅ Sitemap 里有这些 -->
<url>
  <loc>https://blog.com/articles/123</loc>     <!-- 地址 -->
  <lastmod>2025-01-15</lastmod>                <!-- 更新时间 -->
  <changefreq>monthly</changefreq>             <!-- 更新频率 -->
</url>

<!-- ❌ Sitemap 里没有这些 -->
<!-- 文章标题 -->
<!-- 文章内容 -->
<!-- 文章图片 -->
<!-- 文章作者 -->
<!-- 任何实际的内容 -->

3.某些重要页面或详情页添加useSeoMeta （页面级精准控制）

useSeoMeta是 Nuxt 推荐的 SEO 元标签注入方式，它最大的优势是将 Open Graph（社交分享）、Twitter Card 和标准元标签平铺在一个对象里，避免了你手动处理property和name混用的麻烦

在composable中封装seo相关函数，在页面中引用