转载:浅谈前端与SEO

SEO(Search Engine Optimization),就是传说中的搜索引擎优化,是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。

SEO的实施方法:前端的工作主要是负责页面的HTML+CSS+JS,优化好这几个方面会为SEO工作打好一个坚实的基础。

title:只强调重点即可,重要关键词出现不要超过2次,而且要靠前,每个页面title要有所不同。

description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键词,每个页面description要有所不同。

keywords:列举出几个重要关键词即可,也不可过分堆砌。

语义化书写HTML代码,符合W3C标准。

对于搜索引擎来说,最直接面对的就是网页HTML代码,如果代码写的语义化,搜索引擎就会很容易的读懂该网页要表达的意思。例如文本模块要有大标 题,合理利用h1-h6,列表形式的代码使用ul或ol,重要的文字使用strong等等。总之就是要充分利用各种HTML标签完成他们本职的工作,当然 要兼容IE、火狐、Chrome等主流浏览器。
我们来看看著名的禅意花园网站(http://www.csszengarden.com/),在没有样式的情况下,代码非常语义化,看起来很工整,加载不同的样式之后可以随心所欲的改变页面外观。

利用布局,把重要内容HTML代码放在最前。

搜索引擎抓取HTML内容是从上到下,利用这一特点,可以让主要代码优先读取,广告等不重要代码放在下边。例如,在左栏和右栏的代码不变的情况下, 只需改一下样式,利用float:left;和float:right;就可以随意让两栏在展现上位置互换,这样就可以保证重要代码在最前,让爬虫最先抓 取。同样也适用于多栏的情况。

重要内容不要用JS输出。

蜘蛛不会读取JS里的内容,所以重要内容必须放在HTML里。

尽少使用iframe框架。

搜索引擎不会抓取到iframe里的内容,重要内容不要放在框架中。

为图片加上alt属性。

当网络速度很慢,或者图片地址失效的时候,就可以体现出alt属性的作用,他可以让用户在图片没有显示的时候知道这个图片的作用。

提升网站速度

尽量外链CSS和JS,保证网页代码的整洁,也有利于日后维护。

这样的好处是可以把内容、表现和行为分离开,保证代码整洁的同时也方便维护。

CSS放在文件头部,JS放在文件尾部,可使用工具对CSS和JS文件进行压缩。

CSS Sprites。

减少HTTP请求。利用CSS Sprites技术可以把网页用到的切片合成到一张图上,这样做既减少了HTTP请求数,又使得样式图片一次加载,避免网页“白”的尴尬。

为图片设置高度和宽度,可提高页面的加载速度。

为静态资源文件增加过期时间,让用户通过本地缓存来更快的访问网站。

减少大改版的频率。

压缩、格式化代码。

可以在上线前,使用一些工具,把HTML、CSS和JS都压缩、格式化一下,可以减少页面大小。

不使用CSS表达式,会影响效率。

使用CDN网络,可加快用户访问速度。

启用GZIP压缩,浏览速度变快,搜索引擎的蜘蛛抓取信息量也会增大。

善于利用浏览器插件。

例如火狐的YSlow就很有用,可以查看该页面代码、样式、JS、图片等加载情况,为进一步优化页面起到了指导作用。

伪静态设置。

如果是动态网页,可以开启伪静态功能,让蜘蛛“误以为”这是静态网页,因为静态网页比较合蜘蛛的胃口,如果url中带有关键词效果更好。
动态地址:
http://www.360.cn/index.php

伪静态地址:
http://www.360.cn/index.html

篇后语

不要耍小聪明,利用已掌握的技术想方设法欺骗搜索引擎,可能会在短时间内有明显的效果,排名提升等,但搜索引擎发现后会果断降权你的网页或直接封杀,得不偿失。

希望本文能让大家正确认识SEO,SEO要适度,网站还是要以“内容为王”,有好的内容网站才会有发展。

欢迎访问我的个人网站(www.tianlong.org),互相交流、学习。

时间: 2024-10-25 02:23:02

转载:浅谈前端与SEO的相关文章

浅谈前端性能优化(移动端)

上一篇讲了PC端的部分:前端性能优化(PC端),这次继续说移动端的.相对于PC端的,移动web浏览器上有一些明显的特点:设备的屏幕小.新特性兼容性较好.支持一些比较新的HTML5和CSS3.需要与Native应用交互等.但移动端可用的CPU资源和网络资源极为有限,因此要做好移动端web上的优化往往需要考虑做更多的事情.首先在移动web的前端页面渲染中,PC的优化规则同样适用,此外针对浏览器也要做一些更细节的优化达到更好的效果.需要注意的是,并不是移动端的优化在PC端不适用,而是由于兼容性的原因,

浅谈小网站SEO的几点建设方法

现在很多小企业也开始建站,那该怎样做好小企业的seo呢? 1.通过seo树立品牌 对于小企业来说,当然不能做到像大型企业一样品牌人人皆知.但是与其他同等小企业.竞争对手相比,如果能够在搜索引擎结果中表现良好,就可以树立 良好的形象.所谓"排名第一就是品牌",在搜索引擎中排名第一就能让客户感觉到企业是一个充满活力.办事认真.积极上进的组织,客户第一面就打上了良 好的印象分.排名第一带来的客户在互联网真是数不甚数.那么如何通过seo树立品牌呢?第一,要使自己的企业名.地区行业关键字排名第一

转载-浅谈Ddos攻击攻击与防御

EMail: jianxin#80sec.comSite: http://www.80sec.comDate: 2011-2-10From: http://www.80sec.com/ [ 目录 ]一 背景二 应急响应三 常见ddos攻击及防御四 根源及反击五 总结 一 背景 在前几天,我们运营的某网站遭受了一次ddos攻击,我们的网站是一个公益性质的网站,为各个厂商和白帽子之间搭建一个平台以传递安全问题等信息,我们并不清楚因为什么原因会遭遇这种无耻的攻击.因为我们本身并不从事这种类型的攻击,这

浅谈CDN、SEO、XSS、CSRF

CDN 什么是CDN 初学Web开发的时候,多多少少都会听过这个名词->CDN. CDN在我没接触之前,它给我的印象是用来优化网络请求的,我第一次用到CDN的时候是在找JS文件时.当时找不到相对应的JS文件下载地址(之前一般我都是把JS下载下来,然后在项目中引用的.PS:当然了,我觉得大部分初学者都一样) 找着找着发现了这个网站:http://www.bootcdn.cn/,发现它这个搜索引擎收录了很多的JS文件,直接在项目中引入它的地址就行了! 后来,在购买服务器的时候也发现了广告:CDN加速

2018 浅谈前端面试那些事

虽然今年没有换工作的打算 但为了跟上时代的脚步 还是忍不住整理了一份最新前端知识点 知识点汇总 1.HTML HTML5新特性,语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug,和一些定位写法css js放置位置和原因什么是渐进式渲染html模板语言meta viewport原理 2.CSS 盒模型,box-sizingCSS3新特性,伪类,伪元素,锚伪类CSS实现隐藏页面的方式如何实现水平居中和垂直居中.说说

浅谈前端开发行业背景

自从第一个网站在上个世纪 90 年代初诞生以来,早期的网页完全由文本构成,除了一些小图片和毫无布局可言的标题与段落.然而,时代在进步,接下来出现了表格布局,然后是 Flash,最后是基于 CSS 的网页设计.无可否认,前端页面重构技术也经历着这样的一个过程:table布局页面→DIV+CSS→HTML5+CSS3,seo面对众多的浏览器与平台,Web前端不再是以前那样简单的重复性工作.下面让我们对Web前端开发行业的发展有一个简短的认识. 回首Web前端开发的过去,1991 年 8 月,Tim

浅谈前端移动端页面开发(布局篇)

前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了.本以为自己对移动端的那一丢丢理解,结果很多东西都特么有问题,所以,今天停下了手中的一些东西,来谈下移动端的布局方案吧 内容有些长,这也是我第一次写博客,不足之处还请严厉指出 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的

浅谈前端开发工程师与美工的区别

一. 什么是美工?     美工:意为美术工程师(Art Engineer),一般出身于艺术美术院校的艺术设计专业居多.     根据工作性质美工一般分为平面美工.三维美工.网页美工三大类.     平面美工是由美工用Fireworks 或者 Photoshop 设计出平面外观.     三维美工是由美工用3DMAX等工具进行三维角色模型设计,道具模型设计,环境场景模型设计,包装设计等.     网页美工是美工用Dreamwerver等网页编辑软件把已经设计好的平面效果图,制做成HTML静态网页

浅谈前端SPA(单页面应用)

单页Web应用(single page web application,SPA): SPA 是一种特殊的 Web 应用,是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的.它将所有的活动局限于一个 Web 页面中,仅在该 Web 页面初始化时加载相应的 HTML . JavaScript . CSS .一旦页面加载完成, SPA 不会因为用户的操作而进行页面的重新加载或跳转,而是利用 JavaScript 动态的变换 HTML(采用的是 div 切换显示和隐藏),从而实现UI与用