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

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣
本文适当 SEO 初学者快速上手 Nuxt3 项目的搜索引擎优化
利用 nuxt3（本文写于一年前） 做了个官网, 第一次做官网也没啥履历齐备都是摸着石头过河! 开辟完成后做了一些 SEO 的相干的优化，这里做一个纪录

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

为什么利用 nuxt3?

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

seo 绕不开的 TDK

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

• 标签包罗了网页的标题和紧张关键词。
  
• 标签提供了网页的形貌。
  
• 标签列出了相干的关键词。
  

这些元素对于搜索引擎优化（SEO）非常紧张它们资助搜索引擎明白网页的内容，并影响搜索结果中的表现。
一个简朴的🌰

1.             网页标题 - 紧张关键词            [size=6]接待访问[/size]
3.     这里是我们关于紧张关键词的内容。

复制代码

nuxt3 中怎样设置 TDK

在 nuxt.config.ts 文件中举行设置

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

1. // https://nuxt.com/docs/api/configuration/nuxt-configexport 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

1. 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

猛击查察官网文档

1. defineOgImageComponent('NuxtSeo', {  title: '环球中文教诲领导者 👋',  description: '我们携手环球中文教诲范畴的专家，汇聚优质中文讲授资源，创新探索顺应差异地区特色的外洋中文学习新范式。',  theme: '#C74043',  colorMode: 'dark',  siteLogo: '/img/logo/logo1.jpg', // public 目次})

复制代码

中文必要设置字体，修改 nuxt.config.ts

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

复制代码

利用当地字体 当地字体文件必须是 .otf 、 ttf 、 .woff ，而且位于 public 目次内。

1. 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 提交站点舆图，完成网站收录
  

如果对您有所资助，接待您点个关注，我会定时更新技能文档，各人一起讨论学习，一起进步。