深入浅出的前端代码优化

Ever

前端工程师 - Ever

2021年10月25日
深入浅出的前端代码优化

搜索引擎优化(SEO)你或许知道,但是前端代码优化也同等重要,你知道吗?通过网站的使用正确恰当的页面代码,能够对网站整体的代码框架形成规范,吸引“网络爬虫”前来爬取,提高用户体验度和网站对用户的粘性。深入浅出的前端代码优化,能让你的网站更利于SEO优化。

前端代码基础知识

<title>

一篇文章的标题就是门面,就像敲门砖一样,吸引人的标题才有让人读下去的欲望。标题强调网站重心,关键词放在前面,切记不能进行关键词堆砌,每个页面的title中不要 “新瓶装旧酒”,设置符合页面内容的关键词即可;

<meta keywords>

虽说文章的关键词能够突出文章的重要信息点,但是也需谨记不能堆砌关键词,因为在09年谷歌便已提出不再使用属性关键词标签了,其它主流搜索引擎也紧跟其后,所以我们建议关键词埋伏并不可取;

<meta description>

描述过长并不能给你带来过多益处,一般需是页面内容的高度概括,其中穿插网页关键词,切勿过分重复罗列,否则易被网络爬虫判为作弊,被关进“小黑屋在所难免”了;

Body的标签

尽量让代码语义化,标签恰当使用,让其能够各施其职,这样更方便阅读源码和让“搜索蜘蛛”一目了然;而且不同的代码标签有不同的作用,让他们在各自的位置尽力反光发热,才能发挥最大效用;

链接a标签

在使用链接a标签时,使用title属性对链接标签进行说明,更方便爬虫和访客清晰该链接的内容;而为了告知爬虫蜘蛛链接是否可爬取,设置nofollow属性更有条理;

长度

关于标题,最好规范使用h1~h6,一个网页设置一个h1,更符合网站建设规范,吸引爬虫爬取;

使用<br>

这只是简单用来对文本内容进行换行的作用,当网站建设时,要想实现网站的换行需求,它便能帮助你;

属性标签

在使用到img标签时,设置alt属性,因为这大大影响着图片的SEO效果,设置它能有效帮助“爬虫”识别图片的内容;及时网站在加载缓慢的情况下,图片的alt标签能够提示你图片的大概内容;

小贴士

  • 巧妙使用css布局,对于重要的代码,先放在前面,因为爬行“蜘蛛”会优先爬取,它爬取代码是由上而下爬取代码的;
  • 很重要的一点,重要的内容千万不用js输出,而且减少使用iframe框架,因为“蜘蛛”对这并不买账;
  • 倘若你的js代码是涉及有DOM操作的,小编建议最好放在</body>标签之前,html代码之后;
  • 对于代码中你不想显示在浏览器页面的内容,适当使用display:none;因为浏览器会对这行代码的隐藏内容视而不见,不会显示。
  • 最好能优先使用<strong><em>标签对文本内容进行加粗处理,因为它们对SEO能够产生良好的影响,可以自行调整样式。

简述

在网站建设过程中,要考虑到前端代码的优化,不断精简代码,倘若一个标签可以实现功能,那就不要使用两个,建设符合网站开发规范的程序。巧妙使用各个标签代码,不要乱用标签,是每个标签都语义化,考虑爬虫是否收录,是否适合网站的后续开发。

原创文章归Sytech版权所有,转载请注明出处,商用请联系本站获取版权。

Ever

前端工程师 - Ever

Sytech科技前端工程师,专注于网络搭建和网站SEO优化多年,擅长于网站数据分析和海外网站运营、维护。

2023年4月11日

市场营销

搜索引擎优化-网站SEO小贴士

电商网站如何做到SEO友好?我们在做搜索引擎优化的时候应该有什么注意事项?本文以谷歌算法为例,提供了13个优化经验点,协助你长期持续优化!

Zoao

前端工程师 - Zoao

了解更多

2022年1月25日

网站建设

关键词排名高却没询盘?SEO优化有猫腻

辛辛苦苦所做的网站SEO空有高排名,却不见流量?虽然SEO托管公司交出了一份看似完美的答卷,但流量却没有达到预期,这样的网站优化与饮鸩止渴何异?

Mickey

IT工程师 - Mickey

了解更多

想要马上开始定制开发您的网站建设?

添加微信咨询 扫描二维码添加微信客服

微信二维码 微信客服

其它联系方式

Sytech科技电话

邮寄联系地址 广州市番禺区钟村街道长华创意谷18栋8~9号 联系服务热线 020 8480 8073