精华内容
下载资源
问答
  • 最近在做一个商城官网,需要优化网站排名,公司要求做seo,项目架构用的vue SSR服务端渲染,由于vue是但页面应用,所以主要通过路由跳转动态切换title和meta里内容来实现。 项目搭建就不多说了,主要是在...

    最近在做一个商城官网,需要优化网站排名,公司要求做seo,项目架构用的vue SSR服务端渲染,由于vue是单页面应用,所以主要通过对路由的跳转动态切换title和meta里的内容来实现。

    项目搭建就不多说了,主要是在gitHub上面下载的一个模版,后期会整理好再发一篇文章。

    一、首先router.js给每个页面组件加上meta属性,然后meta属性里边定义一个title和index(因为tdk数据是后台请求到的数据,index是传给后台的参数,tdk的type :0.通用 1.首页 2.名人堂首页 3.文章首页 4.问答首页 5.领券中心 6.新人专享 7.选画中心页 8.名家子网)

     export function createRouter() {
        return new Router({
            mode: 'history',
            fallback: false,
            scrollBehavior: () => ({ y: 0 }),
            routes: [
                { path: '/', component: Home, meta: { title: '', index: 1 } },
                { path: '/login', component: Login, meta: { title: '' } },
                { path: '/register', component: Register, meta: { title: '' } },
                { path: '/setPassword', component: setPassword, meta: { title: '' } },
                { path: '/forgetPassword', component: forgetPassword, meta: { title: '' } },
                { path: '/resetPassword', component: resetPassword, meta: { title: '' } },
                { path: '/goods-:goods_id.html', component: Goods, meta: { title: '' } },
                { path: '/all', component: All, meta: { title: '' } },
                { path: '/shopCar', component: shopCar, meta: { title: '' } },
                { path: '/allfamous', component: Famous, meta: { title: '' } },
                { path: '/famouscompilations', component: famousCompilations, meta: { title: '', index: 2 } },
                { path: '/famousdetails', component: famousDetails, meta: { title: '' } },
                { path: '/xuanhua', component: xuanHua, meta: { title: '', index: 7 } },
                { path: '/huaniao', component: huaNiao, meta: { title: '' } },
                { path: '/renwu', component: renWu, meta: { title: '' } },
                { path: '/shanshui', component: shanShui, meta: { title: '' } },
                { path: '/shufa', component: shuFa, meta: { title: '' } },
                { path: '/dongwu', component: dongWu, meta: { title: '' } },
                { path: '/search', component: search, meta: { title: '' } },
                { path: '/article/', component: articleIndex, meta: { title: '', index: 3 } },
                { path: '/article_details', component: articleDetails, meta: { title: '' } },
                { path: '/question/', component: questionIndex, meta: { title: '', index: 4 } },
                { path: '/question_details', component: questionDetails, meta: { title: '' } },
                { path: '/ticketCenter', component: ticketCenter, meta: { title: '' } },
                { path: '/newUser', component: newUser, meta: { title: '' } },
                { path: '/userCenter', component: userCenter, meta: { title: '' } },
                { path: '/accountBalance', component: accountBalance, meta: { title: '' } },
                { path: '/recharge', component: recharge, meta: { title: '' } },
                { path: '/submitOrder', component: submitOrder, meta: { title: '' } },
                { path: '/address', component: adddressList, meta: { title: '' } },
                { path: '/orderPay', component: orderPay, meta: { title: '' } },
            ]
        })
    

    二、app.js里边定义函数请求数据调用函数动态改变title,meta里边name属性的keywords和description(请求用的axios,没有安装的需要npm install axios安装一下,若已安装淘宝镜像,可以cnpm install axios)

    if (process.browser) {//(因为项目是用vue SSR服务端渲染方式实现,服务端访问不到window对象,所以判断process.browser是在客户端)
            let head = document.getElementsByTagName('head'); // 创建head标签
            let meta1 = document.createElement('meta'); // 创建meta标签
            let meta2 = document.createElement('meta');
            meta1.name = "keywords"; // 设置name
            meta2.name = "description";
            //获取其他页的tdk
            function getMetaContent(index, h, m1, m2) {
                var params = {
                    "Tdk": {
                        "type": index
                    }
                }
                axios.post('这里换成后台给的接口', params)
                    .then(function(res) {
                        let key = res.data.Tdk.tdk_keywords;
                        let desc = res.data.Tdk.tdk_description;
                        let title = res.data.Tdk.tdk_title;;
                        document.title = title || '设置默认内容';
                        m1.content = key || '设置默认内容';
                        m2.content = desc || '设置默认内容';
                        h[0].appendChild(m1)
                        h[0].appendChild(m2)
                    })
            }
    (商品页后台单独给的数据,数据是通过apiJson请求到的,参数需要自己修改,通过传商品的id请求到不同商品的tdk然后下边调用动态切换商品的title和meta里的name属性)
            //获取商品页的tdk
            function getGoodsMetaContent(index, h, m1, m2) {
                var params = {
                    Goods: {
                        id: index,
                        "GoodsImgs[]": {
                            count: 0,
                            GoodsImgs: {
                                "goods_id@": "Goods/id",
                                use_flag: 1,
                                "@order": "rank-"
                            }
                        },
                        Artist: {
                            "id@": "Goods/artist_id"
                        }
                    }
                };
                axios.post('这里改成后台给的接口', params)
                    .then(function(res) {
                        let key = res.data.Goods.tdk_keywords;
                        let desc = res.data.Goods.tdk_description;
                        let title = res.data.Goods.tdk_title;;
                        document.title = title || '设置默认内容';
                        m1.content = key || '设置默认内容';
                        m2.content = desc || '设置默认内容';
                        h[0].appendChild(m1)
                        h[0].appendChild(m2)
                    })
            }
    		
    		//路由跳转之前动态切换title和meta的name属性
            router.beforeEach((to, from, next) => {
                var i;
                //如果有商品id,说明跳入的是商品页,参数为商品id,如果没有则参数为router里定义好的meta里的index
                if (to.params.goods_id) {
                    i = to.params.goods_id;
                } else if (from.meta.index || to.meta.index) {
                    i = to.meta.index;
                    var j = from.meta.index;
                } else {
                    next();
                }
                if (i == j) return // 减少请求次数
                if (meta1.name == "keywords" || meta2.name == "description") { // 如果之前有获取过关键字,先清空内容
                    meta1.content = '';
                    meta2.content = '';
                }
                //如果跳入商品页执行getGoodsMetaContent,否则执行getMetaContent
                if (to.params.goods_id) {
                    var i = to.params.goods_id;
                    getGoodsMetaContent(i, head, meta1, meta2)
                } else {
    
                    getMetaContent(i, head, meta1, meta2);
                }
                next()
            })
        }
    

    这样就可以动态改变title和meta的name的属性了。如果想学习一下怎么搭建vue SSR服务端渲染,请看我下一篇文章。

    展开全文
  • 学会对VUE的SEO优化,你网站总是排在前面

    千次阅读 多人点赞 2020-04-08 21:35:49
    是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。 说白了就是你的SEO做...

    ​在开始之前,我们先来了解一下什么是SEO。

    SEO(Search Engine Optimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。

    说白了就是你的SEO做的越好,当别人搜索某个关键词时,你的网站在搜索结果中就排的越靠前。这是我的网站,有时排在第一,有时第二。

     我的网站: www.dzyong.top

     公众号: 《前端筱园》

    普通的一个前端网站可以通过哪些地方来做优化呢?

    1.合理的title、description、keywords

    <title>邓占勇的博客</title>
    <meta name="description" content='邓占勇,一名前端工程师,这是我的个人博客,主要分享前端但不限于前端技术。公众号《前端校园》'>
    <meta name="keywords" content="个人博客,邓占勇,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,邓占勇的博客">
    <meta name="anthor" content="邓占勇,2657179843@qq.com">
    <meta name="robots" content="博客,前端,blog,个人博客,邓占勇,Yong,邓占勇的博客,《前端校园》,公众号,web,VUE">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    title,description,keywords他们的权重逐渐减小。

    • title 就是我们看到的网页标题
    • description 为对该网页的简要描述
    • keywords 的作用就是告诉搜索引擎,本网页中主要围绕着哪些方面的关键词展开

    2.语义化的HTML代码,符合W3C规范

    多使用语义化的HTML标签,什么叫语义化标签,说白了就是对号入座,不要什么地方都永远是div,span。HTML5中提供了很多语义化的标签,比如<header></header>,<footer></footer>,<nav></nav>,<aside></aside>,<section></section>等

    3.非装饰性图片必须加alt

    <img> 标签的 alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。对于非装饰性图片必须添加alt,非装饰性图片是指除了那些作为元素背景图的图片。

    alt可以增强内容相关性,提高关键词密度

    4友情链接

    友链就是在你的网站和别人的网站上相互放上对方的网站超链接,通过点击链接可以调到对方的网站上。 友情链接是网站流量来源的根本,比如一种可以自动交换链接的友情链接网站(每来访一个IP,就会自动排到第一),这是一种创新的自助式友情链接互联网模式。

    5.外链

    外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量(即导入链接所在页面的权重)间接影响了我们的网站在搜索引擎中的权重。

    6.向各大搜索引擎提交收录自己的站点

    搜索引擎收录了你的网站后,会很大程度上提升网站的排名。下面是常见搜索引擎的收录入口:

    百度提交入口:https://ziyuan.baidu.com/linksubmit/url

    Google提交入口:http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

    360提交入口:http://info.so.360.cn/site_submit.html

    搜狗提交入口:http://fankui.help.sogou.com/index.php/web/web/index?type=1

    必应提交入口:https://www.bing.com/toolbox/webmaster

    7.重要的内容放在前面

    搜索引擎抓取是自上而下进行的,把主要的关键性的内容放在前面,可以保证所抓取的内容更符合或代表网站的特征。

    8.其他

    • 少用iframe:iframe中的内容是不会被抓取到的
    • 提高网站速度:这也是搜索引擎排序的一个重要指标
    • 流量:访问你的网站的人越多,排名也会越靠前

     

    如何对VUE进行SEO优化?

    说了这么多SEO的优化方式,为什么还要把VUE的SEO优化提出来说呢。

    这与VUE的本质相关,VUE是一个SPA应用,就是只有一个Web页面的应用,是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序。

    为什么说VUE不利于SEO,SEO本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说,如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,而搜索引擎请求到的html是没有渲染数据的, 所以就很不利于内容被搜索引擎搜索到。 

    现在主要采用的有以下四种方式:

    • SSR服务器渲染;
    • 静态化;
    • 预渲染prerender-spa-plugin;
    • 使用Phantomjs针对爬虫做处理。

    1. SSR服务器渲染

    服务端渲染就是尽量在服务器发送到浏览器前就将页面渲染到页面上。

    Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

    服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用",因为应用程序的大部分代码都可以在服务器和客户端上运行。

    详细操作可以见官网:https://ssr.vuejs.org/zh/

    2. 静态化

    这里用到的是Nuxt.js框架,官方是这样介绍的。从头搭建一个服务端渲染的应用是相当复杂的。幸运的是,我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架,为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是,你甚至可以用它来做为静态站生成器。推荐尝试。

    详细操作可以见官网:https://zh.nuxtjs.org/

    3. 预渲染prerender-spa-plugin

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

    这里就详细的讲解下如何在VUE-CLI3的项目中使用prerender-spa-plugin。

    安装

    cnpm install prerender-spa-plugin --save

    在VUE-CLI3的项目中调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象。

    官方文档:https://cli.vuejs.org/zh/guide/webpack.html

    // vue.config.js
    module.exports = {
      configureWebpack: {
        plugins: [
          new MyAwesomeWebpackPlugin()
        ]
      }
    }

    如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象:

    // vue.config.js
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
        } else {
          // 为开发环境修改配置...
        }
      }
    }

    有了基础知识就来开始实践

    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    const path = require('path')
    module.exports = {
        configureWebpack: config => {
            if (process.env.NODE_ENV !== 'production') return;
            return {
                plugins: [
                    new PrerenderSPAPlugin({
                       //网页包的路径将应用程序输出到prerender
                        staticDir: path.join(__dirname,'dist'),
                        //Routes to render 对应自己router
                        routes: ['/', '/home','/blog','/aboutMe','/message'],
                        renderer: new Renderer({
                            inject: {
                                foo: 'bar'
                            },
                            //渲染时显示浏览器窗口。对调试有用。
                            headless: false,
                            // // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
                            renderAfterDocumentEvent: 'render-event'
                        })
                    }),
                ],
            };
        }
    }

    在main.js中添加如下内容

    new Vue({
      router,
      store,
      render: h => h(App),
      //这里与vue.config.js中的事件名相对应
      mounted () {
        document.dispatchEvent(new Event('render-event'))
      }
    }).$mount('#app')

    最后有点一定要注意,router中必须是history模式。

    好了,到这里就已经配置完了,只需要和传统的打包方式一样打包就可以,打包的过程中会看到浏览器自动打开许多页面然后自动关闭,这就是打包的过程。

    npm run build

    打开打包后的dist文件夹,会看到如传统的结构不一样,传统的只有以下内容

    但是现在你看到的会比之前多几个文件夹,多的文件夹正是你配置的那几个路由,每个文件夹中都是一个index.html文件。原本只有一个index.html的单页应用现在变成了多页应用,这也就提升了你的网页被抓取的概率。

    在本地打开打包后的index.html是看不到内容的,需要上传到服务器上才可以。

    到这里我们还可以继续优化,虽然现在已经成了多个页面,但是每个页面的title,description,keywords都是一样的,这也往往不符合实际,毕竟每个页面都有自己的主题内容。

    那么我们可以针对每个页面对他们的meta-info分别设置,这里可以使用vue-meta-info插件。

    安装:

    npm install vue-meta-info --save

    引用,在main.js中

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

    在你需要的页面中使用

    export default {
      metaInfo:{
        title: 'message',
        meta: [
          {
            name: 'description',
            content: '这是Message页面',
          },
          {
            name: 'keywords',
            content: 'message'
          }
        ]
      },
      data(){
        return {
        }
      },
    }

    可以看到页面的head的关键信息已经更改

    当然你也可以写成函数的形式来动态修改

    export default {
      metaInfo() {
        return {
          title: this.title,
          meta: [
            {
              name: "关键词",
              content: "关键字"
            }
          ]
        };
      },
      data() {
        return {
          title: "我是动态更新的标题"
        };
      },
    };
    
    
     

    4.使用Phantomjs针对爬虫做处理

    Phantomjs是一个基于webkit内核的无头浏览器,即没有UI界面,即它就是一个浏览器,只是其内的点击、翻页等人为相关操作需要程序设计实现。

    这个我也还没有去接触,等后面我去看懂了有机会再来讲讲。

    源码在这里:https://github.com/lengziyu/vue-seo-phantomjs

     

    展开全文
  • vue做seo优化

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

    前言

    • 先了解什么是seo?
    • 再了解搜索引擎蜘蛛的工作原理?
    • seo为啥对vue单页面不友好?
    • vue项目怎么做seo优化?
    • prerender-spa-plugin怎么使用,以及它的工作原理

    什么是seo?

    SEO是由英文Search Engine
    Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过对网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站的网站关键词排名以及公司产品的曝光度。通过搜索引擎查找信息是当今网民们寻找网上信息和资源的主要手段。

    引擎蜘蛛的工作原理?

    详情查看蜘蛛的工作原理;不够详细的话自己百度一下
    搜索引擎蜘蛛的爬行是被输入了一定的规则的,它需要遵从一些命令或文件的内容。
    网络爬虫在爬取网页内容的时候,需要分析页面内容,主要有以下几点:

    • 从 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渲染机制很快我们仍然能够看到一段时间的白屏情况,用户体验不好
    引起的问题
    1. 收录的页面少了->被抓取的页面就少了->点击量之类的也就少了;

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


    怎么解决那?

    html就不能通过js生成,我们需要在加载js之前做一下页面的预渲染,目前了解到的有两种方法,vue的ssr渲染(配置参考)和prerender-spa-plugin插件实现(配置参考)。SSR比较复杂,所以选了prerender-spa-plugin来尝试。

    prerender-spa-plugin的使用

    See 配置参考.
    本次只介绍vue-cli3的解决方案

    使用 webpack + prerender-spa-plugin + vue-meta-info轻松地添加预渲染

    npm install prerender-spa-plugin --save
    

    vue.config.js

    const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    // eslint-disable-next-line no-unused-vars
    const webpack = require('webpack')
    const path = require('path')
    
    module.exports = {
      configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return
        return {
          plugins: [
            new PrerenderSPAPlugin({
              // 生成文件的路径,也可以与webpakc打包的一致。
              // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
              staticDir: path.join(__dirname, 'dist'),
              // outputDir: path.join(__dirname, './'),
              // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
              routes: ['/testData',  '/contact'],
              // 这个很重要,如果没有配置这段,也不会进行预编译
              renderer: new Renderer({
                  inject: { //默认挂在window.__PRERENDER_INJECTED对象上,可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
                  foo: 'bar'
                },
                headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染,此处我理解为是Puppeteer获取页面的时机
              })
            })
          ]
        }
      },
    }
    
    • staticDir 指的是预渲染输出的页面地址,
    • routes 指的是需要预渲染的路由地址,
    • renderer 则是所采用的渲染引擎是什么,目前用的是 V3.4.0 版本支持 PuppeteerRenderer。
    • inject 则是预渲染过程中都能拿到的值,该值提供给你了机会,让你觉得是否渲染这部分代码。例如下面的代码,是不会被预渲染进 HTML 中的。
    showMessage(){
          if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return;
          this.message = '我是测试预加载拦截';
        }
    
    • renderAfterDocumentEvent 这个则很关键,这个是监听 document.dispatchEvent 事件,决定什么时候开始预渲染

    main.js

    new Vue({
      router,
      store,
      render: h => h(App),
    //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致
      mounted () {
        document.dispatchEvent(new Event('render-event'))
      }
    }).$mount('#app')
    
    然后就是npm run build打包
    1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面,所以一定要history
    2.打包之后上传到服务器才可以看到效果,或者本地自己创建一个服务

    这样dist的文件夹目录结构就会变成如下的样子

    image.png

    就是打包之后,每个路由都会打包成一个文件夹,都有一个对应的静态 HTML;

    每一个 HTML 内除了

    <div id="app"></div>
    

    这个 Vue 的挂载元素外,还有静态的标签内容。

       <body>
          <div id="app">
            <div data-v-fa8a7bc4="" class="app-wrapper openSidebar">
              <section data-v-2c0baa24="" data-v-fa8a7bc4="">
                <div data-v-2c0baa24="">
                  <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span class="el-breadcrumb__item"><span
                        role="link" class="el-breadcrumb__inner is-link">首页</span><span role="presentation"
                        class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
                        class="el-breadcrumb__inner">活动管理</span><span role="presentation"
                        class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link"
                        class="el-breadcrumb__inner">活动列表</span><span role="presentation"
                        class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"
                      aria-current="page"><span role="link" class="el-breadcrumb__inner">活动详情</span><span role="presentation"
                        class="el-breadcrumb__separator">/</span></span></div>
                </div>
              </section>
            </div>
          </div>
          <script src="config/config.js"></script>
          <script src="/static/js/chunk-vendors.cb183907.js"></script>
          <script src="/static/js/app.83e704ba.js"></script>
        </body>
    
    遇到的问题

    1.本地起服务测试,会发现能正常运行,但是做了优化的页面刷新之后会没有样式
    造成问题的原因就是打包的时候vue.config.js的资源路径配置不对
    没有优化之前的路径是

      // 资源路径
      publicPath: './',
    

    打包之后路由下面的资源路径是这样的
    image.png

    解决办法

    优化之后的路径是

      // 资源路径
      publicPath: '/',
    

    打包之后的路由下面的资源路径是这样的
    image.png

    就是路径前面多了一个/,采用了绝对路径

    这个时候需要一个服务来测试

    1.全局安装node.js

    2.安装成功后,执行npm install anywhere -g 安装anywhere

    3.在对应路径下打开cmd,执行anywhere指令。如图:
    image.png
    然后就可以在浏览器输入地址访了,可以看到每个路由对应的 HTML

    prerender-spa-plugin 是如何做到将运行时的 html 打包到文件中的呢?

    • prerender-spa-plugin插件的工作流程图:
      image.png
    • prerender-spa-plugin 利用了 Puppeteer[4] 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大,所以很简单就能将运行时的 HTML 打包到文件中。
    • 原理是在 Webpack 构建阶段的最后,在本地启动一个 Puppeteer 的服务,访问配置了预渲染的路由,然后将 Puppeteer 中渲染的页面输出到 HTML 文件中,并建立路由对应的目录。
    • 每个路由对应的 HTML,然后我们可以更改每个路由文件里的 title 、 meta keyword等 。
    • 另外页面的内容都已经在 HTML 中直接呈现,也可以解决 js 等资源加载慢导致白屏的问题。
    prerender-spa-plugin 的确在一定程度上解决了我们对于 SEO 的诉求和页面加载慢的问题。但是它的缺点还是很明显的。
    • 不同的用户看到不同的页面,动态数据页面(预渲染在获取用户权限数据之前就进行渲染了,所有他不能做到这个)
    • 动态路由也不可以(webpack编译的时候 路由还没挂载那)
    • 经常发生变化的页面,数据实时性展示(比如体育比赛等 我们现在的方式是前端拿到组件后进行组装数据,然后在进行渲染 像这种实时数据的会不准确)
    • 路由过多,构建时间过长
    然后就是为这些打包的静态页面分配title和meta标签,需要用到 vue-meta-info
    安装
    npm install vue-meta-info --save
    

    main.js里面引入vue-meta-info

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

    这样在组件页面中就可以使用了
    假设你要给contact.vue添加title,meta标签

    contact.vue

    <template>
    ...
    </template>
    
    <script>
    export default {
      metaInfo: {
        title: '我是contact头', // set a title
        meta: [{             // set meta
          name: 'keyWords',
          content: '我是contact关键字'
        },
        {
          name: 'description',
          content: '我是contact描述'
        }],
        link: [{ // set link
          rel: 'asstes',
          href: 'https://assets-cdn.github.com/'
        }]
      }
    }
    </script> 
    

    这样再结合prerender-spa-plugin,打包之后,在dist文件夹找到contact文件夹下的index.html
    打开你会发现就有title和meta的关键字和描述标签了

    本地起服务或者发布到线上运行项目,在页面右键—查看源代码—就可以看到页面的title和meta标签了。

    展开全文
  • 由于vue是通过js来渲染html内容,但是搜索引擎对js并不友好,搜索引擎并不会自动像浏览器那样帮我们抓取网站真正内容。 因此,我们就需要像传统php、ssh或.net网站那样,需要一个服务端渲染网站。 vue做...

    由于vue是通过js来渲染html的内容的,但是搜索引擎对js并不友好,搜索引擎并不会自动像浏览器那样帮我们抓取网站的真正内容。

    因此,我们就需要像传统的php、ssh或.net网站那样,需要一个服务端渲染的网站。

    vue做seo优化的终极解决方案,也是服务端渲染。我们可以使用vue的服务端渲染框架来开发网站,然后发布成服务端渲染的网站就行了。

    vue的服务端渲染框架,最多人用的框架应该是minissr。我们可以到这去获取:

    https://www.wechatmini.com/vue/minissrdetail

    这个框架使用起来非常简单,获取到它的代码后,通过一个命令就可以部署测试了:

    npm install
    npm run ssr

    在这个框架上开发也跟普通的vue开发没什么区别,都是使用vue+vuex模式的开发。

    我们通过127.0.0.1:3004就可以看到效果:

     

    打开源代码看效果:

     

    它已经帮我们配置好所有的东西,包括路由等等。

    我们seo选要的多页面、title、keywords和html内容,这些全部都是服务端渲染输出,完美!

    展开全文
  • 再了解搜索引擎蜘蛛工作原理?seo为啥对vue单页面不友好?vue项目怎么做seo优化?prerender-spa-plugin怎么使用,prerender-spa-plugin原理探究prerender-spa-plugin不能解决问题静态页面分配title和meta标签----...
  • 通常,在网站搜索引擎优化的过程中,很多站长和SEOer经常忽略图片的优化,但事实上,每个网站都有很多图片,所以优化网站图片就像优化其他内容一样,成为搜索引擎优化的一个重要工作内容。如果你能成功地优化图片的...
  • 需要做 SEO(搜索引擎优化),但客户端渲染 html 中几乎没有可用信息 需要首屏快速加载,但客户端渲染一般是长时间加载动画或者白屏 如果能把客户端渲染组件化技术(React、Vue 等)与传统后端渲染...
  • Webpack打包vue项目优化一、路由异步加载Vue项目页面是使用虚拟路由,页面内容是靠vue-router配置路由链接来访问,SPA单页面应用开发,适合开发后台系统,但是对搜索引擎不友好,因为最后只生成一个页面。...
  • vue SEO解决方案

    千次阅读 2021-02-15 10:20:28
    搜索引擎的原理 搜索引擎,又称爬虫或者蜘蛛,它在爬取和分析页面内容时,主要进行如下操作: 从 meta 标签中读取 keywords、description 的内容 根据语义化的html标签爬取和分析内容(h1-h6、strong、em等标签具有...
  • 1、虽然单页面应用有优点,但是,如果后端不做服务器渲染(https://ssr.vuejs.org/),基于vue实现单页面应用是不能爬取到数据,而且SEO(搜索引擎优化)不友好。  可通过审查元素Sources来查看vue实...
  • 前段时间了解到页面有几种渲染方式:SPA SSR,以前写一个网站但是用渲染方式是 SPA,导致搜索引擎爬虫抓不到任何信息, SEO 优化不很好,本想改成 SSR,但是改动配置很多,弄来弄去怕影响开发,今天在 Vue ...
  • 最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 ...
  • 前后端分离之SEO优化--------以vue为例

    万次阅读 2018-02-27 15:34:45
    前言----SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”。SEO是指通过网站进行站内优化和修复(网站Web结构调整、网站内容建设、网站代码优化和编码等)和站外优化,从而提高网站...
  • vue的index.html总结

    千次阅读 2018-10-08 17:01:08
    多页面应用是在每次页面跳转时候,后台服务器都重新生成一张html页面,首屏时间快(只需要加载一次html),搜索引擎优化效果好(html内容都在),但是切换慢(每次页面切换都需要发出一次http请...
  • VuePress 快速踩坑小结

    2020-12-12 12:49:31
    最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 ...
  • 一、什么是SEO?...总结:seo是网站为了提高自已的网站排名,获得更多的流量(不做seo优化,那你的网站在搜索引擎的结果内容就靠后排名,导致很少人访问),网站的结构及内容进行调整优化,以便搜索引...
  • 实现vue服务端渲染

    2019-09-22 08:21:15
    2.SEO(搜索引擎优化)更友好 2.实现一个简单服务端渲染 首先,使用vue cli3创建一个vue工程 (vue create ssr) 然后安装相关依赖 vue-server-renderer(渲染器) express(node服务器) npm i vue-server-...
  • Vue.js 学习笔记

    2018-11-06 22:02:09
    但是Vue编写的程序不会得到搜索引擎的搜索,所以vue在编写完成后还得做SEO优化。 常用语法 如何使用 vue作为独立的js文件在html文件中引入即可使用。可在bootcdn中搜索或者直接保存在离线文件。 数据绑定 vue与html...
  • 1、虽然单页面应用有优点,但是,如果后端不做服务器渲染(https://ssr.vuejs.org/),基于vue实现单页面应用是不能爬取到数据,而且SEO(搜索引擎优化)不友好。  可通过审查元素Sources来查看vue实...
  • nuxt框架因为考虑到seo(搜索引擎优化),国内多数搜索引擎蜘蛛是无法爬取到ajax获取内容。现在流行SPA单页面应用都是采用前后端分离形式开发,基本采用ajax请求方式去做数据交互,seo很不友好。因此需要...
  • 如果是 PC 端的站点,需要考虑是否需要强支持 SEO,前后端分离的架构,很可能需要搜索引擎的 spider 执行完 js 才能得到完整的可收录的页面,而“执行 js ”并不是所有搜索引擎都支持的,此时势必影响站点的收录。...
  • 但是,SPA不利于SEO(搜索引擎优化)。让搜索引擎更为信任该网站,通过提升排名获得更多网站流量,对于某些类型网站是非常有必要。目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用...
  • 现有vue-cli项目做SEO迁移到nuxt.js下 1 . 简单描述一下以下几个概念 1 . SPA : (single page web ... SEO: 搜索引擎优化,指通过网站进行站内优化、修复和站外优化,从而提高网站网站关键词排名以及公司产品
  • SSR指服务端渲染,即页面是通过服务端渲染生成后返回给客户端,SSR主要为了提高页面加载速度,改善用户体验,也可用于SEO搜索引擎优化。 Nuxt.js 官方定义: Nuxt.js 是一个基于 Vue 通用应用框架。 通过...
  • vue-ssr,页面按需加载,权限控制

    千次阅读 2018-08-08 09:34:47
    一、功能介绍中涉及知识 vue SSR学习** SSR:服务器端渲染(同构或者通用) 服务器把每个要展示页面都运行完成后,将运行流... * SEO(搜索引擎优化)更加友好, * 内容到达时间(time-to-content)...
  • 前言本文之前,先简单介绍以下几个概念:×××指服务端渲染,即页面是通过服务端渲染生成后返回给客户端,×××主要为了提高页面加载速度,改善用户体验,也可用于SEO搜索引擎优化。Nuxt.js 官方定义: Nuxt.js ...
  • 如果web应用程序目标是优化搜索引擎,服务器端呈现是一个基本要求。由于任何多页面应用程序都可以由几个较小spa组成,因此框架拥有这个选项是一个重要标准。 以下是AirBnB开发团队服务器端渲染看法: ...
  • nuxt框架因为考虑到seo(搜索引擎优化),国内多数搜索引擎蜘蛛是无法爬取到ajax获取内容。现在流行SPA单页面应用都是采用前后端分离形式开发,基本采用ajax请求方式去做数据交互,seo很不友好。因此需要...
  • 标题和关键词是搜索引擎收录来源,在百度搜索你公司名称时直接显示,因此网站上线同时,要把网站标题、关键词和描述设置好。如何设置网站SEO标题、关键词和描述网站标题设置标题字数一般要控制在30字以内,避免...

空空如也

空空如也

1 2 3
收藏数 52
精华内容 20
关键字:

vue对搜索引擎的优化

vue 订阅