SEO之网站快速被收录

　　SEO之网站快速被收录

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

　　生成网站地图

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

　　安装组件

　　npm install @nuxtjs/sitemap --save

　　配置

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

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

　　配置网站地图

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

　　以上为一个简单的例子，访问可以查看生成的网站地图

　　<br />     <br />         https://example.com/<br />     <br />

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

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

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

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

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

　　以上即可生成不同的网站地图文件（，）

　　拓展

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

　　robots.txt 文件

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

　　创建文件

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

　　注意事项：

　　配置

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

　　示例：

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

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

　　测试

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

　　上传网站地图

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

　　谷歌站长

　　谷歌站长地址（）

　　添加网站

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

　　验证网站所有权

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

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

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

　　提交网站地图

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

　　百度站长

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

　　添加网站

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

　　再点添加网站