近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上。要做好SEO,WEB前端这一块也要做必不可少的优化。

这就要求我们WEB前端工程师在开发页面的时候,要写出规范标准的代码,符合SEO,做好用户体验。

以下是一些零度逍遥在平时工作中总结的一些前端开发中的SEO注意点,其实很多也是前端的基础知识,仅供大家参考。

1、网站布局要做到样式与页面分离,删除页面中不必要的标签和元素。

2、页面生成要尽量小,要压缩页面的大小,页面尽量使用静态或伪静态。

3、所有的CSS、JS都要使用外部调用。

4、外部调用的JS文件的代码能放在底部的尽量放在底部,页面调用的css文件的代码尽量都放在head内,同一页面尽量不要超过3个JS外部调用。

5、每个页要只能出现一次H1标签,H2~H6标签可以多次,这样做是为了加重H1标签的权重。

6、除首页外别的页面要加面包屑型路径,导航一定要清晰。

7、网站一定要兼容脑残的IE各版本和FF等主流浏览器,这个虽然感觉对SEO影响不大,但是作为前端,这也是最基本的吧。

8、图片一定要添加ALT属性,链接一定要添加title属性。

9、网站结构呈扁平状树型,目录结构不宜过深,每个页面离首页最多点击3次,过深不利于搜索引擎的抓取。

10、做好404页面,并测试其返回状态码为404。

11、确保网站代码无误,HTML能通过W3C版本。

WEB前端开发中的SEO注意点的更多相关文章

  1. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  2. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  3. Web前端开发中的小错误

    Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...

  4. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  5. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  6. web前端开发中的浏览器兼容性总结

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  7. 说说前端开发中的SEO

    SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为.我认为这是一门说来简单,但操 ...

  8. 前端开发中的SEO

    什么是SEO SEO由英文Search Engine Optimization缩写而来,中文意译为"搜索引擎优化".SEO是指从自然搜索结果获得网站流量的技术和过程,是在了解搜索引 ...

  9. web前端开发中Nodejs、Grunt、npm等的介绍、使用

    一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...

随机推荐

  1. Sublime Text 3 添加到右键菜单

    Sublime Text 3 添加到右键菜单 学习了:http://jingyan.baidu.com/article/cdddd41c99d07653ca00e147.html Windows Re ...

  2. 认识一下Kotlin语言,Android平台的Swift

    今天在CSDN首页偶然看到一个贴子JetBrains正式公布Kotlin 1.0:JVM和Android上更好用的语言 看完后,感觉Kotlin语法非常简洁,有一系列动态语言的特点,Lambda表达式 ...

  3. WIN7使用VisualSVN建立SVN服务器

    使用SVN开发十分的方便,这样就不用每次都拷贝粘贴来备份了,网上看到一篇给自己的windows电脑安装SVN服务器的使用非常方便. 1.下载安装文件(服务器端和客户端) 服务器端采用VisualSVN ...

  4. vc应用CPictureEx类(重载CStatic类)加载gif动画

    1.PictureEx.h文件: //////////////////////////////////////////////////////////////////////// PictureEx. ...

  5. html单行、多行文本溢出隐藏

    欢迎加入前端交流群来py:749539640 单行: div{/* 单行溢出隐藏 */ width: 150px; white-space: nowrap; overflow: hidden; tex ...

  6. linux文件上传下载

    上传本地文件到服务器:scp 文件名 账号@服务器IP:文件路径eg:scp test.txt root@192.168.0.123:/tmp/服务器文件下载到本地:scp 账号@服务器IP:文件 本 ...

  7. MyBatis数据持久化(八)sql复用

    在mybatis中,我们可以將sql语句中公共的部分提取出来,然后需要该段sql的地方通过include标签引入即可,这样可以达到sql语句复用的目的. 例如我们有两条相似的查询语句: <sel ...

  8. Codeforces 986B. Petr and Permutations(没想到这道2250分的题这么简单,早知道就先做了)

    这题真的只能靠直觉了,我没法给出详细证明. 解题思路: 1.交换3n次或者7n+1次,一定会出现一个为奇数,另一个为偶数. 2.用最朴素的方法,将n个数字归位,计算交换次数. 3.判断交换次数是否与3 ...

  9. canvas图片滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. ajax的异步请求小结

    如何判断是使用json还是jsp的数据传输: json字符串可以使用js,jquery,ajax,java这几种技术,页面为jsp页面,json数据为java后台传递来. 1.同步请求可以从因特网请求 ...