【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].url

const 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的sitemap
  generate: 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 }
    ]
  }
}