vue SEO的解决方案

什么是 SEO

搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度。

搜索引擎的原理

从 meta 标签中读取 keywords、description 的内容
从HTML标签爬取和分析内容（h1-h6、strong、em等标签）
读取a标签里的链接，通过a标签的链接再跳转到别的网站（深度优先：先跳转回头再爬取；广度优先：先爬取然后再依次跳转）

SEO需要什么？

多页面
需要动态改变网页的 title、描述、关键字
网站内容

注意：这里网站内容从哪里来是一个关键点，如果页面的数据是通过请求来的，在页面加载的时候是先有DOM结构，然后才有数据，也就是说此时的网站内容，是无法被蜘蛛抓取的，所以会导致无法被百度收录。

SEO 为什么对于单页面应用不友好

vue是通过js控制路由，然后渲染出对应页面，因此所有隐藏在js中的跳转或者数据都获取不到，蜘蛛抓取中不会执行js，导致搜索引擎只能收录 index.html，而无法搜到其相关的子页面的内容。
浏览器加载页面时，首先会对页面进行渲染（dom生成、css构建、javascript解析、布局、绘制），当解析到js的时候，才会去触发vue的渲染，将元素挂载到id为app的div上，这时候我们才能看到页面的内容。因此被搜索引擎收录的index页面，可能也毫无价值，因为没有任何数据。

导致的问题

单页面应用无法被SEO
无法动态改变网页的TDK（ title、描述、关键字），每个页面的title和meta标签都是一样的，不利于蜘蛛爬取。

vue seo解方案

当然为了seo性能好一般会采用前后端不分离，优点在于非常利于seo，因为不用暴露接口，所以安全系数高。缺点即压力全在服务器端导致服务器负载大。

预渲染 prerender-spa-plugin
服务端渲染： Nuxt.js

方案一、 prerender-spa-plugin

预渲染也称客户端渲染，就是在页面加载之前把数据放在页面中，如果是vue文件，我们希望在打包时生成多个页面，这时候我们可以使用 prerender-spa-plugin插件。

存在问题：

动态路由解决不了【比如详情页】
无法动态改变title、描述、关键字。

适用场景: 比如公司官网，只适合某几个页面需要做seo。

使用：

一、安装插件

cnpm install --save prerender-spa-plugin   解决打包多个页面
cnpm install --save vue-meta-info          设置title、描述、关键字，解决SEO的问题

配置 vue.config.js：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');module.exports = {publicPath: './',configureWebpack: {plugins: [new PrerenderSPAPlugin({staticDir: path.join(__dirname, 'dist'),routes: [  // 需要预渲染的路由地址(需要打包成几个页面就配置几个路由)'/','/about','/contact',],}),],},
};

在组件中使用 vue-meta-info ：

<template><h2>Home Page</h2>
</template><script>export default {metaInfo: {title: 'aaaaaaa商城', // set a titlemeta: [{                 // set metaname: '关键字,web前端',content: '描述。。。。。。。。。'}]link: [{                 // set linkrel: 'asstes',href: 'https://assets-cdn.github.com/'}]}}
</script>

注意：这里的 metaInfo 不能使用组件中的data数据(由api接口请求回来的动态数据)，必须手写，前端自测时需要把路由模式设置为 hash。

方案二、服务端渲染： Nuxt.js

优点：

纯静态文件，访问速度更快
对比SSR，不涉及到服务器负载方面的问题
静态网页不易遭受黑客攻击，安全性更高

存在问题：

如果动态路由参数多的话不适用
Nuxt.js 执行generate静态化打包时，动态路由会被忽略
打开网站都效率慢，压力全在服务器，和前后端不分离差不多了

适用场景：整个网站都做 seo

使用：

前端自测

npm run build
npm run generate

注意：仅用于前端自测试，这个时候不能把打包的文件给后端。

项目打包上线

一、运行打包命令

npm run build

二、移动文件

.nuxt、static、nuxt.config.js、package.json

把上面的文件给后端，让他放在服务器上 (***）

三、后端安装在服务器安装 Node.js 环境后启动打包的项目

npm run start

注意：因为Nuxt.js默认走的端口是： http://localhost:3000/ ，但是我们需要指向到自己的域名，所以后端需要配置默认端口。

vue SEO的解决方案相关推荐

Vue SEO解决方案
目录 SEO是什么 SEO目的 Vue中seo的解决方案 SEO是什么 seo是一种网站优化技术,也被叫做搜索引擎优化,可以利用搜索规则提高网站上有关搜索的自然排名,主要表现为微博热搜控榜等.通过se ...
vue init失败解决方案-终极版
vue init失败解决方案-终极版参考文章: (1)vue init失败解决方案-终极版 (2)https://www.cnblogs.com/suger-life/p/8084368.html ...
一个完整和详细的网站SEO优化解决方案
祥云平台上的完整SEO优化解决方案包含四个主要组件: 第一:网站前端设计师第二:网站内容录入人员第三:网站优化和推广人员第四:背景数据分析师接下来,我们将为这四个部门分配工作. 首先,网站的前 ...
Vue权限管理解决方案
中文 | English vue-access-control :gem: Vue权限管理解决方案介绍 Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的 ...
搜索引擎优化（SEO）解决方案
搜索引擎优化(SEO)解决方案在此之前,希望大家能重新审视搜索引擎,通俗来讲就是我们日常所用的百度.谷歌.搜狗.雅虎等.磨刀不误砍柴工,知己知彼,百战不殆! 一.搜索引擎是什么? 搜索引擎(Se ...
vue页面缓存解决方案
关于vue页面通过解决方案方案一:使用keep-alive和v-if (备注:这种方案有问题,关闭面板后,在通过菜单打开页面还是有缓存) 1.添加keep-alive <keep-alive& ...
使用Yarn全局安装@vue/cli，无法执行vue命令的解决方案
使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案使用Yarn全局安装@vue/cli,无法执行vue命令的解决方 ...
Vue项目SEO优化解决方案
目录前言一. Vue 项目进行 SEO 优化 1. SSR服务器渲染 2. 静态化 (博客, 介绍性官网) 3. 预渲染 prerender-spa-plugin (插件) 4. 使用Phanto ...
seo vue 动态路由_基于Vue SEO的四种方案
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说. 关于服务器渲染:,对Vue版本有要求, ...

vue SEO的解决方案

vue SEO的解决方案

什么是 SEO

搜索引擎的原理

SEO需要什么？

SEO 为什么对于单页面应用不友好

导致的问题

vue seo解方案

方案一、 prerender-spa-plugin

存在问题：

使用：

方案二、服务端渲染： Nuxt.js

优点：

存在问题：

使用：

前端自测

项目打包上线

vue SEO的解决方案相关推荐

最新文章

热门文章

vue SEO的解决方案

vue SEO的解决方案

什么是 SEO

搜索引擎的原理

SEO需要什么？

SEO 为什么对于单页面应用不友好

导致的问题

vue seo解方案

方案一、 prerender-spa-plugin

存在问题：

使用：

方案二、服务端渲染 ： Nuxt.js

优点：

存在问题：

使用：

前端自测

项目打包上线

vue SEO的解决方案相关推荐

最新文章

热门文章

方案二、服务端渲染： Nuxt.js