首页 » 网站推广 » 正文

「网站推广外链」从SEO优化的角度来设计前端页面,这些代码收藏备用

深圳seo 2020年08月07日 网站推广 1941 views 0

扫一扫用手机浏览

从应用管理权限的角度来看,网站可以分为前端接收和后端管理。从代码的角度来看,呈现给客户的页面通常称为前端开发,而不允许客户访问的页面称为后端开发代码。前端开发页面除开规定别具一格,还必须在特性、电脑浏览器适配、不一样机器设备上适配具备优良的主要表现,而前端开发页面的SEO优化仅仅前端开发代码优化中不足挂齿的一个过程,乃至能够忽略;可是这一个很微小的小过程却能够对网站中后期的访问量产生尤为重要的危害。

前端设计

网站的SEO优化就好似盐一样,多了味道微苦,沒有又咽不下,仅有恰如其分才可以是人间美味。因为前端设计工作人员是不明白SEO优化的,她们只看重页面的美观大方,代码的实行高效率和电脑浏览器的兼容模式,网站发布以后SEO优化工作人员又必须再一次对代码开展核查和优化改善。

在这个过程中,由于代码的改动在所难免促使以前设计方案好的css或js作出有关的变化,这针对前端工程师工作人员而言是以及不情愿的事儿,并并不是不愿意改动,只是十分不便。大家都了解一些css代码变更一处,很有可能会危害到网站许多 页面的排版设计错乱。

如果前端设计在一开始就带着SEO优化的目的去设计页面,那么以上问题就不会出现了。前端设计中的SEO优化有需要哪些值得注意和需要的代码呢?

01不利于搜索引擎收录的代码

在SEO优化中,由于搜索引擎对某些前端代码是无法识别的,所以要避免使用。

①iframe框架,搜索引擎对于iframe框架的内容是无法识别的,在设计页面时要避免使用这种方式来加载页面内容。

②慎用JS代码来控制内容,搜索引擎不识别JS里面的内容,现在经过各种技术的革新之后虽然搜索引擎也可以抓到一些JS,但是很JS技术会增加搜索引擎收录内容的难度。由于一些特殊功能的实现由不得不用,所以要避免在那些需要被搜索引擎收录的内容上尽量不使用。

SEO优化

③将文字写在图片上,有时候为了页面的美观,后台发布内容后前端会把相关的数据输出为一张图片,比如map技术,通过填写相关数据,前台生成一张统计图片,这样是不利于优化的。

④懒加载技术,懒加载是根据用户打开页面后的可视窗口进行内容加载,常用于图片和长页面的加载,这种技术实用但是不利于优化,最好不要使用。

02TDK代码的优化

TDK是构成页面的核心组成部分,有很多网站全站的标题都是一样的(不要觉得这是多余的提醒,实际上现在还有很多的网站是这样),保证每个页面的title是独立的,在网站后台能够为每一个页面单独增删改。

(1)标题标签采用固定的文件格式,如“今日页面标题+栏目名称+网站名称”,内容分页查询通过添加页面自动区分。

②keywords和description标签不可以省去,尽管这种不用做前端工程师的人去加上内容,可是你需要把内容编写加上的这种内容在页面代码上展现出去。有一些网址感觉叙述和关键字不重要,立即除掉不写,让搜索引擎自身依据内容来分辨(自然也是能够的),可是搜索引擎终究沒有大家积极填好的关键字和叙述精确。

03代码的精减和编号的标准

代码精减并不是说要少写,只是针对这些多次重复使用的css和JS代码尽可能融合到一个文档里边,降低前端开发客户在浏览页面时对网络服务器文档的恳求频次。

严苛依照div+css的标准来撰写代码,说到标准难题,不得不承认许多 的前端开发讨厌依照w3c的规范来撰写,不得不承认有点儿缺憾。例如题目应用h标签,尽管用div相互配合css还可以完成同样的视觉冲击,可是针对搜索引擎而言它是不一样的,h1意味着当今页面的题目,p是内容一部分;图片务必写在img标签里边,即便将图片放到css的background里边还可以做到同样的实际效果,可是搜索引擎看待img标签和background二种图片的处理方法彻底不一样,img里边的图片会被百度收录,而在background里边的图片会被作为网址的一个原素来解决,未予百度收录理睬。

像这种图片代码如果是早已成形的前端开发页面,再历经SEO提升的一番整治,二次改动不逊于再次设计方案一遍代码,因此 有很多情况下前端开发是较为反感做SEO提升工作人员的。

所以把css写在一个文件里面,同一个页面尽量不加载太多的css文件和JS文件,提高页面的加载速度有利于搜索引擎对内容的抓取收录。

04添加对搜索引擎友好的代码说明

这个主要表现在一些搜索引擎对SEO优化的特别标签处理上,这个对于前端设计来说他们几乎不会关注,因为不会用到,如果提前就添加好,可以少做返工。

①认识nofollow标签的使用方法,在对待链接到其他网站的超链接,适当添加nofollow来减少权重的流失。

②图片增加alt描述,使每一张图片也能被收录,图片被收录后为网站带来流量也是很可观的。

③权威标签canonical的使用,对同一个页面拥有多个不同的URL可以访问时,要把哪一个作为正规的入口,在head标签里面添加<link href="当前页面权威的绝对URL地址" rel="canonical" />,提前设置好避免返工。

④禁止页面被转码,对于PC和移动不同宽度的页面,搜索引擎为了更好地展现页面会将PC进行页面转码,禁止转码的方法是是在head标签里面添加如下代码。

<meta http-equiv="Cache-Control" content="no-transform" /><meta http-equiv="Cache-Control" content="no-siteapp" />

⑤添加移动适配代码,针对自适应页面或拥有独立PC、移动页面要添加有利于搜索引擎收录的相关代码,比如自适应(PC和移动页面url一样)在head标签内添加如下代码。

<meta name="applicable-device" content="pc,mobile"><meta http-equiv="mobile-agent" content="format=html5;url=当前页面绝对url链接/}">

05使用JS和nofollow屏蔽链接

奇怪了,前面不是说要尽量让搜索引擎识别内容不要使用搜索引擎不认识的代码吗?你没看错,就是要屏蔽!针对有一些内容我们并不希望被收录和抓取,所以可以使用JaScript的方法来进行处理,并加上nofollow屏蔽链接跟踪。

一个页面上有的内容是需要被收录的,也有的内容是不需要被收录,这些是需要在写代码时就考虑到。

做好以上这些前端相关的内容就全部解决了,剩下的内容质量、网站关键词优化等就交给网站编辑和SEO优化吧,从上面也可以看出,前端和SEO优化是紧密相关的工种,所以紧密良好的合作才是做网站、提升流量的根本。

免责声明:文章《「网站推广外链」从SEO优化的角度来设计前端页面,这些代码收藏备用》来至网络,文章表达观点不代表本站观点,文章版权属于原作者所有,若有侵权,请联系本站站长处理!

发表评论