为什么单页面的seo不友好？如何解决这一问题？

前言

大家可能都知道单页SEO不友好，你有没有想过为什么单页SEO不友好？ 在单页兴起的明天，有什么策略可以避免这个缺点呢？ 我很好奇有没有？ 那就和我一起开启探索之旅吧~

搜索引擎如何工作

搜索引擎网站后台会有一个非常大的数据库，里面存储了大量的关键词，每个关键词对应着很多个URL。 这种URL被称为“搜索引擎蜘蛛”或“网络爬虫”。 ”程序是从网上一点一点下载、收集的。随着各种网站的出现，这只勤劳的“蜘蛛”每天在网上爬行，从一个链接到另一个链接，下载内容搜索引擎怎么优化，分析提炼，发现如果“蜘蛛”认为该关键字不在数据库中，且对用户有用，则将其存储在后台数据库中。反之，如果“蜘蛛”认为是垃圾邮件或重复信息，它就会放弃，继续抓取，寻找最新的、有用的信息并保存起来，提供给用户搜索。当用户搜索时，可以检索出与关键词相关的URL并展示给访问者。一个关键词对使用多个URL，所以存在排序的问题，相应地，与关键词最匹配的网址就会排在上面。“蜘蛛”抓取网页内容、提炼关键词的过程中，存在一个问题：“蜘蛛”能否理解。网站的内容都是flash、js等，会让人看不懂、混乱，即使关键词再合适也没用。 相应地，如果网站的内容能够被搜索引擎识别，那么搜索引擎就会增加网站的权重，降低网站的友好度。

搜索引擎优化简介

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

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

下面简单介绍一下SEO优化方向：

网站设计优化 网站内容优化 为什么说单页SEO不友好

在单页的情况下，页面中的很多内容是根据匹配的路由动态生成显示的，但是很多页面内容是通过ajax异步获取的，网络爬虫不会等待异步请求来获取完整的网络爬虫在爬取页面内容后准确模拟相关行为来获取复合数据是非常困难的。 他们更擅长抓取和分析静态资源。

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

明白问题出在哪里，“搜索引擎蜘蛛”或者“网络爬虫”程序更擅长抓取和更新静态资源，那么我们就要采取相应的策略，尽可能多地生成静态资源，让网络爬虫获取更多的数据，从而提高网站的搜索排名。 目前，市场上广泛采用以下两种策略：预渲染和SSR（服务器端渲染）。

简单介绍一下SEO的一些优化策略：

预渲染

预渲染是基于-spa-创建项目时，通过 模拟浏览器请求，将获取到的数据插入到给定的模板中，从而生成已经包含数据的html，从而使静态化更多资源，网络爬虫可以捕获更多的网站信息，提高网站的搜索排名。 我最近正在使用react发布官方网站。 考虑到单页SEO问题以及大部分官网都是静态资源，所以采用了预渲染技术。 在这里和大家分享一下。

这里的预渲染就是利用-spa-，结合生成一些路由对应的静态页面。 我的项目是使用-react-app脚手架框架构建的，自定义配置是在-.js中执行的。

// 在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'
    })
)

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

SSR（服务器端渲染）

服务端渲染是先向前端服务器请求数据，然后生成完整的首屏html返回给浏览器。 服务端渲染返回给客户端的是已经获取到异步数据并执行脚本的最终HTML。 网络爬虫可以抓取完整的内容 SSR的另一个巨大作用就是加快首屏的渲染速度。 由于在显示服务器呈现的标记之前无需等待所有内容下载和执行，因此用户将更快地看到完全呈现的页面。

SSR 相对于预渲染的优势

更快的创建速度，SSR动态插入数据，创建时不会预加载数据，而是输入url后在服务端请求，接收返回数据，插入模板，返回给客户端。 常规路由下的嵌入式个性化页面加载，个性化页面很难预渲染，SSR可以解决。 更好的搜索引擎优化。 更快的首屏加载速度（请求业务数据，将数据转化成html片段，都在服务端进行，浏览器负责加载资源，请求CDN资源，css渲染，缩短到达时间。）

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

这里的代码示例使用最基本、最简单的技术来实现一个简单的示例。 完整版本的实施请点击此处

// 一个基础版本的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–开发一个SSR项目，还是存在一定的挑战。 我折腾了很多才运行成功。 我要踩的坑就是vue生成的Dom和服务器渲染的内容不匹配。

遇到这个问题需要检查./entry-.js中是否有状态同步

。

如果你想实现一个对Nuxt框架不上心的SSR项目，我的建议是先查看官方文档Nuxt，然后尝试自己实现一个大型项目。 遇到问题可以参考我的实现vue-ssr-demo，以及小写的A demo。 这个demo实现了比较强大和成熟的功能，很多模块的版本比较低。 某些新版本的 API 可能会发生变化。 某些模块依赖于node@9以下的版本。 如果你想对 运行 vue–2.0 可能需要一些时间。 如果大家在学习过程中遇到问题或者有什么建议，可以在评论区留言或者加陌陌与我交流。 愿我们都能成为更好的自己~