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代码习惯。例如:减少页面重绘,减少作用域链上的查找次数。

前端关于SEO的更多相关文章

  1. 浅谈前端与SEO

    转载地址: https://blog.csdn.net/lzm18064126848/article/details/53385274?tdsourcetag=s_pctim_aiomsg SEO(S ...

  2. 前端页面 SEO 优化

    SEO要点:1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取.2.重要的内容html代码放在前面/左边.搜索引擎爬虫是从左往右,从上到下进行抓取的 ...

  3. 前端开发SEO的理解

    所谓seo(Search Engine Optimization)即搜索引擎优化.简单说就是百度.谷歌搜索引擎的‘蜘蛛’,如下图: 搜索引擎蜘蛛是通过,连接地址来找到你的网站的,seo就是让你的网站符 ...

  4. SEO优化小技巧

    /** * seo优化课程 * 先谢慕课网 */ /** * SEO基本介绍 * SEO与前端工程师 */ /** * SEO基本介绍 * 搜索引擎工作原理:输入关键字------查询------显示 ...

  5. Web前端:HTML~CSS~JS

    网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3.  “HT ...

  6. SEO在网页制作中的应用

    1.什么是SEOSEO(Search Engine Optimization)中文意译为“搜索引擎优化”.SEO是指通过网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键 ...

  7. 每一个程序猿必知之SEO

    似乎由于受这篇文章的影响 http://katemats.com/what-every-programmer-should-know-about-seo/ 于是我也觉得我应该写一个每一个程序猿必知之S ...

  8. 82.使用vue后怎么针对搜索引擎做SEO优化?

    什么是SEO 搜索引擎优化(Search engine optimization,简称SEO),指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从 ...

  9. 聊聊Spring Cloud Config

    Spring Cloud Config 转自:https://blog.csdn.net/fjnpysh/article/details/71307311 现今这个时候,微服务大行其道,互联网应用遍地 ...

随机推荐

  1. 从零开始编译属于你的FFmpeg

    一.前提: 编译FFmpeg可以是初学者,尤其是对C语言项目,Linux编译不熟悉的的初学者的一道门槛. 我曾经找过很多博客,文章,有些能编译成功,有些则不能.编译通过,能够运行也是云里雾里的.其实最 ...

  2. String方法使用示例

    import java.lang.String; public class StringMethodDemo1{ /** 熟悉String的常用方法. */ public static void ma ...

  3. python 对象属性与 getattr & setattr

    Python对象的属性可以通过obj.__dict__获得,向其中添加删除元素就可以实现python对象属性的动态添加删除的效果,不过我们应该使用更加正规的getattr和setattr来进行这类操作 ...

  4. 【Linux】文本编辑器Vim常用操作入门

    Linux常用文本编辑器:Vi & Eamcs Vim -- Vi的升级版本 Vim 一.3种工作模式 命令行模式 (Command Mode) 插入模式 (Insert Mode) -- 键 ...

  5. c 结构体中的变长数组

    在Linux系统里,/usr/include/linux/if_pppox.h里面有这样一个结构: struct pppoe_tag { __u16 tag_type; __u16 tag_len; ...

  6. 大数据的正确用法你get到了吗?

    Azure 镜像市场已于2016年9月21日正式上线,在这个统一的集成平台中,客户可以轻松地浏览.搜索和选择一系列来自第三方的应用和解决方案,并可以将其快速一键部署到 Azure 实例当中. 在移动为 ...

  7. Hadoop fs命令(转)

    最近使用hive做一些etl工作,除了日常sql的编写,了解hadoop及hive的一些底层原理性质的东西包括调优非常有必要,一次hive调优就把原来的零散文件做了合并.首先记下hadoop常用的命令 ...

  8. Selenium2学习(五)-- SeleniumBuilder辅助定位元素

    前言 福利来了,对于用火狐浏览器的小伙伴们,你还在为定位元素而烦恼嘛? 上古神器Selenium Builder来啦,哪里不会点哪里,妈妈再也不用担心我的定位元素问题啦!(但是也不是万能,基本上都能覆 ...

  9. 【Spring实战】—— 14 传统的JDBC实现的DAO插入和读取

    从这篇开始学习Spring的JDBC,为了了解Spring对于JDBC的作用,先通过JDBC传统的流程,实现一个数据库的插入和读取. 从这篇你可以了解到: 1 传统的JDBC插入和读取的过程. 2 如 ...

  10. 三、python webservice

    #!/usr/bin/python # -*- coding: utf-8 -*- import logging import suds url="http://172.17.2.199:8 ...