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

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

搜索引擎如何工作

搜索引擎网站后台会有一个非常大的数据库，里面存储了大量的关键词，每个关键词对应着很多个URL。 这些URL被称为“搜索引擎蜘蛛”或“SEO记录”程序从浩瀚的互联网上一点一滴地下载和收集。 随着各种网站的出现，这些勤劳的“蜘蛛”每天都在互联网上爬行，从一个链接到另一个链接，下载内容，分析提炼，找到关键词。 如果“蜘蛛”认为数据库中没有但对用户有用的关键词就存储在后台数据库中。 相反，如果“蜘蛛”认为是垃圾邮件或重复信息，就会丢弃它，继续爬行，寻找最新的、有用的信息，保存起来供用户搜索。 当用户搜索时，可以检索与该关键字相关的URL并将其显示给访问者。 一个关键词匹配多个URL，因此存在排名问题。 相应地，与关键字最匹配的URL将被排在第一位。 在“蜘蛛”抓取网页内容、提炼关键词的过程中，存在一个问题：“蜘蛛”能否理解。 如果网站的内容是类似js的，会让人难以理解，会一头雾水。 无论关键词多么恰当，都是没有用的。 相应地，如果网站内容能够被搜索引擎认可，那么搜索引擎就会增加网站的权重，增加网站的友好度。

SEO简介

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

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

以下是一些SEO优化方向的简单总结：

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

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

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

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

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

预渲染

预渲染基于-spa-。 项目构建时，通过无头浏览器模拟浏览器请求，将获取到的数据插入到给定的模板中，生成已经包含数据的HTML，这样就有了更多的静态资源。 SEO记录可以捕捉更多的网站信息，提高网站的搜索排名。 我最近一直在用它来搭建官方网站。 考虑到单页面的SEO问题以及官网大部分都是静态资源的情况，我采用了预渲染技术。 我想在这里做一下分享给大家。

这里的预渲染使用了-spa-模块，组合起来生成一些路由对应的静态页面。 我的项目是使用--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'
    })
)

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

SSR（服务器端渲染）

服务端渲染是先向后端服务器请求数据，然后生成完整的首屏HTML返回给浏览器。 服务端渲染将获取到异步数据并执行脚本的最终HTML返回给客户端。 SEO记录可以完整捕获 SSR的另一个巨大作用是加快首屏渲染速度，因为无需等待所有内容下载并执行后才显示服务器端渲染标记，因此用户将看到更快地完全渲染页面。

SSR 相对于预渲染的优势

更快的构建速度。 SSR动态插入数据SEO技术，构建时不会预加载数据。 相反网站优化，它在输入URL后请求服务器，获取返回的数据，将其插入到模板中，然后返回给客户端。 常规路由下的个性化页面加载，个性化页面无法预渲染，SSR可以解决问题。 更好的SEO优化。 更快的首屏加载速度（请求业务数据、将数据转换成html片段均在服务器端完成，浏览器负责加载资源、请求CDN资源、css渲染，缩短到达时间。）

这里推荐Nuxt.js，一个基于Vue.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——开发一个SSR项目还是有一定挑战的。 我也是费了一番功夫才跑成功的。 我遇到的坑是vue生成的Dom和服务器渲染的内容不匹配。

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

如果你想实现一个对Nuxt框架不着急的SSR项目，我的建议是先查看Nuxt官方文档，然后尝试自己实现一个小项目。 如果遇到问题，可以参考我的实现vue-ssr-demo，以及You 的一个demo。 该demo实现的功能比较强大和完整，但是很多模块的版本比较低。 某些新版本的 API 可能会发生变化。 某些模块依赖于node@9以下的版本。 如果你想正确运行 vue--2.0 可能需要一些努力。 如果您在学习过程中遇到问题或者有什么建议，请在评论区留言或者添加微信与我交流。 希望我们都能成为更好的自己~