• 针对于前端对于SEO需要做的工作


    1. 提高页面加载速度。 能用css解决的不用背景图片,背景图片也尽量压缩大小,可以几个icons放在一个图片上,使用background-position找到需要的图片位置可以减少HTTP请求数,提高网页加载速度。 可以使用缓存技术来提高页面的加载速度,启用了CDN加速
    2. 结构、表现和行为的分离。另外一个重要的拖慢网页加载速度的原因就是将css和JS都堆积在HTML页面上,每次看到有人直接在页面上编写CSS和JS我都很痛心疾首。通过外链的方式能大大加快网页加载速度的,css文件可以放在head里,JS文件可以放置在body的最下方,在不影响阅读的情况下再去加载JS文件。
    3. 优化网站分级结构。在每个内页加面包屑导航(百度搜)是很有必要的,可以让蜘蛛进入页面之后不至于迷路,有条件的话,最好能单独加个Sitemap页面,将网站结构一目了然地展示在蜘蛛面前,更有利于蜘蛛抓取信息。
    4. 集中网站权重。由于蜘蛛分配到每个页面的权重是一定的,这些权重也将平均分配到每个a链接上,那么为了集中网站权重,可以使用”rel=nofollow”属性,它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。
    5. 文本强调标签的使用。当着重强调某个关键词需要加粗表示,选用strong标签比使用b标签要更有强调作用。
    6. a标签的title属性的使用。在不影响页面功能的情况下,可以尽量给a标签加上title属性,可以更有利于蜘蛛抓取信息。
    7. 图片alt属性的使用。这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息,作用同上。
    8. H标签的使用。主要是H1标签的使用需要特别注意,因为它自带权重,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。

    针对于前端来说的工作:  

      HTML:

      1.标签的有开有合。
      2.避免冗余代码,例如去除空格字符。
      3.合理利用标签语义化。
      4.合理的嵌套规则,避免行元素内嵌套块元素。
      5.img标签内需要添加title属性和alt属性。
      6.a标签内需要添加title属性。
      7.Meta标签的优化(过去搜索引擎优化的重要手法,现在已经不是关键因素,但仍不可忽略)主要包括: Meta description、Meta keywords的设置  关键字密度要适度,通常为2%-8%,也就是说你的关键字必须 在 页面中出现若干次,或者在搜索引擎允许的范围内,要避免堆砌关键字。
      8.<title>页面标题,必须列出信息的标题、网站的名称以及相关关键字,避免堆关键字。
      9.合理使用注释。
     
      CSS:
      1.避免将css代码写在标签内。
      2.如果css代码量少,可直接写在头部。否则请使用外部引入的方式。
      3.请不要使用通配符选择器 *{margin:0;padding:0;} 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一 些不必要的元素也重置了外边距和内边距。请引用reset文件,引用reset文件在自己定义的css文件之前。
      4.css代码缩写可以提高你写代码的速度,精简你的代码量,包括margin,padding,border ,font, background和颜色值等。
      5.利用css继承,如果一个父元素内有多个子元素拥有相同的样式,可将相同的样式定义在元素上。
      6.如果多个元素拥有相同的样式,可定义一个通用的class或使用群组选择器。
      7.使用背景图合并技术。
      8.适当的代码注释。
     
      JS:
      1.采用外部引入的方法。
      2.合理合并JS代码,可减少服务器的压力。
      3.良好的JS代码习惯。例如:减少页面重绘,减少作用域链上的查找次数。
  • 相关阅读:
    git的突出解决--git rebase之abort、continue、skip
    servlet中service() 和doGet() 、doPost() 学习笔记
    Spring IoC容器初始化过程学习
    浅探SpringMVC中HandlerExecutionChain之handler、interceptor
    常用路由命令
    路由配置命令
    cout 计算顺序问题
    第一次作业
    记录一个微信网页授权中不小心踩到的坑(Curl请求返回false)
    善用mysql中的FROM_UNIXTIME()函数和UNIX_TIMESTAMP()函数
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9119190.html
Copyright © 2020-2023  润新知