V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
justrand
V2EX  ›  Vue.js

vue 做的页面大家是如何做 SEO 的,是服务器端渲染吗?

  •  
  •   justrand · 2019-08-12 15:55:51 +08:00 · 8886 次点击
    这是一个创建于 1691 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大家有好的方式分享不?

    第 1 条附言  ·  2019-08-13 14:46:51 +08:00
    感谢各位的解答
    38 条回复    2019-08-28 14:24:28 +08:00
    id4alex
        1
    id4alex  
       2019-08-12 16:45:37 +08:00
    看看 nuxt.js 果断实践给大家汇报下 seo 效果和性能咋样啊
    15651980765
        2
    15651980765  
       2019-08-12 16:48:45 +08:00
    mark 一下,等大佬解答。
    Carseason
        3
    Carseason  
       2019-08-12 16:49:44 +08:00 via iPhone
    前端渲染就别想 seo 了
    老老实实的
    zhangpeng2k
        4
    zhangpeng2k  
       2019-08-12 17:07:28 +08:00
    了解一下前端预渲染,可以对部分页面使用预渲染
    使用 prerender-spa-plugin 插件
    原理是编译的时候是使用无头浏览器对你的这个页面进行爬取,保存为纯静态 html 后,修改你的路由,让你在访问的时候直接访问静态 html

    一般只适用于首页,关于我们,等等一些数据不会变动的页面

    我自己没玩过...这周打算试试
    binaryify
        5
    binaryify  
       2019-08-12 17:10:04 +08:00
    nuxt.js
    luzemin
        6
    luzemin  
       2019-08-12 17:12:05 +08:00
    nuxt.js
    rankrank
        7
    rankrank  
       2019-08-12 17:27:03 +08:00
    nuxt.js +1
    hackyuan
        8
    hackyuan  
       2019-08-12 17:39:56 +08:00 via iPhone
    jq 单独写一套给爬虫玩去
    fuckshit
        9
    fuckshit  
       2019-08-12 17:51:11 +08:00
    nuxt.js+1 其实我也是最近刚刚听说的 nuxt.js 觉得挺有意思的, 然后我就将我的小站修改成使用 nuxt.js 渲染了,效果挺好的。 欢迎围观 https://mlog.club
    fuckshit
        10
    fuckshit  
       2019-08-12 17:51:49 +08:00
    nuxt.js+1 其实我也是最近刚刚听说的 nuxt.js 觉得挺有意思的, 然后我就将我的小站修改成使用 nuxt.js 渲染了,效果挺好的。 欢迎围观 [https://mlog.club]( https://mlog.club)
    yhxx
        11
    yhxx  
       2019-08-12 18:50:46 +08:00
    正常公司真的有那么多 SEO 需求吗?
    如果真的有的话,我觉得和搜索引擎“合作”比折腾 SSR 成本要低的多
    weize888
        12
    weize888  
       2019-08-12 20:16:40 +08:00 via Android
    HTML+1
    ChefIsAwesome
        13
    ChefIsAwesome  
       2019-08-12 20:36:04 +08:00 via Android   ❤️ 1
    其实很简单。根据 ua 判断是爬虫的话,就走谷歌新出的 headless chrome 渲染 HTML 给他,否则就正常显示。几行代码就搞定的事情。可以看看谷歌新出的 SEO 专题学习下。
    id4alex
        14
    id4alex  
       2019-08-12 21:50:56 +08:00
    说根据 ua 判断是否是爬虫的, 恐怕你们不知道搜索引擎也为悄悄的用非常规爬虫 ip 伪装成正常 ua 去访问你的网站去检查你是否有可以在欺骗搜索引擎。

    在早期这是一种作弊思路, 即页面对搜索引擎是一种内容(获取好的排名),对用户是另外一种页面(通常是广告引流) 后来搜索引擎都会定期以正常用户的视角去观察页面,判断是否有作弊的嫌疑。

    总的说来,就是前端框架开发的页面,你需要把所有默认权限能看到的页面全部配置成服务器端的渲染,我看到一些案例已经这样做了, 但是并发数稍微高一点容易 http 500, 所以还需要大家更多的实践来支撑前端框架 seo
    louieliu
        15
    louieliu  
       2019-08-12 23:35:23 +08:00 via iPhone
    用性能工具看看 比如 lighthouse Chrome DevTools 已经内置了 可以看看他给你的建议,一步步来 首屏懒加载啊 上 cdn 啊 骨架屏啊 去掉无用的文件啊什么的
    louieliu
        16
    louieliu  
       2019-08-12 23:36:06 +08:00 via iPhone
    卧槽 回错了
    westoy
        17
    westoy  
       2019-08-12 23:39:30 +08:00
    @yhxx

    google 当年给单页 SEO 搞过一个根据 hash fragment 转_escaped_fragment_参数做查询的标准, 照着做的都被挖坑给埋了, 接着 google 就把这个标准给 deprecated 了........
    fengxianqi
        18
    fengxianqi  
       2019-08-13 00:03:46 +08:00
    最近刚好写了篇文章,还没用上 Nuxt.js 的同学可以看下,取了个不哗众取宠的标题:[Nuxt.js 实战和配置]( https://juejin.im/post/5d41a114e51d4561f40adcf1)
    dusu
        19
    dusu  
       2019-08-13 02:12:14 +08:00 via iPhone
    @id4alex 同意,补充一点,搜索引擎还和运营商合作,例如哪些页面带 referrer 被请求频率高,会优先抓这些页面,而 SPA 根本就不会走这些请求,单纯说根据 UA 做两套方案根本就是在骗自己。
    ddup
        20
    ddup  
       2019-08-13 08:04:43 +08:00 via Android
    服务端渲染 ssr
    duan602728596
        21
    duan602728596  
       2019-08-13 08:04:53 +08:00 via iPhone
    react ssr 和 vue ssr 原理差不多。改造的办法就是新增加一套 webpack 配置,编译另外一个入口文件,编译出来的文件作为 node 模块,每次请求时就会执行他并返回 html。
    askfilm
        22
    askfilm  
       2019-08-13 08:54:04 +08:00
    @justrand 在意 seo , 还搞什么 spa , 人是活的(看起来高级的不一定是合适的), 折腾 seo 的时间,能干很多事了
    wxp410351193
        23
    wxp410351193  
       2019-08-13 09:16:40 +08:00
    现在 seo 都这么高级了吗。。
    fumichael
        24
    fumichael  
       2019-08-13 09:17:03 +08:00
    @yhxx #11 有些老板都不知道听谁说的
    做的内部管理系统,他也问,SEO 能做吗,虾鸡霸来的
    跟搜索引擎建立『合作关系』+1
    gaigechunfeng
        25
    gaigechunfeng  
       2019-08-13 09:38:27 +08:00
    @fuckshit 老铁的 bbs 是用的什么框架啊?
    lblblong
        26
    lblblong  
       2019-08-13 09:39:03 +08:00
    不想自己折腾的话就上 nuxt.js ,我的小站 www.pianduan.fun 就是用的 nuxt
    id4alex
        27
    id4alex  
       2019-08-13 10:45:27 +08:00
    @lblblong 老哥压力测试过没啊? 感觉咋样啊
    SilentDepth
        28
    SilentDepth  
       2019-08-13 13:55:36 +08:00
    Nuxt 是个好东西。

    除此之外,好好利用 meta 元素,Google 等搜索引擎就差不多了。它们的思路很简单:爬虫可读取,页面有内容,没测出作弊,排名就不低。更进一步的,访问性能、a10y,能做就做,有助于提升排名。楼上提到的 Lighthouse 可以用。

    至于国内,不得不给「商业合作」加个 1 …… = =
    ShareManT
        29
    ShareManT  
       2019-08-13 14:22:33 +08:00
    Nuxt 刚重写了一次个人网站
    后端 PHP Laravel
    前端 Nuxt.js
    https://share-man.com/
    lblblong
        30
    lblblong  
       2019-08-13 17:05:53 +08:00
    @id4alex
    没做过压测,零散的访问还是顶的住的
    nuxt 用起来就是编译的时候,服务器内存一下就满了,现在都不在服务器编译了,放本地编译了再提交上去
    fuckshit
        31
    fuckshit  
       2019-08-13 18:28:28 +08:00
    @gaigechunfeng 老铁, 我的 bbs 是用 go 语言自己写的,源码放到 github 上了, 开源的,欢迎围观。
    fuckshit
        32
    fuckshit  
       2019-08-13 18:42:30 +08:00
    @ShareManT 看了你的网站,做的挺好的啊。 我的网站也是用 nuxt.js 渲染的 https://mlog.club

    你的网站中“日迹”功能的数据是从哪儿来的啊?
    ShareManT
        33
    ShareManT  
       2019-08-13 22:24:30 +08:00   ❤️ 1
    @fuckshit
    感谢鼓励!“日迹”是我正在开发一个产品,数据由多种方式(记录、软件 API、穿戴设备)获取。
    gaigechunfeng
        34
    gaigechunfeng  
       2019-08-14 09:51:02 +08:00
    @fuckshit 老铁,你的 github 地址贴一下,我 start 一下 :D
    fuckshit
        35
    fuckshit  
       2019-08-14 09:53:14 +08:00
    @gaigechunfeng 老铁,Github 地址在这里: https://github.com/mlogclub/mlog 欢迎老铁 star。
    fuckshit
        36
    fuckshit  
       2019-08-14 09:54:11 +08:00
    @ShareManT 厉害了老铁,持续关注中哈。
    ShareManT
        37
    ShareManT  
       2019-08-14 10:57:34 +08:00
    @fuckshit 好的!
    MikeFeng
        38
    MikeFeng  
       2019-08-28 14:24:28 +08:00
    用过 nuxt.js 的表示,高并发情况下,页面中有多个 for 循环渲染,for 循环的数据变动频繁,无法做组件缓存的,这种页面 CPU 资源占用非常高。没有高并发的项目可以用用,如果对并发有高要求,还是自己乖乖写好模板找后台去吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5427 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 54ms · UTC 08:52 · PVG 16:52 · LAX 01:52 · JFK 04:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.