精华内容
下载资源
问答
  • vue单页面SEO优化

    千次阅读 2018-11-15 17:30:17
    1.1 安装prerender-spa-plugin ...vue.config.js: const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin') module.exports = { plugins: [ ... new PrerenderSPAPlugin...

    1.1 安装prerender-spa-plugin

    vue.config.js:

    const path = require('path')
    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    
    module.exports = {
      plugins: [
        ...
        new PrerenderSPAPlugin({
          // Required - The path to the webpack-outputted app to prerender.
          staticDir: path.join(__dirname, 'dist'),
          // Required - Routes to render.
          routes: [ '/', '/about', '/some/deep/nested/route' ],
        })
      ]
    }

    1.2.home.vue

      metaInfo() {
        return {
          title: this.pageName,
          meta: [
            {
              name: "keyWords 123 333 123",
              content: "My Example App"
            }
          ],
          link: [
            {
              rel: "asstes",
              href: "https://assets-cdn.github.com/"
            }
          ]
        };
      },

    11

    展开全文
  • 今天学习了简书上的一个单页面应用seo优化的方法。 前后端分离之后,前端各大框架展露头角完美的开发体验也带来了一些问题比如seo单页面应用相比之前的php,jsp的服务端渲染方式来说是一大不足。为了让我们的项目...

    今天学习了简书上的一个单页面应用seo优化的方法。
    前后端分离之后,前端各大框架展露头角完美的开发体验也带来了一些问题比如seo,单页面应用相比之前的php,jsp的服务端渲染方式来说是一大不足。为了让我们的项目能让更多的人看到对于seo的优化显得非常的重要。

    下面是引用了一位简书博主的方法。在打包项目的时候将每个vue文件打包成单独的静态文件https://www.jianshu.com/p/6a4c0b281e7f

    展开全文
  • 参考: https://blog.csdn.net/Ray_20160915/article/details/96486582 ... https://github.com/muwoo/vue-meta-info https://segmentfault.com/a/1190000019623624?u...
    展开全文
  • vue单页面网站seo优化

    2018-09-13 10:13:32
    处理 Vue 单页面应用 SEO 的另一种思路vue-meta-info 官方地址:monkeyWangs/vue-meta-info(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合)单页面应用在前端正...

    处理 Vue 单页面应用 SEO 的另一种思路

    vue-meta-info 官方地址: monkeyWangs/vue-meta-info

    (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合)

    单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其带来的完美的用户体验,极强的开发效率的同时,也似乎不可避免的要去处理 SEO 的需求。

    本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍:

    其实解决SEO问题不一定非得用服务端渲染来处理,服务端渲染对于刚接触 vue 的新手来说,并不是那么友好,虽然已有官方 SSR 中文文档。但是对于一个已经开发完毕的 vue 项目去接 SSR 无论是从工作量还是技术角度来说,都是一种挑战。不过这些怎么能难得到伟大的前端程序员!

    如果您调研服务器端渲染(SSR)只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么您可能需要预渲染。无需使用 web 服务器实时动态编译 HTML,而是使用预渲染方式,在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将您的前端作为一个完全静态的站点。
    如果您使用 webpack,您可以使用 prerender-spa-plugin 轻松地添加预渲染。它已经被 Vue 应用程序广泛测试。

    预渲染为SEO提供了另一种可能,简单的来说,预渲染就是当vue-cli构建的项目进行npm run build 的时候,会按照路由的层级进行动态渲染出对应的html文件。

    // webpack.conf.js
    var path = require('path')
    var PrerenderSpaPlugin = require('prerender-spa-plugin')
    module.exports = {  // ...  
        plugins: [    
            new PrerenderSpaPlugin(      // 编译后的html需要存放的路径     
                path.join(__dirname, '../dist'),      // 列出哪些路由需要预渲染     
                [ '/', '/about', '/contact' ]  
            ) 
        ]
    }

    最终会生成类似于这样的目录结构

     

     

    而里面的内容都会被渲染成了静态的 html 文件

    相对于之前的可能只有

    <html> 
        <head>   
            <meta charset="utf-8">   
            <title>tangeche-pc</title> 
        </head> 
        <body>   
            <div id="app"></div>   
            <!-- built files will be auto injected --> 
            <script type="text/javascript" src="/app.js"></script>
        </body>
    </html>

    可以直观的发现,预渲染的作用。

    有了预渲染,我们可以解决很多方面的SEO的问题,但是有时候我们也会需要Meta信息的变化,比如 title 比如 Meta keyWords 或者是 link...

    这里安利一下 vue-meta-info 一个可以动态设置meta 信息的vue插件如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合。

    vue-meta-info 是一个基于 vue 2.0 的插件,它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化,自动更新你的 title、meta 等信息,那么用此 插件也是再合适不过了。 当然,有时候我们也可能会遇到让人头疼的 SEO 问题,那么使用此插件配合 prerender-spa-plugin 也是再合适不过了

    1.安装

      1-1. yarn:

    yarn add vue-meta-info

     

    1-2. npm:

    npm install vue-meta-info --save

     

     

    2.全局引入 vue-meta-info

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

    3.组件内静态使用 metaInfo

    <template>
     ...
    </template>
    <script>
     export default {
       metaInfo: {
         title: '致力于网站制作', // set a title      
         meta: [{                 // set meta        
            name: '追梦|猪|html|JWG|JWGweb|Html|Css|Javascript|jQuery|Html5|H5|Css3|Vue.js|Bootstrap|Ionic|Node.js|AngularJS|ReactJS|Sass/Less|WebApp|前端工具|ps|fw|DW',
           content: '致力于网站制作'
         }]
         link: [{ // set link        
            rel: 'asstes',
           href: 'https://github.com/jwgweb'
         }]
       }
     }
    </script>

    4.如果你的 title 或者 meta 是异步加载的,那么你可能需要这样使用

     

    <template>
     ...
     
    </template>
    <script>
         export default {
           name: 'async',
           metaInfo () {      
               return {
               title: this.pageName
             }
           },
           data () {      
               return {
               pageName: 'loading'
             }
           },
           mounted () {
             setTimeout(() => {        
                 this.pageName = 'async'
             }, 2000)
           }
         }
    </script>

     

    写到这里,大家应该都明白了我所说的 SEO 的另一种思路是什么了,preRender + metaInfo

    可以才一定层次上去解决 SEO 问题,这种方式优点就是代码侵入性最低,开发成本最少。但是也是有弊端的:

    不能很好地处理用户独特性路由: 比如有个路由是 /my-profile, 预渲染可能不会很好用, 因为这个内容页是根据用户信息变化的,所以页面内容也不是唯一确定的. 你可能会使用类似于这样的路由路径 /users/:username/profile,但是这样也是不合适的.

    经常变动的文件

    需要预渲染成千上万的路由文件: 这个可能会导致你编译时间.....额,可能你会编译很长时间

    展开全文
  • Vue单页面应用优化SEO之预渲染

    千次阅读 2018-12-06 14:06:50
    这里优化SEO重点说vue-cli框架,毕竟是spa项目,所以SEO十分不友好,原因在于它自身并不是静态html,而是由js动态生成的(通过文档碎片劫持的方式以及Object.defineProperties等方法,有兴趣可以去研究研究vue的原理)...
  • 主要介绍了详解处理Vue单页面应用SEO的另一种思路,本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍,非常具有实用价值,需要的朋友可以参考下
  • // vue-cli生成的配置中就已有这个了,不要动 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true,...
  • (设置vue 单页面meta info信息,如果需要单页面SEO,可以和prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其...
  • Vue单页面SEO时显得很无力,尤其是百度不会抓取动态脚本 Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充 Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面 但...
  • Vue单页面应用性能优化实践

    千次阅读 2018-02-08 11:45:53
    Vue单页面应用性能优化实践最近业余时间一直在做一个个人项目,使用的是vue+vue-router实现的单页面应用。相对于多页面应用来说,其实单页面应用对性能优化的要求要更高,因为首屏加载的文件要更大,只要过了首屏...
  • 1.编码优化 1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher 2. vue在v-for时给每项元素绑定事件需要用事件代理 3. spa页面采用keep-alive缓存组件 4. 拆分组件(提高复用...
  • (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合)单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受其...
  • vue单页面通过prerender-spa-plugin插件进行SEO优化

    万次阅读 热门讨论 2018-08-07 13:39:40
    prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一些理解和详细配置 一、前言 之前虽然...
  • 上周想给自己做的网站做一下seo优化,因为这个网站是用vue做的,所以首先就得先解决单页面seo问题. 网上有好几种方案: 1、使用服务器端渲染(很多大厂都在用) 2、使用vue-meta-info 配合 prerender-spa-...
  • 上一篇说了vue单页面解决解决SEO的问题 只是用php预处理了meta标签 但是依然没有内容填充,所以对于内容抓取依然有些乏力,只是解决了从无到有的问题 那接下来可以更进一步的预填充内容了 预填充内容 这里...
  • 首先来说下prerender-spa-plugin这个插件,是不能处理动态路由的,如果想要是优化一下首页的加载速度,可以使用这个。 推荐使用nuxt,这个可以处理动态路由,官网的文档也很好看懂。 1. 先安装prerender-spa-plugin...
  • vueseo优化

    万次阅读 多人点赞 2019-09-03 11:02:37
    seo为啥对vue单页面不友好? vue项目怎么做seo优化? prerender-spa-plugin怎么使用,以及它的工作原理 什么是seoSEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对...
  • Vue SSR 服务器渲染 解决 SPA 单页面 SEO优化 问题 构建步骤 1. 创建nuxt 项目 检查 npx // npm 5.2.0 以上版本默认包含 npx // 创建项目 npx create-nuxt-app project_name Choose the package manager Yarn ...
  • vue的项目都是ajax请求数据,引擎爬虫进入页面获取不到文字内容,现在大多数解决方案是不采用ajax渲染数据,而是采用server端渲染,也就是所谓的SSR。 目前基于vue的方案是Nuxt.js,同类型的也有React版的Nuxt.js ...
  • 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位的安装包... } } 以上就是vue phantomjs seo 优化全部内容
  • (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩。三大框架 Angular、Vue、React,可谓妇孺皆知。随着单页面应用的普及,人们在感受...

空空如也

空空如也

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

vue单页面seo优化

vue 订阅