当前位置:360网址导航 » 站长资讯 » 资讯文章 » 优化推广 » 文章详细 订阅RssFeed

前端SEO优化笔记,谨慎使用 display:none

来源:前端SEO 浏览:53次 时间:2020-05-28
  前端seo规范学习
  前端的工作主要是HTML+JS+CSS,优化好这几个方面是SEO优化的前提;
  通过网站的结构布局设计和网页代码优化,使前端既能让浏览器用户看懂,
  也能让“蜘蛛”看懂;
  1.对网站的标题、关键字、描述精心设计,反映网站的定位,让搜索引擎明白网站是做什么的;
  2.网站内容优化:内容与关键字的对应,增加关键字的密度;
  3.在网站上合理设置Rotbot.txt文件;
  4.生成针对搜索引擎友好的网站地图;
  5.增加外部链接,到各个网站上宣传;
  注意事项:
  1.网站结构布局优化:
  一般而言,建立的网站结构层次越少,越容易被抓取,也就容易被收录。根据相关数据调查显示:如果用户经过挑战3次还没有找到需要的信息,很可能离开。因此,三层目录结构也是体验的需要,为此主要通过:布局优化。
  一、网站首页是权重最高的地方,如果链接太少,没有“桥",”蜘蛛“不能继续往下爬到网页,直接影响网站收录数量。但是链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好
  二、扁平化目录层次,让蜘蛛只要跳转3次就能到达网站的任何一个内页;
  三、导航优化,导航尽量采用文字方式,也可以搭配图片导航。但是图片代码一定要优化,<img>标签添加"alt""title"属性;告诉搜索引擎导航的定位,做到图片未能正常显示时,用户也能看到文字提示。
  四、在网页上可以加上面包屑导航,好处:从用户体验来说,可以让用户了解当前所处的位置以及当前网页在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;对"蜘蛛"而言,能够清楚了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率;
  五、利用布局,把重要内容HTML代码放在最前搜索引擎抓取HTML内容是从上到下,利用这一特点,可以让主要代码优先读取,广告等不重要代码放在下边。例如,在左栏和右栏的代码不变的情况下,只需改一下样式,利用float:left;和float:right;就可以随意让两栏在展现上位置互换,这样就可以保证重要代码在最前,让爬虫最先抓取。同样也适用于多栏的情况。
  六、控制页面的大小,减少http请求,提高网站的加载速度。一个页面最好不要超过100k,太大,页面加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,“蜘蛛”也会离开。
  代码优化
  (1)突出重要内容---合理的设计title、description和keywords<title>标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>标题中不要设置相同的内容。<meta keywords>标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。<meta description>标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同
  (2)语义化书写HTML代码,符合W3C标准尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,<nav>标签是用来设置页面主导航,列表形式的代码使用ul或ol,重要的文字使用strong等。
  (3)<a>标签:页内链接,要加 “title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 el="nofollow" 属性, 告诉 “蜘蛛” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。
  (4)正文标题要用<h1>标签:h1标签自带权重“蜘蛛” 认为它最重要,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。副标题用<h2>标签, 而其它地方不应该随便乱用 h 标题标签。
  (5)<strong>、<em>标签 :需要强调时使用。<strong>标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,<em>标签强调效果仅次于<strong>标签;
  (6)重要内容不要用JS输出,因为“蜘蛛”不会读取JS里的内容,所以重要内容必须放在HTML里。
  (7)尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。
  (8)谨慎使用 display:none :对于不想显示的文字内容,应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
  网站性能优化
  (1)减少http请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手,每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦 HTTP 请求数量达到一定数量,现在前端有很多工程化打包工具,如:grunt、gulp、webpack等。
  (2)合并CSS和JS文件
  为了减少 HTTP 请求数量,可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。资源请求就存在等待状态,这是很致命的,因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
  (3)控制资源文件加载优先级
  浏览器在加载HTML内容时,是将HTML内容从上至下依次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将CSS提前加载,不要受 JS 加载影响。