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

一些成熟的平台,在开发初期并没有考虑优化问题,所以做出来的页面,就算是效果很炫,功能很强,但是对搜索引擎非常的不友善。任何一个成熟的网站,后期页面都是动辄几百万的,到这个时候再来调整结构,既费时又费力,最怕的还是会影响到排名和收录。

所以说与其在后期碰到问题再来调整,还不如把问题解决在源头。我本人也是从事前端开发工作的,下面把我工作过程中,积累的几个开发过程中就需要做好的SEO优化技巧,分享给大家。

1、简化代码结构,更利于搜索引擎分析抓取有用内容:页面尽量采用DIV+CSS,当然,表格展现模式用table还是比div方便很多的;所有js、css采用外联方式,图片采用css精灵,减少请求次数。看下下面同样的内容,用div和talbe布局的代码比较,显而易见用div简便的多。

2、重要内容优先加载(第一个链接最好是网站主关键词,不刻意要求),可以用css来处理,索引一篇文章的长度也是有限制的,一定要把最重要的内容,优先展现给蜘蛛,这方面你可以通过查看一些比较大的网页快照来求证。

3、每个页面只能出现一次H1标签,H2标签可以多次:H1权重很高,普遍认为仅次于title,一般资讯详情页的标题、商品详情页的标题,都放在H1里。

4、图片一定要添加alt属性,title属性可选:蜘蛛不认识图片上的内容,只能通过alt属性来判断,如果是商品列表页,所有商品都加了alt和title的话,容易造成堆砌关键词,所以我一般是只加alt属性。

5、图片大小声明:如果图片大小不做定义的话,页面需要重新渲染,就会影响到速度。

6、链接可根据实际需求添加title属性以及nofllow值;非特殊性链接,链接地址一定要写入herf属性,有些前端开发人员为了省事,直接用div加个click事件当链接,在视觉上和使用上确实是实现了链接效果,但是做过SEO优化的人员都知道,蜘蛛目前对于js的支持很差,基本无法读取里面的链接地址。所以说用click事件是绝对不允许的,特别是一些重要的导航链接。

7、页面内容尽量不要做成flash、图片、视频,这些东西蜘蛛是抓不到的,就算是必须的,也要生成相应的静态页面。有很多企业站看着很炫,全站flash,老板看着是爽了,做SEO优化的人员就要抓狂了,全站没一个链接。

8、除首页外别的页面最好要加上面包屑型导航,导航结构一定要清晰。

9、做好404页面,一般会加首页链接及错误提示,并测试其返回状态码为404:1、用户体验友好,可以留住用户,不至于直接关闭页面;2、蜘蛛友好,可以返回抓取其他页面。

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

前端开发如何做好SEO优化的工作的更多相关文章

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

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

  2. 小型工厂企业网站究竟该怎么做好SEO优化,从而带来更多订单?

    中 小企业以及小型工厂做好SEO工作,每年从SEO带来的订单量还是很可观的,随着互联网的蓬勃发展,越来越多的小型工厂型企业网站开始逐渐走向互联网营 销,开始逐渐利用互联网开展销售工作!但是大部分的工厂 ...

  3. 前端开发中的SEO

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

  4. 前端如何做好SEO优化

    https://www.cnblogs.com/weiyf/p/9511021.html 一:什么是SEO? 搜索引擎优化(Search Engine Optimization),简称SEO.是按照搜 ...

  5. 教你如何做好SEO优化中的前端优化

    网站的速度是很多人都面临的问题,其实许多网站,都没有特意的去优化加载速度,对于一个网站来说,加速不但提高了用户体验(如果一个网站在几秒内没 有打开,大多数用户选择的是关闭而非等待),而且对于SEO的流 ...

  6. 说说前端开发中的SEO

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

  7. [html] 前端角度出发做好SEO需要考虑什么

    Meta标签优化 主要包括主题(Title),网站描述(Description),和关键词(Keywords).还有一些其它的隐藏文字比如Author(作者),Category(目录),Languag ...

  8. web前端开发2018年12月找工作总结

    2018年的冬天额外的冷,由内致外... 作为一名刚刚踏入社会的实习生,可谓是狠狠的体验了一把什么叫社会(同时也感叹父母赚钱真的很不容易) 前几天看见这样一句话"如果你不知道社会的辛苦,要么 ...

  9. 【网站seo优化】SEO优化每天的工作内容是什么?

    [网站seo优化]SEO优化每天的工作内容是什么?从未知的领域来到seo,感到搜索引擎无比神奇,接触seo久了,有每天必做的工作内容,大量的seo从业者,每天的工作内容大同小异,主要做的工作有通过相应 ...

随机推荐

  1. 【C++ Primer 5th】Chapter 15

    摘要: 1. 面向对象程序设计的核心思想是数据抽象.继承和动态绑定.数据抽象将类的接口和实现分离:继承定义相似的类型并对齐相似关系建模:动态绑定,在一定程度上忽略相似类型的区别,而以统一的方式使用它们 ...

  2. 【LeetCode】017. Letter Combinations of a Phone Number

    题目: Given a digit string, return all possible letter combinations that the number could represent. A ...

  3. C#线程处理基本知识

    章节: 线程与线程处理 讨论多线程的优缺点,并概括了可以创建线程或使用线程池线程的几种情形. 托管线程中的异常 描述不同版本 .NET Framework 的线程中的未经处理的异常的行为,尤其是导致应 ...

  4. WPF DelegateCommand CanExecute

     private DelegateCommand searchCommand;         public DelegateCommand SearchCommand         {       ...

  5. 面向对象(this关键字)

    package com_package2; public class Person3 { private int age; private String name; public int getAge ...

  6. 【旧文章搬运】VC插件中如何获取当前工程的工作目录

    原文发表于百度空间,2014-09-24========================================================================== 好难找的资 ...

  7. <正则吃饺子> :关于 Matcher 的 replaceAll 的简单使用

    在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jdk-zh replaceAll public String replaceAll(String  ...

  8. PCL推荐的命名规范(1)

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=209 文件命名 所有的文件名单词之间应该用下划线隔开,例 如unordere ...

  9. linux下的函数dirname()和basename()使用

    总览 #include <libgen.h> char *dirname(char *path); char *basename(char *path); 说明 函数以 '/' 为分隔符 ...

  10. java之Date(日期)、Date格式化、Calendar(日历)

    参考http://how2j.cn/k/date/date-date/346.html Date(日期) Date类 注意:是java.util.Date; 而非 java.sql.Date,此类是给 ...