vue项目SEO不友好怎么办？

MyLoo

5个月前更新

3510

解决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文件

首先需要安装prerender-spa-plugin和vue-meta-info
```
npm install --save prerender-spa-plugin npm install --save vue-meta-info 
```
prerender-spa-plugin解决打包多个页面

vue-meta-info解决SEO的问题

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

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')

配置webpack

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'  }) }), }

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

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

声明📢本站内容均来自互联网，归原创作者所有，如有侵权必删除。本站文章皆由CC-4.0协议发布，如无来源则为原创，转载请注明出处。

THE END