网站内容方案(什么是SEO搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度)

　　网站内容方案(什么是SEO搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度)

　　vue SEO解决方案什么是SEO

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

　　搜索引擎的原理是从meta标签中读取关键字和描述的内容，从html标签（h1-h6、strong、em等标签）中抓取并分析内容，读取a标签中的链接，并通过a标签的Links然后跳转到其他网站（深度优先：先回跳再爬；广度优先：先爬后依次跳转） SEO需要什么？多个页面需要动态改变网页的标题、描述、关键字网站内容

　　注意：这里 网站 内容来自哪里是一个关键点。如果页面的数据是通过请求来的，那么在页面加载的时候，先有一个DOM结构，再有数据，也就是说网站@网站的内容不能被蜘蛛爬取，所以百度收录无法使用。

　　为什么SEO对单页应用不友好？Vue通过js控制路由，然后渲染对应的页面，所以无法获取所有的跳转或者隐藏在js中的数据，并且js不会在spider爬取中执行，导致搜索引擎只能收录index.html，但无法搜索其相关子页面的内容。浏览器在加载页面时，首先渲染页面（dom生成、css构建、javascript解析、布局、绘图），解析为js时，触发vue的渲染，并将元素挂载到id app div ，然后我们就可以看到页面的内容了。因此，搜索引擎收录的索引页也可能因为没有数据而一文不值。由此产生的问题是单页应用程序无法通过 SEO 动态更改，并且 TDK（标题、描述、和关键字）不能动态更改。每个页面的title和meta标签都是一样的，不利于蜘蛛爬取。vue seo解决方案

　　当然，为了良好的seo性能，前后端是不分离的。好处是对seo很有好处，因为不需要暴露接口，所以安全系数高。缺点是压力都在服务器端，导致服务器负载大。

　　prerender-spa-plugin的服务端渲染：Nuxt.js scheme 一、 prerender-spa-plugin

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

　　存在问题：动态路由不能解决【如详情页】不能动态改变标题、描述、关键词。

　　适用场景：比如公司官网只适合某些需要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：

Home Page

export default {

metaInfo: {

title: 'aaaaaaa商城', // set a title

meta: [{ // set meta

name: '关键字,web前端',

content: '描述。。。。。。。。。'

}]

link: [{ // set link

rel: 'asstes',

href: 'https://assets-cdn.github.com/'

}]

}

}

　　注意：这里的metaInfo不能使用组件中的data数据（api接口返回的动态数据），必须手写，前端自检时需要设置路由模式为hash。

　　Scheme二、服务端渲染：Nuxt.js 优点：纯静态文件，访问速度比SSR快，不涉及服务器负载问题 Nuxt.js 路由参数过多不适用。执行生成静态打包时，动态路由将被忽略。打开网站很慢，压力都在服务器上，和前后端不分离差不多

　　适用场景：整个网站做seo

　　用途：前端自测

　　npm run build

npm run generate

　　注：仅用于前端自测。此时打包的文件无法发送到后端。

　　项目打包上线

　　一、运行打包命令

　　npm run build

　　二、移动文件

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

　　把上面的文件交给后端，让他放到服务器上（***）

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

　　npm run start

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