SEO之网站快速被收录

对前端而言，迎合搜索引擎的需求也是常有的。对于 Vue 技术栈而言，Nuxtjs 是不二之选。最近刚做完一个类似需求，在此记录一二。

生成网站地图

Nuxtjs 提供了相关的组件，我们直接使用即可。

安装组件

npm install @nuxtjs/sitemap --save

配置

在nuxt.config.js中添加组件的配置

{
  ...
  modules: [
    '@nuxtjs/sitemap'
  ],
  ...
}

配置网站地图

{
  ...
  modules: [
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/login'
    ],
    routes: [
      '/'
    ]
  }
  ...
}

以上为一个简单的例子，访问https://example.com/sitemap.xml可以查看生成的网站地图

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://example.com/</loc>
  </url>
</urlset>

这种“写死”的用法肯定是无法满足项目需求的，根据数据动态生成才是我们想要的

// 导入 axios，也可以是其他用着顺手的组件
import axios from 'axios'
​
export default {
  ...
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/login'
    ],
    routes: async () => {
      const items = await axiox.get('https://example.com/api')
      const list = []
      items.forEach(item => {
        list.push({
          url: `/posts/${item.id}`,
          changefred: 'weekly',
          lastmod: new Date()
        })
      })
      return list
    }
  }
  ...
}

以上即可根据接口的数据动态生成网站地图。

但是实际项目中，一个正在运营的网站，数据是巨大的，生成网站地图体积也是巨大的，所以我们需要对网站地图进行分类和压缩。另外，如果单个网站地址文件超过 50M，建议再进行一次切割。

import axios from 'axios'
​
export default {
  ...
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/login'
    ],
    sitemaps: [
      {
        path: '/sitemap_cate.xml',
        gzip: true,
        routes: async () => {
          const items = await axiox.get('https://example.com/cate')
          const list = []
          items.forEach(item => {
            list.push({
              url: `/posts/${item.id}`,
              changefred: 'weekly',
              lastmod: new Date()
            })
          })
          return list
        }
      },
      ...
    ]
  }
  ...
}

以上即可生成不同的网站地图文件（https://example.com/sitemap_cate.xml，https://example.com/sitemap_cate.xml.gz）

拓展

每个项目的情况不一样，如果你不喜欢这种网站地图生成的方式，你也可以选择通过其他方式（脚本构建等）生成网站地图，然后将文件放到static目录中。

robots.txt 文件

想要网站更好的被搜索引擎抓取，而避免收到过多请求，则需要robots.txt文件配合。

创建文件

直接在static目录中创建robots.txt文件即可。

注意事项：

• 文件必须命名为 robots.txt
• 网站只能有一个robots.txt文件
• 可以应用到子域名
• 必须采用UTF-8编码

配置

robots.txt需要包含以下内容：

• User-agent：指定规则适用的客户端（搜索引擎的名，如：Googlebot。）
• disabllow: 不希望抓取的目录或网页
• allow：希望抓取的目录或网页
• sitemap：网站地图的地址

示例：

User-agent: *
disabllow: 
allow: /
sitemap: https://example.com/sitemap.xml

一般而言，以上示例就能满足大多数网站，实际情况还得是根据项目自己决断。

测试

如果你完成了robots.txt文件，不确定是否有问题，可以测试一下。robots.txt在线测试

上传网站地图

当我们完成以上配置，网站开发完成，并发布上线，如果是一个新项目的话，可能在很长的一段时间都没被搜索引擎收录，从而耽误发家致富。那我们要怎么快速的让搜索引擎收录呢？搜索引擎都支持上传网站地图，只要我们主动提交网站地图，就会第一时间被抓取。

谷歌站长

谷歌站长地址

添加网站

输入需要提交网站地图的域名

验证网站所有权

验证网站的所有权，有三种方式：dns，html 标记，html 文件。

当然首选是dns解析，如果你可以操作或者有同事能很快可以配合去验证的话。因为 html 标记跟 html 文件验证都需要重新发版，发版是一件比较“麻烦”的事。你懂的！

我这里是使用 html 文件验证，直接把问价下载下来，放到static目录中，然后再重新发版。再回到后台你点一下验证，就会看到验证成功的提示。

提交网站地图

当网站验证完了之后就在后台提交网站地图了。

百度站长

注册百度站长 百度站长地址

添加网站

注册百度站长后，登陆到后台，点网站管理

再点添加网站

选择网站对应的协议（http/https），输入需要提交网站地图的域名。然后点下一步

选择网站的属性，点下一步

选择验证方式。我这里仍旧选择 html 文件验证。

验证网站所有权

将下载的 html 文件放到static目录中，重新发版，再回到后台点完成验证

提交网站地图

点提交资源，切换到sitemap,填写网站地图的URL。

百度真的是个辣鸡大聪明，一天只能提交一个网站地图，道友们可以试试 API 吧，我是没心思折腾了。

后记

今天就到这里了。还有很多细致的东西不能一一讲到，不能满足需求的道友可以查看参考中的链接。

参考

谷歌站长

百度站长

robots.txt文件测试

robotx.txt介绍

网站地图介绍