前端开发中通过一些小习惯,可以有利于SEO,本着蚊子再小也是肉的原则,能抓住自然不能忽略。

1.控制首页链接数量,不能过多,也不要太少。更不要为了凑数而添加

2.扁平化层次,力争跳转三次可以到任何页面

3.导航,面包屑导航,分页。  导航里一定要有文字描述,尽量不要使用  | 等无意义的字符。 分页最好是用  首页   1  2  3  4  5  6  7  8   下拉选择页数   下一页     这种模式。

上述内容可以属于设计者,并不见得能被前端开发者操纵,所以能被操纵的部分要好好把握,那就是语义化,例如

1.h1-h6标签

页面内标题,最重要的内容,要使用h1标签,有且只有一个。过多使用会被搜索引擎厌恶,认为你是骗子,就不嬲你了。次标题h2,小标题h3.。。。

2.表格标题,使用<caption>

3.重要代码放在前面

例如有个别网站是左边sidebar,右边main,但main里是重要内容,可以通过样式控制,让main代码写在前面

4.<strong>  <em>  表示强调关键字

5.重要内容不要使用JS输出

6.尽少使用iframe

7.谨慎使用display:none,隐藏的文字会被搜索引擎忽略。

8.合作伙伴,外链的链接,添加属性 rel="nofloow" ,告知搜索引擎不要跟踪链接。

9.dl,定义列表,在如文字解释时,电影内容简介列表时,都可以使用

10.a标签,title一定要有,img标签,重要的图片alt要写清楚。

11.精简代码,代码越多,搜索引擎越难以提炼关键的文字

12.style代码,js代码,尽量不要出现在页面中,JS代码的引入位置,也尽量放在页面的最后,这样做,不仅仅利于SEO,还可以优化页面打开速度。

东西不多,稍微注意点,就能提高代码被搜索引擎认知的程度了

前端开发与SEO的更多相关文章

  1. 前端开发与Seo基础

    网页代码优化       1:<title>标题:强调重点,重点关键词放在前面,每个页面的title尽量不相同 2:<meta keywords>关键词:列举出几个重要关键词, ...

  2. 前端开发中SEO的十二条总结

    一. 合理使用title, description, keywords二. 合理使用h1 - h6, h1标签的权重很高, 注意使用频率三. 列表代码使用ul, 重要文字使用strong标签四. 图片 ...

  3. 前端开发如何做好SEO优化的工作

    前端开发工程师不仅需要要跟视觉设计师.交互式设计师配合,完美还原设计图稿,编写兼容各大浏览器.加载速度快.用户体验好的页面.现在还需要跟SEO人员配合,调整页面的代码结构和标签. 一些成熟的平台,在开 ...

  4. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. web前端开发培训和自学 哪种选择更适合你

    web前端相对于其他软件开发是比较容易入门的,但是如果深入学习就比较困难了,这门技能需要从业人员掌握一定的设计.代码.交互技能和一些SEO技能,容易入门还涉及这么多知识和技能,那学习web前端开发到底 ...

  7. 前端开发面试知识点大纲--摘自jackyWHJ

    前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...

  8. Web前端开发工程师基本要求

    一位好的Web前端开发工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师.现在说的重点不在于讲解技术,而是更侧重于对技巧的讲解.技术非黑即白,只有对和错 ...

  9. 通往成功的钥匙--Web前端开发技术

    互联网是一个服务性行业,用户对网站良好的体验度,直接影响到网站的效果.无论你做了多少广告推广,没有用户体验度等于零.Web前端技术是为了解决用户体验度而诞生的.无论是百度.新浪.阿里巴巴等大型网站,还 ...

随机推荐

  1. JQuery EasyUI DataGrid获取当前行或选中行

    1.获取当前选中行,如果没有选中行,则返回 null var row = $('#gridID').datagrid('getSelected'); 2.获取当前所有选中行数据,返回元素记录的数组数据 ...

  2. Linux 下测试网卡性能命令iperf 的用法

    很多文件系统都自带iperf 命令,所以不用作多的移植工作. 如下查看他的帮助信息. Qt@aplex:~$ iperf -h Usage: iperf [-s|-c host] [options] ...

  3. 【JSOI2010】Group 部落划分 BZOJ 1821

    1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec  Memory Limit: 64 MB     聪聪研究发现,荒岛野人总是过着群居的生活,但是 ...

  4. Python自动化之django的ORM

    django ORM操作 1.什么是ORM? ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作 ...

  5. Python3实现简单的爬虫功能

    python3简单实现一个爬去网站图片的小功能: 有时候想要下载自己喜欢的多个图片时,不需要一个个点击来下载,使用python脚本批量拉取,并保存到本地. 1. 首先找到自己要下载图片的url 2. ...

  6. yii框架中验证器声明一组内置验证器可以使用短名称引用

    1.内置验证器的短名称分别有: boolean: yii\validators\BooleanValidator captcha: yii\captcha\CaptchaValidator compa ...

  7. [jquery]模仿radio单项选择

    今天写了个小功能,模仿radio单选, //单选收货地址 $(".wuliu-table-to").find(".called").click(function ...

  8. C#运算符

    运算符 1.算数运算符 赋值运算符 等号在C#中并不是表示相等的意思,而是表示赋值,把等号右边的值赋值给 等号左边的变量 由等号连接的表达式,叫做赋值表达式.我们要求等号两边的数据类型必须一 致. 2 ...

  9. Java中的位运算

    昨天去面试的时候做到了一道Java的位运算题目,发现有个运算符不懂:">>>",今天特地查了一下,并小结一下常见的位运算符号: ~  按位非(NOT)(一元运算) ...

  10. LeetCode之283. Move Zeroes

    ---------------------------------------------------------------------- 解法一:空间换时间 我使用的办法也是类似于"扫描 ...