快好知 kuaihz

前端人员必会的SEO与SSR技巧,你学会了吗

  现如今很多前端开发人员常用的是Vue、React这类SPA框架,如果是做管理系统非常方便,可以最大化的突出数据处理方面的优势,当然也有很多小伙伴做的是混合开发,比如uniapp、react native、taro等等,以及目前很火的flutter。

  时至今日,PC端和H5端的门户类网站【资讯类、企业类、商城类】仍然活跃,依然要靠SEO来提升排名,但是现如今已经发展到了以Vue、React、Angular为主流的时代了,我们总不能倒退回JQuery去做开发,所以在现代框架下去做SEO优化就非常有必要了。

  首先,先来介绍一些开发过程中,要注意的一些基本的SEO知识。

  一、HTML标签的使用

  不要什么都用div,尽量合理的使用ul、ol、table等,HTML5的新标准已经推出了很多年了,但是很多小伙伴还是沉醉于HTML4的标签,大家要多尝试譬如 article、main、header、footer、aside这类的语义化标签,逐步的去替换div,这样对SEO有很大的提升。

  二、TDK

  TDK(Title、Description、Keywords),这三项对于一个网站来说是至关重要的,绝不能小觑。大家可以去参考一些较大的资讯网站,很多页面的TDK是不同,每个页面的TDK都和这个页面的内容有一定关系。

  三、图片属性

  

  (1)当图片未成功显示时候,仍可以显示文本,用户可以了解图片主题

  (2)当图片成功显示的时候,鼠标以上图片,可显示图片描述

  (3)可解决网速慢、src引用错误、浏览器禁用图像、用户使用屏幕阅读器等情况

  (4)要定义大小、不然会造成页面重新渲染,影响加载速度

  四、超链接

  内链采用绝对路径,减少服务器的响应时间,

  例如:淘宝网首页

  不要采用

  下面是淘宝页面截取的图片

  五、导航栏的层级数不宜太深

  【效果较差】/article/detail/1892.html

  【效果较好】/article/1892.html

  六、静态

  生成一个纯静态的,不包含数据交互的HTML文件,这样就需要提前在服务端将数据写入到页面中,再展现出来。静态化页面比动态化的JSP、PHP要强很多,这也是大家平时很少能看到官网地址的后缀是jsp、php的原因了。

  但缺点也很明显,我们要将所有的数据都静态化,这个工作量是非常大的,比如我们的网站数据库里有2000篇文章,如果采用动态化,只需要写一个页面,然后在页面中获得id并发起ajax请求,就可以切换不同的文章了。但静态化就得提前生成2000个html文件,用户点击哪个就打开哪个,并且如果用户新增一篇文章,那么服务器就得再去生成一个新页面。

  七、伪静态

  前面说了静态化虽好,可不能贪杯,对于数据量庞大的现代网站来说,我们没办法去真的生成几千个页面,这维护成本是极高的。那么现如今的大网站都是怎么解决这个问题的呢?答案就是伪静态化,也就是看起来像是一个静态页面,本质仍然是一个动态页面,很多后端程序员应该都做过类似处理,也就是把.jsp或.php的后缀改成.html,同时在地址栏上不要再写参数,类似:?id=1这样。但是仅仅把后缀改成.html是不够的,同时要需要在查看网页源代码时能看到网站的数据内容。

  如何实现伪静态

  那么对于我们广大的前端开发者来说,前面说的5条都比较容易实现,第6条由于文件数量过于庞大,一般也不建议那么做,所以第7条是我们的方向,但如果大家用的是Vue或React,就会发现源代码里并没有生成的HTML,因为所有数据都是异步加载的,并且还有一个问题,就是首次加载白屏的问题:由于是异步加载数据,所以如果网络比较慢,第一次打开网页时会出现白屏,等待几秒后才正常显示

  此时,SSR(Server-Side Rendering,服务端渲染)应运而生,首屏的内容在服务端提前加载好,连带页面一起加载,这样既解决了白屏问题,更能有效的达成伪静态化的目的。

  SSR框架

  目前SSR的主流框架:Vue方向的Nuxt.js、React方向的Next.js。

  这两个框架技术君都使用过,用起来极为相似,据说Nuxt.js就是模仿Next.js而来的,这里拿Nuxt.js举例。

  Nuxt路由

  路由是根据pages文件夹里的目录结构自动生成的,目录名叫什么,路由的path就叫什么,非常方便,也可以指定动态路由,只需要在前面加下划线,比如:list/_id.vue,生成的路由path就是:list/:id。

  Nuxt服务端数据加载

  这是Nuxt框架的核心,之前说过,我们的网站要求在页面查看源代码时能看到网站内容,但是普通的Vue代码打包后是看不到的,因为数据是异步加载的。在Nuxt中每个Vue文件有一个 asyncData(context)函数,我们就在这个函数里去请求后台数据,请求之后通过 return 就可以将数据绑定在当前组件中,和普通的data()一样。在asyncData函数里请求的数据就会显示在网页的源代码里。

  Nuxt打包

  Nuxt.js分为了两种打包模式:nuxt generate和nuxt build,如果是想采用真正的静态化就使用nuxt generate,会生成一个dist目录,将所有的vue文件都生成对应的html文件,但是之前说了,如果数据很多,那么就得生成很多文件,除非数据相对比较固定就比较适合。而nuxt build打包之后,需要将:_nuxt,static,package.json,nuxt.config.js这四个文件复制出来,然后找一个新文件夹,粘贴进去,再执行npm install和npm run start启动,这样启动之后实际上还是带了一个nuxt服务器环境,运行的时候就是以动态方式运行的。只需要在nginx里面做一个地址匹配,给url后面加.html即可。

  小结

  本篇文章并不是Nuxt框架的教程,只是从SEO的角度给大家一个引导,如果对Nuxt框架有兴趣,可以查阅相关资料或者官方网站。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:前端  前端词条  学会  学会词条  人员  人员词条  技巧  技巧词条  SEO  SEO词条