vue项目SEO不友好怎么办？

解决vue项目SEO不友好的问题

SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。

SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等及站外优化，比如网站站外推广、网站品牌建设等，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。

内部优化

• META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化

• 内部链接的优化，包括相关性链接(Tag标签)，锚文本链接，各导航链接，及图片链接

• 网站内容更新：每天保持站内的更新(主要是文章的更新等)

外部优化

• 外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、问答、百科、社区、空间、微信、微博等相关信息网等尽量保持链接的多样性。

• 外链组建：每天添加一定数量的外部链接，使关键词排名稳定提升。

• 友链互换：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。

网络爬虫在爬取网页内容的时候，需要分析页面内容，主要有以下几点：

• 从 meta 标签中读取 keywords 、 description 的内容。

• 根据语义化的 html 的标签爬取和分析内容。一个整体都是用 div 标签的网站和正确使用了 html5 标签的效果是不一样的。

• 读取 a 标签里的链接，通过 a 标签的链接可以跳转到别的网站。（爬虫是先跳转，还是继续爬内容再跳转，就看算法是广度优先还是深度优先了）

• 像 h1 - h6 标签是具有不同程度的强调意义的。

• 一般将 h1 视为重要内容。同样有强调内容还有 strong 、 em 标签。

目前了解到两种解决方案：

第一种服务端渲染可以参考Vue官方文档中SSR服务端渲染，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。

这里主要介绍一下使用prerender-spa-plugin页面预渲染的方法：

原理：利用库 prerender-spa-plugin + vue-meta-info 配置webpack和页面实现预渲染方案，最终build出来多个html文件

1. 首先需要安装prerender-spa-plugin和vue-meta-info

   <span class="token function">npm</span> <span class="token function">install</span> --save prerender-spa-plugin <span class="token function">npm</span> <span class="token function">install</span> --save vue-meta-info 
   <span class="token function">npm</span> <span class="token function">install</span> --save prerender-spa-plugin <span class="token function">npm</span> <span class="token function">install</span> --save vue-meta-info 
   npm install --save prerender-spa-plugin npm install --save vue-meta-info 

   prerender-spa-plugin解决打包多个页面

   vue-meta-info解决SEO的问题

2. 在项目中找到main.js,配置以下代码

   <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> MetaInfo <span class="token keyword">from</span> <span class="token string">'vue-meta-info'</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>MetaInfo<span class="token punctuation">)</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> router<span class="token punctuation">,</span> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> document<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'render-event'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> 
   <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token keyword">import</span> MetaInfo <span class="token keyword">from</span> <span class="token string">'vue-meta-info'</span> Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>MetaInfo<span class="token punctuation">)</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> router<span class="token punctuation">,</span> <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> document<span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">'render-event'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span> 
   import Vue from 'vue' import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo) new Vue({ router, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app') 

3. 配置webpack

   <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> PrerenderSPAPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'prerender-spa-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> Renderer <span class="token operator">=</span> PrerenderSPAPlugin<span class="token punctuation">.</span>PuppeteerRenderer<span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">new</span> <span class="token class-name">PrerenderSPAPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>  <span class="token literal-property property">staticDir</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'/dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'/index'</span><span class="token punctuation">,</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>           <span class="token literal-property property">renderer</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Renderer</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>  <span class="token literal-property property">injectProperty</span><span class="token operator">:</span> <span class="token string">'__PRERENDER_INJECTED'</span><span class="token punctuation">,</span>  <span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">headless</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token literal-property property">renderAfterDocumentEvent</span><span class="token operator">:</span> <span class="token string">'render-event'</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> 
   <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span> <span class="token keyword">const</span> PrerenderSPAPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'prerender-spa-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> Renderer <span class="token operator">=</span> PrerenderSPAPlugin<span class="token punctuation">.</span>PuppeteerRenderer<span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">new</span> <span class="token class-name">PrerenderSPAPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>  <span class="token literal-property property">staticDir</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'/dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">'/index'</span><span class="token punctuation">,</span> <span class="token string">'/home'</span><span class="token punctuation">,</span> <span class="token string">'/login'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span>           <span class="token literal-property property">renderer</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Renderer</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>  <span class="token literal-property property">injectProperty</span><span class="token operator">:</span> <span class="token string">'__PRERENDER_INJECTED'</span><span class="token punctuation">,</span>  <span class="token literal-property property">inject</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">foo</span><span class="token operator">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">headless</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>  <span class="token literal-property property">renderAfterDocumentEvent</span><span class="token operator">:</span> <span class="token string">'render-event'</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> 
   const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; module.exports = { new PrerenderSPAPlugin({  staticDir: path.join(__dirname, '/dist'),  routes: [ '/index', '/home', '/login', ],           renderer: new Renderer({  injectProperty: '__PRERENDER_INJECTED',  inject: { foo: 'bar' }, headless: true,  renderAfterDocumentEvent: 'render-event'  }) }), } 

4. 将需要预渲染的页面配置SEO文字内容（对应上面routes数组里路由指向的页面）

   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">metaInfo</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的title'</span><span class="token punctuation">,</span> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'keywords'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的keywords'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的description'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> 
   <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">metaInfo</span><span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的title'</span><span class="token punctuation">,</span> <span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'keywords'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的keywords'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'description'</span><span class="token punctuation">,</span> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'我是 index 页面的description'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> 
   export default { metaInfo: { title: '我是 index 页面的title', meta: [ { name: 'keywords', content: '我是 index 页面的keywords' }, { name: 'description', content: '我是 index 页面的description' } ] }, } 

原文链接：https://blog.csdn.net/weixin_48576413/article/details/126581092?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522171836734316800185816639%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=171836734316800185816639&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-28-126581092-null-null.nonecase&utm_term=%E7%BD%91%E7%AB%99%E3%80%81seo