Nuxt3 与官网 SEO：从 TDK 配置到搜索引擎收录

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

本文适合 SEO 初学者快速上手 Nuxt3 项目的搜索引擎优化

使用 nuxt3（本文写于一年前）做了个官网, 第一次做官网也没啥经验一切都是摸着石头过河! 开发完成后做了一些 SEO 的相关的优化，这里做一个记录

如果之前做过网站的 seo 那这篇文章对你可能没什么帮助，因为这里的目标是谷歌、必应搜索框输入指定关键字，可以被搜索到。

为什么使用 nuxt3?

支持服务端渲染（SSR）

支持静态站点生成（SSG）

自动生成标签

提供开箱即用的 SEO 优化工具

支持预渲染（Prerendering）

seo 绕不开的 TDK

TDK 分别对应标题（Title）、描述（Description）和关键词（Keywords）

title标签包含了网页的标题和主要关键词。

meta name="description"标签提供了网页的描述。

meta name="keywords"标签列出了相关的关键词。

这些元素对于搜索引擎优化（SEO）非常重要它们帮助搜索引擎理解网页的内容，并影响搜索结果中的显示。

一个简单的🌰

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题 - 主要关键词</title>
    <meta name="description" content="这是一个关于主要关键词的网页描述。">
    <meta name="keywords" content="主要关键词, 相关关键词, 其他关键词">
</head>
<body>
    <h1>欢迎访问</h1>
    <p>这里是我们关于主要关键词的内容。</p>
</body>
</html>

nuxt3 中如何设置 TDK

在 nuxt.config.ts 文件中进行配置

nuxt 3.15 不支持直接在 app 配置 seoMeta 改为在 app.vue 中使用 useSeoMeta 实现

复制代码

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  app: {
    head: {
      title: '爱中文',
      titleTemplate: '%s',
      meta: [
        { name: 'keywords', content: '爱中文' },
        { name: 'keywords', content: '上海爱中文数字' },
        { name: 'keywords', content: '中文教育' },
        { name: 'keywords', content: '国际中文智慧教育品牌' },
        { name: 'keywords', content: '智慧教育解决方案' },
      ],
    },
  },
})

在 app.vue 中配置 seoMeta

复制代码

useSeoMeta({
  title: '上海爱中文数字信息技术有限公司',
  description: '上海爱中文数字信息技术有限公司，作为一家国际中文智慧教育企业，我们致力于成为"知识服务提供商与学习技术领导者"。依托先进的数字教育技术与深厚的教学设计实力，我们携手全球中文教育领域的专家，汇聚优质中文教学资源，创新探索适应不同地域特色的海外中文学习新范式。',
})

配置完渲染出来大概是这样

上边的配置中 title 字段十分重要直接影响搜索结果

这里提一下 titleTemplate: '%s' 这样写渲染后的 title 字段会原样渲染

如果去除 titleTemplate: '%s' 则会显示,把 package.json 文件的 name 字段拼接在后边这不是咱想要的

可能你还想为每个页面单独设置

这当然是可以的而且也很简单使用内置的 useHead 或者 useSeoMeta 即可

两者看情况使用或结合一起使用

useHead

useSeoMeta

nuxt seo 利器

nuxt3 提供对应的解决方案直接引入 @nuxtjs/seo 即可，号称是 Nuxt 的完整 SEO 解决方案。

SEO 小白狂喜

该有的都有了，这里只看 sitemap.xml、robots.txt

sitemap.xml

开发环境会比线上环境多一些调试信息

线上环境 https://xxxx/sitemap.xml

开发环境 http://localhost:3000/sitemap.xml

robots.txt

线上生成的文件与本地有一定区别线上全部允许、本地全部不允许

线上环境 https://xxxx/robots.txt

开发环境 http://localhost:3000/robots.txt

自动生成 OgImage

猛击查看官网文档

复制代码

defineOgImageComponent('NuxtSeo', {
  title: '全球中文教育领导者 👋',
  description: '我们携手全球中文教育领域的专家，汇聚优质中文教学资源，创新探索适应不同地域特色的海外中文学习新范式。',
  theme: '#C74043',
  colorMode: 'dark',
  siteLogo: '/img/logo/logo1.jpg', // public 目录
})

中文需要配置字体，修改 nuxt.config.ts

复制代码

ogImage: {
  googleFontMirror: true, // 开启谷歌字体景象-不挂代理感觉很难下载
  fonts: [
    'Noto+Sans+SC:400',
  ],
},

使用本地字体本地字体文件必须是 .otf 、 ttf 、 .woff ，并且位于 public 目录内。

复制代码

ogImage: {
  fonts: [
    {
      name: 'AlibabaPuHuiTi',
      weight: 500,
      path: '/fonts/AlibabaPuHuiTi/AlibabaPuHuiTi-3-65-Medium.woff',
    },
  ],
},

如何在谷歌、必应中可以被搜索到呢?

通过各大搜索引擎提供的站点工具提交网站,可以加快网站被索引的速度

谷歌

猛击访问

添加站点时是会验证所有权,选择一种验证即可

检查下网址是否被收录,只有被收录才可以搜索到

提交下站点地图

然后等着被收录就好了,快的话 48 小时,慢的话一个周左右

必应

猛击进入必应站点管理员页面

必应可以直接拉取谷歌已验证的站点,使用谷歌登录即可!

提交下网站地图

把网站地图的网址这里在提交一次(感觉会有点用)

然后等收录,快的话48小时,慢的话一个周左右

最终结果

谷歌搜索有时会靠前有时会靠后🤪

必应搜索

总结

本文从实战角度出发，系统介绍了 Nuxt3 网站的 SEO 优化方案：

TDK 配置：通过 nuxt.config.ts 和 useSeoMeta 设置标题、描述、关键词

SEO 工具：使用 @nuxtjs/seo 自动生成 sitemap.xml、robots.txt 和 OgImage

搜索引擎收录：通过 Google Search Console 和 Bing Webmasters 提交站点地图，完成网站收录

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

Nuxt3 与官网 SEO：从 TDK 配置到搜索引擎收录

为什么使用 nuxt3?

seo 绕不开的 TDK

一个简单的🌰

nuxt3 中如何设置 TDK

useHead

useSeoMeta

nuxt seo 利器

sitemap.xml

robots.txt

自动生成 OgImage

如何在 谷歌、必应 中可以被搜索到呢?

谷歌

必应

最终结果

总结

如何在谷歌、必应中可以被搜索到呢?