近几年来,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. java语言中的多态概述

    多态:一个对象相应着不同类型 多态在代码中的体现:父类或接口的引用指向其子类对象. 多态的优点: 提高了代码的扩展性,前期定义的代码能够使用后期的内容. 多态的弊端: 前期定义的内容不能使用后期子类中 ...

  2. Android实战简易教程-第十三枪(五大布局研究)

    我们知道Android系统应用程序通常是由多个Activity组成,而这些Activity以视图的形式展如今我们面前, 视图都是由一个一个的组件构成的. 组件就是我们常见的Button.TextEdi ...

  3. 零基础学HTML 5实战开发(第一季)

    開始学习html5了.趋势不得不学习啊,之前老毛说过落后就要挨打,如今是不学习就要被市场淘汰,被社会淘汰.喜欢挑战,喜欢冒险.来吧.csdn给我们提供了那么好的平台.用起来..零基础学HTML 5的实 ...

  4. Xamarin部署时遇到错误: Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE]

    1 把adb命令加入到环境变量. ADB 的位置:C:\Users\USER\AppData\Local\Android\android-sdk\platform-tools 2. 卸载包,执行(是a ...

  5. ORA 12505 Listener does not currently know of SID given in connection descriptor

    oracle数据库正常启动后.在本地能够正常訪问,可是远程使用sqldevelop却不能訪问.提示ORA 12505 Listener does not currently know of SID g ...

  6. leetcode 题解 || Longest Common Prefix 问题

    problem: Write a function to find the longest common prefix string amongst an array of strings. 寻找 0 ...

  7. 89.[NodeJS] Express 模板传值对象app.locals、res.locals

    转自:https://blog.csdn.net/Elliott_Yoho/article/details/53537437 locals是Express应用中 Application(app)对象和 ...

  8. windows快速找到host文件

    https://jingyan.baidu.com/article/1e5468f96f7345484961b71e.html

  9. ARM的六大类指令集---LDR、LDRB、LDRH、LDM、STR、STRB、STRH、STM

    http://blog.csdn.net/u013477200/article/details/50723555

  10. Python的那些坑--------括号篇

    在Python中遇见了带不带括号的问题,我目前的是这三种,有问题请指出.如果有其他的,我后续会更新 一  函数带不带括号: def a(x): return x print(a) #不带括号调用的结果 ...