【Nuxt】04 Nuxt2-SEO： sitemap.xml、seo优化、robots.txt

1 SiteMap设置

环境准备

注意生成sitemap依赖于@nuxtjs/sitemap，并且需要用axios进行请求，不要使用@nuxtjs/axios，不然会报错

sitemap.xml配置

• 在nuxt.config.js中配置下面的内容

npm install @nuxtjs/sitemap
npm install axios

• 在static/sitemap.js中配置下面的内容

const webConfig = {// 本地local: {baseURL: 'http://localhost:8828',referer: 'http://localhost:8828/',url: 'http://localhost:8828'},// sit环境sit: {baseURL: '',referer: '',url: ''},// 线上环境production: {baseURL: '',referer: '/',url: ''}
}import axios from 'axios'
// 运行环境是不是开发环境
const isDev = Boolean(process.env.OPE_ENV === 'development')
const API_ENV = process.env.API_ENV
// 接口url
const baseUrl = webConfig[API_ENV].baseURL
// referer
const referer = isDev ? webConfig['local'].referer : webConfig[API_ENV].referer
// 网站域名
const hostname = isDev ? webConfig['local'].url : webConfig[API_ENV].urlconst config = {baseURL: baseUrl,withCredentials: true,time: Date.now(),headers: {Accept: 'application/json; charset=utf-8',Referer: referer,common: {languageCode: 'zh-CN',referer: referer}}
}
const sitemap = {path: '/sitemap.xml', //生成的文件路径hostname: hostname, //网站的网址cacheTime: 1000 * 60 * 60 * 24, //一天的更新频率，只在generate:false有用gzip: true, //生成.xml.gz的sitemapgenerate: false,// 排除不要页面exclude: ['/404','/page','/details','/article','/tags','/category','/search'],defaults: {changefred: 'always',lastmod: new Date(),priority: 0.8},routes: async () => {let routes = []let res = await axios.get(`${baseUrl}/api/getArticle`, {})if (res.code === 200) {res.list.forEach((item) => {routes.push({url: `/xxxx/${item.pageCode}`,changefreq: 'always',priority: 0.9})})}return routes}
}
module.exports = sitemap

• 在nuxt.config.js中配置下面的内容

const sitemap = require('./static/sitemap')module.exports = {...,sitemap: sitemap,
}

2 robots.txt协议

在nuxt项目的static文件夹下，配置项目的静态文件，直接在static新建robots.txt即可，nuxt运行时会自动装配到根路由

# 该文件可以通过`网站域名/Robots.txt`直接访问# User-agent作用：描述搜索引擎的名字，对于该文件来说至少药有一条user-agent记录，则该项的值设为*
User-agent: *
# Disallow:  描述不希望被访问到的一个url
Disallow: /cart?*
Disallow: /*Cart-*
Disallow: /*retailavailability
Allow: /*wishlist*.js
Sitemap: 网站的域名/sitemap.xml

3 seo优化

• 全局seo：在nuxt.config.js的meta中添加网站的字符编码、语言、响应式标签、网站描述、网站关键字等信息；在link中添加全局的css、网站logo等信息。

head: {title: pkg.name,meta: [{ charset: 'utf-8' },{ name: 'viewport', content: 'width=device-width, initial-scale=1' },{ hid: 'description', name: 'description', content: pkg.description }],link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]},

• 页面seo：在nuxt.js项目pages路由页面的script中添加head方法，该方法将随nuxt运行时自动载入

head () {return {title: `${this.info.blogName} | ${this.info.blogDescription}`,meta: [{ name: 'keywords', content: this.info.keywords },{ name: 'description', content: this.info.description }]}
}