关于web前端开发过程中SEO优化的注意点

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到,即提高搜索排行,从而提高网站流量的一个技术手段

在写web页面的时候,为了让网络爬虫更容易的搜索到页面,需要注意几个点:

html语义化

刚接触web前端开发的时候很奇怪,既然html标签可以通过css进行更改它的内置属性,为什么还有这么多的标签存在

<div>,<h1>,<span>,<strong>....

而现在,随着对前端的不断深入,才逐渐明白它的用处

语义化的html可以让开发者更容易看懂每一块代码的含义及其侧重点,同时,对于SEO优化也有帮助

网络爬虫在搜索的过程中会按着html语义去侧重搜索,

标准的符合W3C规范html能让网络爬虫更好的理解,从而提高网站的SEO优化水平。

http://www.w3school.com.cn/html篇中,有对每一个标签的语义都做了说明,需要的同学可以注意看下。

ifame

对于前端开发来说,ifame已经是很久之前的技术了,现阶段应该很少有前端开发者使用ifame(当然,在后台框架搭建中还是会使用到)

ifame退出前端舞台的理由我想应该就有一点,web中使用ifame,ifame中的内容网络爬虫是搜索不到的,所以对于ifame页面来说基本不存在SEO优化

建议前端开发中少用,(后台开发对这点到不在意,后台系统对于SEO优化没这需求吧)

js输出

对于网站中一些重要的文字或内容最好不要使用js输出生成html展现,因为网络爬虫对web中的js只会视而不见,所以用js输出过多的内容

会让网站的SEO优化水平降低(我还是挺喜欢用js去输出html的,被限制住~~~~)

alt属性

alt属性一般应用在<img>标签里,当图片无法正常加载时,alt属性设置的值就会显示出来作为解释文本

对于前端开发人员来说总感觉这个属性有点鸡肋,因为在开发过程中基本看不到这个属性的效果(PS:开发过程中一般情况都不会有加载图片失败的情况)

不过要注意,该加的属性还是要加上去的,网络爬虫是识别不了图片的,不管你的图片怎么炫怎么酷,在网络爬虫眼里终究只是一段code而已,而<img>

标签的alt属性在网络爬虫眼里就是图片的标志

<title>

<meta name="description" content="...">

<meta name="keywords" content="...">

合理的使用这三个对SEO也有很大的帮助,具体使用方法这里就不多说了,有兴趣的同学可以网上搜下

时间: 2024-10-05 04:44:57

关于web前端开发过程中SEO优化的注意点的相关文章

web前端之网站seo优化学习笔记

这两天因为一些公司业务上的原因,学习了一些关于网站seo优化的方法和技巧. 之前在码代码的过程中其实还没有考虑过对于网站导流和优化网站关键字搜索排名的问题. 在了解了一些这方面的资料之后,觉得这是一个很有意思的领域.把这几天的学习笔记记下来. 个人理解是在一个项目基本上完成主要需求后需要运营需求加入的时候,此时seo优化就非常重要.所以在网站开发的最开始有经验的前端coder们在搭架子的时候就应该提前把以后运营汪们可能会提出的运营需求,特别是一些针对影响关键字排名和与搜索引擎相关的部分就可以考虑

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

我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SVG. 在web页面开发中,尺寸和位置分为屏幕的尺寸和位置,元素的尺寸和位置,还有一个是文档的尺寸和位置,不过文档的尺寸和位置是通过document.body获取的,也算是一个元素.还有鼠标的位置.所以尺寸和位置主要分为三类: 屏幕尺寸和位置 元素尺寸和位置 特殊的元素,文档的尺寸和位置 鼠标的位置(

WEB前端开发中的图片压缩

web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的情况下压缩图片,以便让网站更快的加载,提高用户体验度. 我在工作中,压缩图片用到了三个方法,分享给大家: 一.使用windows自带的画图工具 1.使用画图工具打开想要压缩的图片:2.什么都不用做,直接另存为你想要的图片格式,你会发现它比源文件小了很多,而且质量看不出来损失. 这个方法简单,快捷,压

web前端9大性能优化方案汇总

网页的性能问题是产品开发过程中的一个重要的环节,在产品成功地把功能实现后,性能能好与坏就直接影响了用户体验,以至于影响了产品的成败! 作为web前端开发者,对前端部分进行性能上的优化,是责无旁贷,刻不容缓的工作.下面简介一下9种性能优化方案. 一.罪魁祸首是http请求 一般网页,80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等).减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较

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

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

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

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢? 为什么我们需要使用相对字体大小呢? 或许我们最能直接想到的一点就是它关于CSS3的一些东西.很好理解的是它是一种字号计算方式,尤其是当你在为多种分辨率进行字号计算的时候.想想要在手机上实现字体变大或者变小的时候,你不得不要反复重新计算对象的字

【Web前端】jQuery界面优化

随着互联网的发展,网站的前端界面会越来越重要,它关注的是用户的直接体验.市场上同类型的网站越来越多,一个比其他同类网站更流畅.优雅的界面能让用户摈弃你的竞争对手.所以,让自己的网站前端运行的更快.界面更优美成为了一个重要的话题.从而,前端界面优化技术也成为了优秀前端开发人员必备的技能,这是核心竞争力. 今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术,这些优化技术需要我们深入理解JavaScript以及Web浏览器中DOM与JavaScript引擎关系. 减少D

全方位分析web前端如何进行性能优化

前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件放到文档顶部,js 文件放到文档底部 因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误 (3)进行CDN托管(具体可参看https://div.io/topic/930) (4)data缓存 2.css (

前段开发过程中需要优化的问题

(1) 减少http请求次数:css spirit,data uri(2) JS,CSS源码压缩(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能(5) 用setTimeout来避免页面失去响应(6) 用hash-table来优化查找(7) 当需要设置的样式很多时设置className而不是直接操作style(8) 少