1. TDK(标题、描述、关键词)设置
推荐使用Nuxt的钩子useSeoMeta
设置tdk
<script>
useSeoMeta({
title: _title,
ogTitle: _title,
keywords: _keywords,
description: _description,
ogDescription: _description,
ogImage: _img,
twitterCard: _img,
});
</script>
2. sitemap.xml
通过nuxt-simple-sitemap
实现
npm i nuxt-simple-sitemap -D
export default defineNuxtConfig({
modules: ['nuxt-simple-sitemap'],
sitemap: {
sitemaps: false, // 生成多个sitemaps
// xsl: false, // xsl样式表的引用路径,默认"/__sitemap__/style.xsl"(false禁用)
exclude: [
"/404",
"/403",
], // 不需要搜索引擎抓seo的路径
autoLastmod: true, // 自动检测每个URL的lastmod日期
},
})
3.robots.txt
通过nuxt-simple-robots
实现
npm i nuxt-simple-robots -D
export default defineNuxtConfig({
modules: ['nuxt-simple-sitemap'],
robots: {
blockNonSeoBots: true,
disallowNonIndexableRoutes: true, // 阻止一些不友好而且没意义的爬虫
disallow: [
'/sigin',
'/admin'
], // 不建议爬取的链接
// allow: ["*"], // 建议爬取的链接,不填爬虫默认全部建议爬取
},
})
4.特殊配置-路由规则
Nuxt支持一个项目中不同的页面使用不同的渲染模式,比如一个SEO项目中,可能某些页面不需要SSR(如注册页、admin页等),可以通过配置路由规则,以混合渲染的方式实现整个项目
export default defineNuxtConfig({
routeRules: {
// 禁用SSR,使用客户端渲染
'/admin/**': {
ssr: false
},
// 按需生成该页面,并使其拥有一天的缓存
"/sitemap.xml": {
swr: 3600 * 24,
},
...
},
})
-
ssr
:禁用服务端渲染,改为SPA单页面应用渲染模式 -
swr
:stale-while-revalidate
的宽限时间,swr
是什么可以看这篇文章: stale-while-revalidate / swr 一看就懂,一用就会 -
headers
:为response
添加headers
-
cors
:是否自动添加cors标头,可以被headers
覆盖 -
prerender
:是否预渲染(预渲染会将渲染好的html文件当做静态资源打包) -
experimentalNoScripts
:禁用JS脚本