搜索引擎优化怎么样(SEO是搜索引擎优化(SearchEngine)的英文缩写(组图))

　　搜索引擎优化怎么样(SEO是搜索引擎优化(SearchEngine)的英文缩写(组图))

　　前言

　　每个人都知道单页SEO不友好，但你有没有想过为什么单页SEO不友好？在单页网页盛行的今天，有什么策略可以避免这种劣势？我很好奇。有树吗？然后和我一起开始探索之旅~

　　搜索引擎如何工作

　　在搜索引擎网站的背景下，将有一个非常庞大的数据库，其中存储了大量的关键词，每个关键词对应着许多网站。这些网站是从被称为“搜索引擎蜘蛛”或“网络爬虫”的庞大互联网上一点一点地下载和采集的。随着各种网站的出现，这些勤劳的“蜘蛛”每天都在互联网上爬行，从一个链接下载内容到另一个链接，对其进行分析和提炼，并在其中找到关键词。如果“爬行器”认为关键词不在数据库中，但对用户有用，他们会将其存储在后台数据库中。相反，如果“蜘蛛”认为它是垃圾邮件或重复信息，它会放弃并继续爬行，寻找最新和有用的信息，保存它并为用户提供搜索。当用户搜索时，他们可以检索与关键字相关的网址并将其显示给访问者。关键词对使用多个URL，因此存在排序问题。相应地，当与关键词最一致的URL出现在前面时。在“蜘蛛”抓取和提炼关键词网页内容的过程中，有一个问题：“蜘蛛”能理解吗。如果网站的内容是flash、JS等，那么它就无法理解并且会被混淆。即使关键字更合适，它也是无用的。因此，如果搜索引擎能够识别网站内容，搜索引擎将增加网站的权重，并增加对网站的友好度@

　　搜索引擎优化导论

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

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

　　以下是SEO优化方向的简要说明：

　　网站design optimization网站content optimization为什么单页SEO不友好

　　对于单个页面，页面中的许多内容根据匹配的路由动态生成和显示，许多页面内容通过Ajax异步获取。网络抓取工具在抓取页面内容之前不会等待异步请求完成。网络抓取器很难准确地模拟相关行为并获得复合数据，它们更擅长捕获和分析静态资源

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

　　如果我们理解这个问题，“搜索引擎蜘蛛”或“网络爬虫”程序更擅长捕获和更新静态资源，那么我们应该采取相应的策略，生成尽可能多的静态资源，这样网络爬虫就可以获得更多的数据，提高网站的搜索排名。目前，市场上广泛使用的两种策略是：预渲染和SSR（服务器渲染）

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

　　预渲染

　　预渲染基于预渲染spa插件。在构建项目时，我通过headless浏览器模拟浏览器请求，并将获得的数据插入到给定的模板中，从而生成已经收录数据的HTML。这样，有了更多的静态资源，网络爬虫就可以抓取更多的网站信息，提高网站的搜索排名网站. 我最近使用react作为官方网站，考虑到单页se O的问题，官方网站大多是静态资源，使用预渲染技术。我想在这里和你分享

　　这里的预渲染使用预渲染spa插件模块结合webpack生成一些与路由对应的静态页面。我的项目是使用create-react-app scaffold构建的，定制的网页包配置是在config-overrides.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'

})

)

复制代码

　　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服务器渲染器相结合的SSR项目时仍然存在一些挑战。我在成功运行之前遇到了很多麻烦。我要强调的是，Vue生成的虚拟DOM与服务器呈现的内容不匹配

　　

　　如果遇到此问题，则需要检查中是否存在状态同步。/entry-client.js

　　

　　如果你想实施一个SSR项目，而不是急于实施nuxt框架，我的建议是先检查官方文件nuxt，然后试着自己实施一个小项目。如果遇到问题，可以参考我的Vue SSR实现演示和大写演示。此演示具有更强大和完善的功能，但许多模块的版本相对较低，一些新版本的API可以使用，也可以更改，一些模块依赖于node@9对于以下版本，要正确运行Vue hackernews-2.0.可能需要一些努力。如果您在学习过程中遇到问题或有任何建议，可以在评论区留言或添加微信lj_de__wei_xin与我沟通。愿我们都变得更好~