为什么单页面的SEO不友好呢？有哪些策略？

　　为什么单页面的SEO不友好呢？有哪些策略？

　　前言

　　大家可能都知道单页SEO不友好，但是你有没有想过为什么单页SEO不友好？在单页盛行的今天，有什么策略可以规避这个缺点？对此感到好奇吗？那就和我一起开启探索之旅吧~

　　搜索引擎的工作原理

　　在搜索引擎网站的后端会有一个非常大的数据库，里面存储着海量的关键词，每个关键词对应着很多个URL，被称为“搜索引擎”蜘蛛或者说“网络爬虫”程序是从浩瀚的互联网上一点一点地下载和采集起来的。随着各种网站的出现，这些勤劳的“蜘蛛”每天都在互联网上爬行，从一个链接到另一个，下载内容，分析提炼，找到关键词，如果”“蜘蛛”认为关键词不在数据库中，对用户有用，则存储在后端数据库中。反之，如果“蜘蛛”认为它是垃圾邮件或重复信息，则应将其丢弃，并继续爬行，寻找最新的有用信息并保存以供用户搜索。当用户搜索时，他们可以检索与关键字相关的 URL 并将其显示给访问者。一个关键词对使用多个URL，因此存在排序问题，与关键词匹配度最高的对应URL将排在第一位。在“蜘蛛”爬取网页内容和提炼关键词的过程中，有一个疑问：“蜘蛛”是否能看懂。如果网站的内容是flash、js等，那就是看不懂，糊涂了，即使关键词再贴切，也没有用。相应地，如果网站的内容能够被搜索引擎识别，搜索引擎就会增加网站的权重，增加网站的友好度。

　　SEO 介绍

　　SEO是Search Engine Optimization的英文缩写，意思是在了解搜索引擎自然排名机制的基础上，对网站进行内外调整优化，以提高网站在搜索引擎关键词自然排名获得更多流量，从而达到网站sales 和品牌建设的预期目标。

　　SEO 的主要工作是通过了解各种搜索引擎如何抓取 Internet 页面、如何将它们编入索引以及如何确定它们对特定 关键词 搜索结果的排名来优化网页。它提高了搜索引擎排名，从而增加了访问量，最终提高了网站 的销售或宣传能力。提高网站的曝光率，增加整个网站的权重，让用户更容易搜索到你的网站，进而带来客观的流量。使用这种策略分流流量的优点是：1.低成本； 2.坚持； 3.无需承担“无效点击”风险。

　　这里简单介绍一下SEO的优化方向：

　　网站设计 Optimization网站Content Optimization 为什么单页SEO不友好？

　　因为在单个页面的情况下，页面中的很多内容都是根据匹配的路由动态生成和展示的，很多页面内容是通过ajax异步获取的，网络爬虫不等待异步请求。网络爬虫很难准确模拟相关行为以获得复合数据。他们更擅长捕获和分析静态资源。

　　如何解决单页SEO不友好的问题

　　了解问题所在。 “搜索引擎蜘蛛”或“网络爬虫”程序更擅长抓取和更新静态资源。那么就必须采取相应的策略，生成尽可能多的静态资源，让网络爬虫获得更多的数据，从而提高网站的搜索排名。目前市场上比较常用的有以下两种策略：预渲染和SSR（服务端渲染）。

　　简要介绍一些SEO优化策略：

　　预渲染

　　预渲染基于 prerender-spa-plugin。项目构建时，通过无头浏览器模拟浏览器请求，将获取到的数据插入给定模板中，从而生成已经收录数据的html，其中有更多静态资源，网络爬虫可以抓取更多网站信息，提高网站的搜索排名。最近用react作为官网，考虑到单页SEO问题，官网多为静态资源，使用预渲染技术，在这里分享给大家。

　　这里的预渲染就是使用prerender-spa-plugin模块，结合webpack生成一些路由对应的静态页面。我的项目是使用create-react-app脚手架搭建的，在config-overrides.js中进行自定义webpack配置。

　　// 在create-react-app 2.x以下的的版本里,

// 在config-overrides.js是这样配置预渲染的

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const path = require('path');

module.exports = function override(config, env) {

if (env === 'production') {

config.plugins = config.plugins.concat([

new PrerenderSPAPlugin({

routes: ['/', '/home', 'about'],

staticDir: path.join(__dirname, 'build'),

}),

]);

}

return config;

};

// create-react-app 2.x 以上的ban版本是这样配置的

const { override, fixBabelImports, addLessLoader, addWebpackAlias, addWebpackPlugin } = require('customize-cra');

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const path = require('path');

// 除了单独定义一个功能函数你还可以使用

// customize-cra提供的addWebpackPlugin来添加插件

// 感兴趣的小伙伴可以自行百度使用方法

const addConfigPlugin = config => {

// 在这里我们还可以很方便的对config扩展别的配置项

if(process.env.NODE_ENV === 'production') {

config.plugins = config.plugins.concat([

new PrerenderSPAPlugin({

routes: ['/', '/home', 'about'],

staticDir: path.join(__dirname, 'build'),

})

]);

}

return config

}

// 我的理解override函数的本质还是处理config对象并返回

module.exports = override(

addConfigPlugin,

// 这里是按需加载antd

fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

style: 'css'

})

)

复制代码

　　官方的create-react-app文档也提供了相应的预渲染方案。点击这里。

　　SSR（服务器渲染）

　　服务端渲染是先向后端服务器请求数据，然后生成完整的首屏html返回给浏览器。服务器端渲染将获取异步数据并执行 JavaScript 脚本的最终 HTML 返回给客户端。网络爬虫可以抓取完整的页面信息，SSR的另一大作用就是加速首屏的渲染，因为不需要等待所有的JavaScript下载执行完才显示服务端渲染的标记，所以用户将更快地看到完整呈现的页面。

　　SSR 相对于预渲染的优势

　　更快的构建速度，SSR动态插入数据，构建时不预加载数据，而是输入url后在服务器上请求，将返回的数据插入模板中再返回客户端。嵌套路由下的个性化页面加载，个性化页面无法预渲染，SSR可以解决。更好的搜索引擎优化。更快的首屏加载速度（请求业务数据，将数据渲染成html片段。服务器开启，浏览器负责加载资源，请求CDN资源，css渲染，缩短到达时间。）

　　这里推荐一个基于Vue.js的服务端渲染应用框架Nuxt.js。想了解的可以自行查看官方文档。

　　我这里的代码示例使用最基本最简洁的技术来实现一个简单的Vue SSR示例。实现的完整版本在这里。

　　// 一个基础版本的ssr的实现

const server = require('express')()

const Vue = require('vue')

const fs = require('fs')

const vueServerRender= require('vue-server-renderer');

// 生成一个render函数

const Renderer = vueServerRender.createRenderer({

// 定义一个基础的模板页面

template:fs.readFileSync('./src/index.template.html', 'utf-8')

})

server.get('*', (req, res) => {

// 创建一个vue组件

const app = new Vue({

data: {

name: 'this is vue ssr basic demo',

url: req.url

},

template:' {{name}}, current url is: {{url}}'

})

const context = {

title: 'SSR test#'

}

// 将vue实例和对应的传参转换成html字符串

Renderer.renderToString(app, context, (err, html) => {

if(err) {

console.log(err)

res.status(500).end('server error')

}

// 返回渲染完成的页面

res.end(html)

})

})

const port = process.env.PORT || 8008;

// 运行服务器端

server.listen(port, () => {

console.log(`server started at localhost:${port}`);

})

复制代码

　　结合vue-server-renderer开发一个SSR项目，还是有一定的挑战的。我也折腾了一下才跑成功。我要踩的坑是vue生成的Virtual Dom和服务端渲染的内容不匹配。问题。

　　

　　如果你遇到这个问题，你需要检查一下。 /entry-client.js 有没有状态同步？

　　

　　.

　　如果你想实现一个不急于Nuxt框架的SSR项目，我的建议是先查看Nuxt官方文档，然后自己尝试实现一个小项目。遇到问题可以参考我的实现 vue-ssr-demo ，里面也有特别大写的demo。这个demo实现的功能比较强大和完整，但是很多模块的版本比较低。 api的一些新版本可能会发生变化，一些模块依赖于node@9以下的版本。正确运行可能要费点功夫 vue-hackernews-2.0. 如果在学习过程中遇到问题或者有什么建议可以在评论区留言或者加微信lj_de_wei_xin与我交流愿我们都能成为更好的自己~