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

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

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

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

为什么使用 nuxt3?

支持服务端渲染（SSR）
支持静态站点生成（SSG）
自动生成 <meta> 标签
提供开箱即用的 SEO 优化工具
支持预渲染（Prerendering）

seo 绕不开的 TDK

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

<title>标签包含了网页的标题和主要关键词。
<meta name="description">标签提供了网页的描述。
<meta name="keywords">标签列出了相关的关键词。

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

一个简单的🌰

html 复制代码

<!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 实现

ts 复制代码

// 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

ts 复制代码

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

猛击查看官网文档

ts 复制代码

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

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

ts 复制代码

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

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

ts 复制代码

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