登录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）非常重要它们帮助搜索引擎理解网页的内容，并影响搜索结果中的显示。
一个简单的🌰
<!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 提交站点地图，完成网站收录
