精华内容
下载资源
问答
  • VUE项目SEO问题的解决

    2021-04-12 22:15:31
    一.SEOSEO(Search Engine Optimization):汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。网络爬虫在爬取网页内容的时候,需要分析页面内容,主要有以下几点:从meta标签中读取...

    一.SEO

    SEO(Search Engine Optimization):汉译为搜索引擎优化。利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。

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

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

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

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

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

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

    seo为啥对vue单页面不友好?

    爬虫在爬取的过程中,不会去执行js,所以隐藏在js中的跳转也不会获取到

    vue通过js控制路由然后渲染出对应的页面,而搜索引擎蜘蛛是不会去执行页面的js的,导致搜索引擎蜘蛛只能收录index.html一个页面,在百度中就搜索不到相关的子页面的内容。

    我们加载页面的时候,浏览器的渲染包含:html的解析、dom树的构建、cssom构建、javascript解析、布局、绘制,当解析到javascript的时候才回去触发vue的渲染,然后元素挂载到id为app的div上,这个时候我们才能看到我们页面的内容,所以即使vue渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好

    引起的问题

    收录的页面少了->被抓取的页面就少了->点击量之类的也就少了;

    不能对对应的页面做TDK(title, keywords, description)不同的配置,每个页面的title和meta标签都是一样的,不利于网络爬虫的爬取

    二、网站渲染

    1.「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制;

    浏览器会直接接收到 经过服务器计算之后的HTML字符串,(计算:服务器经过解析存放在服务器端的模板文件),浏览器只进行了HTML的解析,把HTML所代表的图像显示给用户。服务端渲染都是针对第一次get请求,用于生产完整的html给浏览器,浏览器直接出首屏。后端渲染的网站点击一下,就会刷新一个,然后从后台请求新的页面数据。

    好处:前端耗时少(前端只负责将html进行展示),利于SEO

    坏处:网络传输数据量大,占用(部分、少部分)服务器运算资源,response 出的数据量会(稍)大点,模板改了前端的交互和样式什么的一样得跟着联动修改。

    2.「前端渲染」指使用 JS 来渲染页面大部分内容,代表是现在流行的 SPA 单页面应用;

    前端渲染就是指浏览器会从后端得到一些信息,这些信息或许angularjs的模板文件,亦或是JSON等各种数据交换格式所包装的数据,甚至是直接的合法的HTML字符串。前端拿到信息后,组织排列形成最终可读的HTML字符串。

    客户端渲染都是针对客户端状态变化,请求了数据,进行局部dom变化(局部可能大到整个body)。

    react/vue在这种场景下,服务端仅仅将jsx/模版转换成html,客户端根据props/state变化,协调虚拟dom和真实dom之间的同步。

    好处:

    局部刷新。无需每次都进行完整页面请求

    懒加载。如在页面初始时只加载可视区域内的数据,滚动后rp加载其它数据,可以通过 react-lazyload 实现

    富交互。使用 JS 实现各种酷炫效果

    节约服务器成本。省电省钱,JS 支持 CDN 部署,且部署极其简单,只需要服务器支持静态文件即可

    天生的关注分离设计。服务器来访问数据库提供接口,JS 只关注数据获取和展现

    JS 一次学习,到处使用。可以用来开发 Web、Serve、Mobile、Desktop 类型的应用

    坏处:前端耗时较多,不利于SEO,首屏加载慢。由于传统的搜索引擎只会从 HTML 中抓取数据,导致前端渲染的页面无法被抓取。前端渲染常使用的 SPA 会把所有 JS 整体打包,无法忽视的问题就是文件太大,导致渲染前等待很长时间。特别是网速差的时候,让用户等待白屏结束并非一个很好的体验。

    3.「同构渲染」指前后端共用 JS,首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。例如vue/react的服务器渲染.

    三、vue-cli3解决SEO以及首屏加载问题

    1.vue ssr

    优点:更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间(time-to-content),特别是             对于缓慢的网络情况或运行缓慢的设备。

    缺点:浏览器特定的代码,只能在某些生命周期钩子函数(lifecycle hook)中使用;一些外部扩展库(external library)可能需要特殊             处理,才能在服务器渲染应用程序中运行。

    涉及构建设置和部署的更多要求。

    更多的服务器端负载。

    2.nuxt.js

    Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。甚至可以用它来做为静态站生成器。比ssr更加简单亲民。

    3.预渲染:prerender-spa-plugin插件。

    如果只是改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。

    如果你使用 webpack,你可以使用 prerender-spa-plugin 轻松地添加预渲染。

    三、vue预渲染

    由于项目只是改善少数页面的seo,所以使用预渲染方式,预渲染插件使用vue官方推荐的prerender-spa-plugin。

    使用步骤:

    1.安装:cnpm i prerender-spa-plugin --save-dev

    (注意:要使用cnpm而不用npm,因为这个插件依赖puppeteer插件,会附带下载chrome,因为墙npm可能会一直按照不成功。)

    2.在main.js中添加mounted

    new Vue({

    el: '#app',

    router,

    components: { App },

    template: '',

    mounted() {

    document.dispatchEvent(new Event('render-event'));

    }

    })

    3.在build/webpack.prod.conf.js中添加

    const PrerenderSPAPlugin = require('prerender-spa-plugin')

    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

    plugins: [

    ......

    new PrerenderSPAPlugin({

    // 生成文件的路径,也可以与webpakc打包的一致。

    // 下面这句话非常重要!!!

    // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。

    staticDir: path.join(__dirname, '../dist'),

    // 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。

    routes: ['/'],

    // 这个很重要,如果没有配置这段,也不会进行预编译

    renderer: new Renderer({

    inject: {

    foo: 'bar'

    },

    headless: false,

    // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。

    renderAfterDocumentEvent: 'render-event',

    renderAfterTime: 5000

    })

    })

    ]

    4.npm run build 打包后 dist/index.html(或其他文件)中有出现页面内容则为成功。

    展开全文
  • vue SEO的解决方案

    千次阅读 2021-02-15 10:20:28
    SEO(Search Engine Optimization)搜索引擎优化,是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。...

    介绍

    什么是 SEO

    SEO(Search Engine Optimization)搜索引擎优化,是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的关键词排名以及公司产品的曝光度。

    搜索引擎的原理

    搜索引擎,又称爬虫或者蜘蛛,它在爬取和分析页面内容时,主要进行如下操作:

    1. 从 meta 标签中读取 keywords、description 的内容
    2. 根据语义化的html标签爬取和分析内容(h1-h6、strong、em等标签具有不同程度的强调意义;与整篇都是div构成的网页,SEO结果就相差甚远了)
    3. 读取a标签里的链接,通过a标签的链接再跳转到别的网站(深度优先:先跳转回头再爬取;广度优先:先爬取然后再依次跳转)

    SEO 为啥对单页面应用不友好

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

    导致的问题

    1. 单页面应用无法被SEO,会导致被搜索引擎收录的页面减少,从而导致点击量减少,影响产品曝光度
    2. 不能对不同页面设置不同的TDK(title, keywords, description),每个页面的title和meta标签都是一样的,不利于网络爬虫的爬取

    解决方案

    由于爬虫不会去执行js,因此如果需要对单页面应用做SEO,就需要预渲染。vue提供了两种方案解决该问题

    1. 使用 Nuxt.js 实现服务端预渲染(SSR) https://cn.vuejs.org/v2/guide/ssr.html
    2. 使用 prerender-spa-plugin插件实现 https://www.npmjs.com/package/prerender-spa-plugin

    prerender-spa-plugin 较简单,但打包需要的时间长,适用于少量页面;而SSR虽然复杂,但更适用于大型应用的SEO

    方案一:prerender-spa-plugin

    这里用的是 vue-cli 4.5 + Vue2

    使用 vue ui 进入图形界面,搜索并安装插件 vue-cli-plugin-prerender-spa

    插件的作用

    1. 安装 prerender-spa-plugin,并记录到 package.json 的 devDependencies
    2. 修改 src/main.js 添加 mounted: () => document.dispatchEvent(new Event("x-app-rendered"))
    3. 自动配置 vue.config.js

    在这里插入图片描述package.json
    在这里插入图片描述

    src/main.js

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App),
      mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
    }).$mount('#app')
    
    

    vue.config.js

    module.exports = {
      lintOnSave: false,
    
      pluginOptions: {
        prerenderSpa: {
          registry: undefined,
          renderRoutes: [ // 需要预渲染的路由地址
            '/','/about'
          ],
          useRenderEvent: true, // 在 mounted 时,传递渲染事件通知 prerender
          headless: true, // 无界面浏览器
          onlyProduction: true // 仅在生产模式才进行spa处理
        }
      }
    }
    

    至于 src/router/index.js 不用做任何改动,也不用把 mode 设置为 history

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    

    编译报错 Chromium revision is not downloaded

    仅仅做了上述配置后,执行 npm run build 还是会报错 Chromium revision is not downloaded,这是因为 prerender-spa-plugin 这个插件依赖于爬虫来抽取页面,而 puppeteer 正是这个用来实现爬虫的无界浏览器
    在这里插入图片描述Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库,通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的(非 headless)Chrome。

    在浏览器中手动完成的大多数事情都可以通过使用 Puppeteer 完成,下面是一些入门的例子:

    • 生成屏幕截图和 PDF 页面
    • 检索 SPA 并生成预渲染内容(即“SSR”)
    • 从网站上爬取内容
    • 自动提交表单,UI测试,键盘输入等
    • 创建一个最新的自动测试环境。使用最新的 JavaScript 和浏览器功能,在最新版本的 Chrome 中直接运行测试
    • 捕获网站的时间线跟踪,以帮助诊断性能问题

    要安装该插件,一定要使用 cnpm 命令,从国内镜像地址下载 chrome 内核(npm从外国的地址是无法正常下载的,这会导致后面也无法正常 build )

    解决办法有三种:
    1.使用Chromium 国内源

    npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
    npm i -g puppeteer
    

    2.使用淘宝的cnpm 安装

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm i -g puppeteer
    
    1. 手动下载Chromium文件,解压后放在本地
      https://npm.taobao.org/mirrors/chromium-browser-snapshots/
      放在模块的默认读取目录下
    • node_modules\puppeteer\.local-chromium\win64-848005(系统类型-版本号)\chrome-win32(下载的文件名)\
    • node_modules\puppeteer\.local-chromium\linux-848005(系统类型-版本号)\chrome-linux(下载的文件名)\
      在这里插入图片描述在这里插入图片描述

    在这里插入图片描述

    如果安装后依旧报上述错误,试试 cnpm uninstall puppeteer 命令。虽然字面意思上是卸载,但实际测试发现还是重装
    在这里插入图片描述

    在这里插入图描述

    最后执行 npm run build,就会发现每个路由都在 dist 文件夹被编译成一个单独的 html 文件,这样就可以正常SEO了
    在这里插入图片描述
    在这里插入图片描述

    vue-meta-info

    使用该组件可以解决之前说的 —— SEO 的 TDK问题(不同页面设置不同的 title, keywords, description)或为某些页面设置允许缩放,而其他页面不允许等操作。

    首先引入 vue-meta-info 依赖,npm install -D vue-meta-info,该插件的官方地址为 https://www.npmjs.com/package/vue-meta-info
    在这里插入图片描述
    之后在 src/main.js 中全局绑定

    import MetaInfo from 'vue-meta-info'
     
    Vue.use(MetaInfo)
    

    最后在组件内使用即可

    <template>
      ...
    </template>
     
    <script>
      export default {
        metaInfo: {
          title: 'My Example App', // set a title
          meta: [{                 // set meta
            name: 'keyWords',
            content: 'My Example App'
          }]
          link: [{                 // set link
            rel: 'asstes',
            href: 'https://assets-cdn.github.com/'
          }]
        }
      }
    </script> 
    

    npm run build 打包结果可看出

    1. 不同路由有不同的 title
    2. 不同路由也有自己的 meta-name 和 meta-content
      在这里插入图片描述在这里插入图片描述

    方案二:Nuxt.js

    优点

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

    不足:

    1. 如果动态路由参数多的话不适用
    2. Nuxt.js 执行generate静态化打包时,动态路由会被忽略
    展开全文
  • 关于vue项目的seo问题

    千次阅读 2018-08-22 15:38:05
    但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前后端分离开发么?  首先,可以肯定的...

     不可否定的是,vue现在火。但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前后端分离开发么?

            首先,可以肯定的是前后端分离不利于SEO,为什么呢?

            1.搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对seo并不友好。

            2.seo 本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不回去执行请求到的js的。也就是说,如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 所以服务端渲染就是尽量在服务器发送到浏览器前 页面上就是有数据的。

            3.一般的数据逻辑操作是放在后端的。排序这个如果仅仅是几条数据,前后端排序开起来是一样的,如果是有1000条数据,前端要排序就要都请求过来。这样显然是不合理的。

            这就代表交互网站不用vue做么?当然不是。

            无意间在知乎看见vue的作者是这么说的:

     

     

       所以说,即使是像vue这种前后端分离开发的网站,我们还是能够通过其他技术解决seo问题的。

    常用的解决方案有三种:

    1. 页面预渲染
    2. 服务端渲染

    3. 路由采用h5 history模式

    而应用到的技术也是有很多,大体上我总结了四个,也是比较常用的:

    第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html

    第二,vue-meta-info,这个是针对单页面的meta SEO的另一种思路,参考网站 https://zhuanlan.zhihu.com/p/29148760

    第三,nuxt 简单易用,参考网站 https://zh.nuxtjs.org/guide/installation

    第四,phantomjs 页面预渲染,具体参考 phantomjs.org

    而市场上依靠vue做出来的唱功案例还是很多的:

    1) https://www.bilibili.com (bilibili)
    2) http://m.sohu.com (手机搜狐网)
    3) https://juejin.im/timeline (掘金)
    4) http://element.eleme.io/#/en-US (2)
    5) https://classics.autotrader.com (New&Used Classic Car for sale)
    6) http://qiqu.uc.cn (奇趣百科)

    7) https://m.uhouzz.com/apartments (异乡好居)

    那么他们是如何做优化的呢?我们通过分析,总结以下几点

    1) bilibili做了基本的seo优化,比如

    (1)TDK描叙详细。
    (2)提升网页加载速度:对外联css,以及js使用了延迟加载以及dns-prefetch,preload。

    (3)外联较多,关键词排名高。

    2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin 对SEO进行了优化

    3) Element在logo上加了首页的地址,并且只有logo是放在h1标签中。

    4) 有一些流量不太高的网站比如http://www.marshall.edu (Marshall University)做了seo社会化分享优化,在meta信息中出现了property=”og:title”这种新东西;https://we.dji.com/zh-CN/campus (大疆招聘)使用了Nuxt

    这些网站中出现率最高的公共组件或公共方法有四个:

    1) 面包屑导航
    2) Icon
    3) 搜索框

    4) Button组件

    关于收录问题:

        网站收录,搜索引擎在爬取你的网页以后,通过对网页内容进行检测,将符合收录规则的网页存库。因此该网页将会出现在与网页内容相关的查询的搜索结果中。

        搜索引擎判断一个网站权重高低的尺度无非两个:收录和外链。因此百度收录的高低很大程度上影响着网站在百度的排名

        目前百度spider抓取新链接的途径有两个:

        一是主动出击发现抓取

        二就是从百度站长平台的链接提交工具中获取数据,其中通过主动推送功能“收”上来的数据最受百度spider的欢迎。

            对于站长来说,如果链接很长时间不被收录,建议尝试使用主动推送功能,尤其是新网站,主动推送首页数据,有利于内页数据的抓取。

            这只是我片面的分析,具体情况我们还要根据网站定位,开发成本,后期的维护成本等综合考虑,但是我觉得掘金真的是一个非常成功的案例,既然有人给我们迈出了这一步,我们也要紧跟潮流,毕竟互联网是一个与时俱进的行业。如果我们永远停留在传统的混合开发,也会给我们的公司,给我们个人带来一些影响。

     

    展开全文
  • Vue SEO解决方案

    2021-05-06 16:01:14
    目录SEO是什么SEO目的Vueseo的解决方案 SEO是什么 seo是一种网站优化技术,也被叫做搜索引擎优化,可以利用搜索规则提高网站上有关搜索的自然排名,主要表现为微博热搜控榜等。通过seo技术,可以实现一系列的...


    SEO是什么

    在这里插入图片描述

    seo是一种网站优化技术,也被叫做搜索引擎优化,可以利用搜索规则提高网站上有关搜索的自然排名,主要表现为微博热搜控榜等。通过seo技术,可以实现一系列的商业行为,对产品品牌进行宣传收益。

    • 简单来说:它是 搜索引擎优化

    SEO目的

    在这里插入图片描述

    • 达成广告点击
    • 销售产品/服务
    • 提升品牌建设

    Vue中seo的解决方案

    方案一:prerender-spa-plugin

    这里用的是 vue-cli 4.5 + Vue2

    使用 vue ui 进入图形界面,搜索并安装插件 vue-cli-plugin-prerender-spa

    插件的作用

    1. 安装 prerender-spa-plugin,并记录到 package.json 的 devDependencies
    2. 修改 src/main.js 添加 mounted: () => document.dispatchEvent(new Event(“x-app-rendered”))
    3. 自动配置 vue.config.js

    在这里插入图片描述

    • package.json

    在这里插入图片描述

    • src/main.js
    
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      store,
      render: h => h(App),
      mounted: () => document.dispatchEvent(new Event("x-app-rendered")),
    }).$mount('#app')
    
    
    • vue.config.js
    module.exports = {
      lintOnSave: false,
    
      pluginOptions: {
        prerenderSpa: {
          registry: undefined,
          renderRoutes: [ // 需要预渲染的路由地址
            '/','/about'
          ],
          useRenderEvent: true, // 在 mounted 时,传递渲染事件通知 prerender
          headless: true, // 无界面浏览器
          onlyProduction: true // 仅在生产模式才进行spa处理
        }
      }
    }
    
    • 至于 src/router/index.js 不用做任何改动,也不用把 mode 设置为 history
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      }
    ]
    
    const router = new VueRouter({
      routes
    })
    
    export default router
    

    编译报错 Chromium revision is not downloaded

    仅仅做了上述配置后,执行 npm run build 还是会报错 Chromium revision is not
    downloaded,这是因为 prerender-spa-plugin 这个插件依赖于爬虫来抽取页面,而 puppeteer
    正是这个用来实现爬虫的无界浏览器

    在这里插入图片描述

    Puppeteer 是一个控制 headless Chrome 的 Node.js API 。它是一个 Node.js 库,通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的(非 headless)Chrome。

    在浏览器中手动完成的大多数事情都可以通过使用 Puppeteer 完成,下面是一些入门的例子:

    • 生成屏幕截图和 PDF 页面
    • 检索 SPA 并生成预渲染内容(即“SSR”)
    • 从网站上爬取内容
    • 自动提交表单,UI测试,键盘输入等
    • 创建一个最新的自动测试环境。使用最新的 JavaScript 和浏览器功能,在最新版本的 Chrome 中直接运行测试
    • 捕获网站的时间线跟踪,以帮助诊断性能问题

    要安装该插件,一定要使用 cnpm 命令,从国内镜像地址下载 chrome 内核(npm从外国的地址是无法正常下载的,这会导致后面也无法正常 build )

    解决办法有三种:

    1. 使用Chromium 国内源
    npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
    npm i -g puppeteer
    
    1. 使用淘宝的cnpm 安装
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm i -g puppeteer
    
    1. 手动下载Chromium文件,解压后放在本地
      https://npm.taobao.org/mirrors/chromium-browser-snapshots/
      放在模块的默认读取目录下
    • node_modules\puppeteer.local-chromium\win64-848005(系统类型-版本号)\chrome-win32(下载的文件名)\
    • node_modules\puppeteer.local-chromium\linux-848005(系统类型-版本号)\chrome-linux(下载的文件名)
      在这里插入图片描述
      在这里插入图片描述

    在这里插入图片描述

    如果安装后依旧报上述错误,试试 cnpm uninstall puppeteer 命令。虽然字面意思上是卸载,但实际测试发现还是重装

    在这里插入图片描述

    在这里插入图片描述

    • 最后执行 npm run build,就会发现每个路由都在 dist 文件夹被编译成一个单独的 html 文件,这样就可以正常SEO了

    在这里插入图片描述

    在这里插入图片描述

    vue-meta-info

    使用该组件可以解决之前说的 —— SEO 的 TDK问题(不同页面设置不同的 title, keywords, description)或为某些页面设置允许缩放,而其他页面不允许等操作。

    首先引入 vue-meta-info 依赖,npm install -D vue-meta-info,该插件的官方地址为 https://www.npmjs.com/package/vue-meta-info

    在这里插入图片描述

    • 之后在 src/main.js 中全局绑定
    import MetaInfo from 'vue-meta-info'
     
    Vue.use(MetaInfo)
    
    • 最后在组件内使用即可
    <template>
      ...
    </template>
     
    <script>
      export default {
        metaInfo: {
          title: 'My Example App', // set a title
          meta: [{                 // set meta
            name: 'keyWords',
            content: 'My Example App'
          }]
          link: [{                 // set link
            rel: 'asstes',
            href: 'https://assets-cdn.github.com/'
          }]
        }
      }
    </script> 
    
    • npm run build 打包结果可看出
    1. 不同路由有不同的 title
    2. 不同路由也有自己的 meta-name 和 meta-content

    在这里插入图片描述
    在这里插入图片描述

    方案二:Nuxt.js

    优点

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

    不足:

    1. 如果动态路由参数多的话不适用
    2. Nuxt.js 执行generate静态化打包时,动态路由会被忽略

    展开全文
  • VUE SEO phantomjs 解决爬虫问题 ,会抛出异常js文件加载不上 ![图片说明](https://img-ask.csdn.net/upload/202009/27/1601193817_277026.png) 是因为 phantomjs 已经不更新的缘故吗,导致 版本跟不上? 求大佬...
  • vue处理网页的seo问题

    2021-10-12 15:30:51
    再mian.js中访问后台接口 ... url: "/seo/list", }).then(item => { let res = item.data.data if (to.name == "index" || !to.meta) { document.title = res.title; } else if (to.meta.title) {
  • 前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说。 1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 4....
  • 关于vue项目的seo问题及解决方案

    千次阅读 2020-04-01 16:02:42
    关于vue项目的seo问题及解决方案
  • 主要介绍了在不使用ssr的情况下解决Vue单页面SEO问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • https://github.com/lengziyu/vue-seo-phantomjs 由于vue站点有不同的url和参数,处理搜索引擎访问代理转发时需要修改如下配置即可抓取带参数的页面数据 location / { if ($http_user_agent ~* "Baiduspider|...
  • VueSEO问题

    2019-10-15 11:19:54
    Vue为什么会出现SEO问题 Vue 是单页面应用,爬虫只能爬取到html页面的内容,无法爬取到js脚本里面的内容。单页面应用是通过js脚本改变页面的内容,并没有进行http的请求,爬虫爬取不到,就会造成SEO较差 如何解决...
  • vue SEO

    2021-05-31 13:47:57
    一。本人主要是在不改动SPA单页面的情况下,专门针对爬虫进行处理,从而完成SEO。 使用工具:puppeteer、nginx。 puppeteer:主要用于生成wa
  • 基于Vue SEO的四种方案

    2020-01-13 01:30:44
    https://segmentfault.com/a/1190000019623624
  • vue项目SEO优化

    千次阅读 2021-02-24 14:19:48
    我的开源微服务前后端分离博客项目地址,欢迎各位star 觉得不错关注下博主 博主技术博客地址 欢迎大家进群,一起讨论学习 ...不管是Vue、React还是angular等实现路由的框架,无一不是加载原始html代码
  • vueseo优化

    万次阅读 多人点赞 2019-09-03 11:02:37
    seo为啥对vue单页面不友好? vue项目怎么做seo优化? prerender-spa-plugin怎么使用,以及它的工作原理 什么是seoSEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对...
  • vue怎么支持seo

    2021-01-11 18:29:26
    前言:首先明确一个知识点,为什么vueseo支持不友好?其次仅仅vueseo 的支持不好吗?react呢?angular呢?答:凡是spa项目对seo都非常不友好,为什么?这个跟网络爬虫有关跟spa的特性有关。第一,网络爬虫喜欢...
  • Vue seo预渲染处理

    2020-04-22 16:00:55
    npm install prerender-spa-plugin --save const PrerenderSPAPlugin = require('prerender-spa-plugin...安装 vue-meta-info 打完包后会发现已经是多页面 3. 全局安装anywhere 在dist目录下运行anywhere 查看源码
  • VUE SEO PhantomJS

    千次阅读 2019-12-30 23:22:29
    参考: https://github.com/lengziyu/vue-seo-phantomjs https://www.jianshu.com/p/2bbbc2fcd16d
  • vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 ...其实解决SEO问题不一定非得用服务端渲染来处理,服务端渲染对于刚接触 vue 的新手来说,并不
  • vue seo解决方案

    2021-02-19 17:40:31
    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说。 1.SSR服务器渲染; 2.静态化; 3.预渲染prerender-spa-plugin; 4...
  • 关于vueseo优化

    万次阅读 多人点赞 2019-06-18 22:02:18
    最近公司的项目中有一个非常重要的功能就是seo的优化,这个东西堵了一段时间,中间还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就...
  • 目录前言一、 Vue 项目进行 SEO 优化1. SSR服务器渲染2. 静态化 (博客, 介绍性官网)3. 预渲染 prerender-spa-plugin (插件)4. 使用Phantomjs `针对爬虫` 做处理小结总结 前言 众所周知,vue项目是单页面的应用,是...
  • vue网站phantomjs seo优化

    2021-03-11 14:08:22
    方案来源:https://github.com/tuoxiaozhong/vue-seo-phantomjs 1.安装 PhantomJS 下载 PhantomJS 从官网http://phantomjs.org/download.html下载linux64位的安装包即 phantomjs-2.1.1-linux-x86_64.tar.bz2 解压...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,972
精华内容 3,988
关键字:

vue的seo问题

vue 订阅
友情链接: pic.rar