我爱骡:网站前端开发设计中的SEO技巧

  在进行网站前端开发设计的时候,如何做到用户与SEO兼得,是每个站长都要考虑的问题,很多时候要做到确实不易,下面整理几个小技巧,大家可以看下。

  一、文字替换图片

  这种手法在LOGO的处理上最为常见,很多时候人们会把首页的LOGO加上<H1>标签,可是<H1>标签里如果没有文字的话,效果肯定不好,因此很多人会在logo上加上alt描述,但是肯定还是没有直接文字或者锚文本来的效果好,这个时候我们就需要用到这个技巧了,我们来看一下一般人的做法:


<h1 class="main-logo">

<a href="#">

<img src="images/header-image.jpg" alt="淘客站长网" />

</a>

</h1>

  下面我们来看下如何运用CSS实现文字替换图片:


<h1 id="tk">

<span>淘客站长网</span>

</h1>

  下面是CSS代码:


h1#tk {

width: 250px;

height: 25px;

background-image: url(logo.gif);

}

  通过这种方法,我们就可以很好的兼顾用户体验和SEO。

  二、文章列表字数截取问题

我爱骡:网站前端开发设计中的SEO技巧

  这是所有网站都会遇到的问题,如上图所示,文章列表如果字数太多,就会分成两排或者把列表挤变形,这个时候就需要截取标题的字数,这样一来对SEO是很不利的,这个时候我们可以用CSS来控制,不截取字数,但是显示的依然是截取字数的,这样一来,在美观及SEO上都能兼顾到。

  我们来看下网页代码:

<div class="list">
<ul>
<li><a href="#">多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发</a><span>2010-03-14</span></li>
<li><a href="#">315个JS广告代码和269个特效</a><span>2010-03-14</span></li>
<li><a href="#">SNS网多个启发灵感页面网站设计多个启发多个启发灵感页面网站设计多个启发站</a><span>2010-03-14</span></li>
<li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li>
<li><a href="#">谷歌评估必应搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">谷歌评估必应搜索算法谷歌评估必应搜索算法</a><span>2010-03-14</span></li>
<li><a href="#">汉王创艺高手+无线0604数位板…</a><span>2010-03-14</span></li>
<li><a href="#">跨过后台开发的那道槛</a><span>2010-03-14</span></li>
<li><a href="#">09年国外100大最佳设计博客网站</a><span>2010-03-14</span></li>
<li><a href="#">阿里巴巴推商人</a><span>2010-03-14</span></li>
</ul>
</div>

  再来看下CSS代码:

body{
padding:2em;
font-size:12px;
font-family:"SimSun";
}
.list{
width:300px;
}
.list ul{
margin:0;
padding:0 0 0 30px;
list-style:none;
background:url(http://blog.owncsser.com/wp-content/uploads/2009/08/bg_li.gif) 8px 5px no-repeat;
float:left;
}
.list ul li{
clear: both;
float:left;
width:100%;
height:20px;
}
.list ul li a{
float:left;
margin-right:60px;
padding-right:10px;
height:20px;
line-height:20px;
overflow:hidden;
}
.list ul li span{
float:left;
margin-left:-60px;
width:60px;
height:20px;
font:11px/20px "Times New Roman", Times, serif;
color:#ccc;
}

  再来看下显示效果:

我爱骡:网站前端开发设计中的SEO技巧

  可以看出,标题中多余的字数已经没有显示出来了,而html代码中的标题却很完整。

  三、用CSS来控制网页的布局

  大家都知道在一个网页中,越重要的东西越靠前越好,而在实际的网页设计中,有的时候因为考虑到用户体验而不得不把重要的内容放到后面,其实,我们还是把重要性强的内容靠前,次要的东西放置靠后一些,然后用CSS来定位实际显示的位置。

我爱骡:网站前端开发设计中的SEO技巧

  上下布局:

点击复制链接 与好友分享!回本站首页
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力
上一篇:网站排名百度11位现象的拯救办法
下一篇:让人欢喜让人忧的百度排名恢复浅谈
相关文章
图文推荐
我爱骡:网站前端开发设计中的SEO技巧
seo年终总结你做了吗
我爱骡:网站前端开发设计中的SEO技巧
浅谈:如何打造高质量
我爱骡:网站前端开发设计中的SEO技巧
月入万元的SEO优化师
影响网站权重的因素有

分类:默认分类 时间:2012-01-03 人气:10
本文关键词:
分享到:

相关文章

  • SEO必备数据分析(二):现有排序的数据对比 2012-01-01

      知己知彼方能百战不殆,这句话应用在SEO排名也非常的恰当。我们做SEO排名不能老跟着竞争对手屁股后面走,这样我们的排名会遥遥无期。分析现有排名数据是每个SEO朋友必须具备的技能,分析出竞争对手没有满足的,而用户真正需要的东西,这样用户才会爱上我们的,度娘也会对我们心动的,我们的排名也会随之上来。   上一篇东东SEO在A5投稿更新了【SEO必备数据分析(一):下拉和相关搜索 】,得到了不少的大拇指,这说明更新的内容是对大家有所帮助的,案例网站【石家庄绿居装修公司】,也通过上篇的内容进行了调整

  • 谈个人SEO从业者的如何利用SEO服务创业 2012-01-01

      大家好,我是老男孩SEO工作室的石头。几乎所有的SEO从业者都有自己的创业梦,不管是因为什么原因,有梦想有目标总是好的。但真正付诸行动的人 比较少,这也许就是成功者与失败者的根本原因,石头曾经在马云的视频演讲中听过这么一句话,具体原话我记不清了反正大概是个意思:许多年轻人都是晚上想法 千千万万,早上醒来走原路,一点就没有改变。对于一个SEO从业者来说何尝不想有自己的一个工作室,甚至是网络公司,当然一个城市本地有许多网络公司,而 现在的业务范围主要都是企业建站、企业站优化,本来一块蛋糕就不大,

  • 从SEO优化策略看SEOer为啥没有女人缘 2012-01-01

      SEOer没有女人缘,这点人尽皆知,通过在100个QQ群内的无数次交流,我发现无论男女,做SEO的一般都是单身。当然这不能怪SEOer没有个性,不讨妹纸欢心,工作环境能改变一个人对生活的态度,下面我们就来看看,作为SEOer,你是否把工作中的理解带回了现实中呐?   1. 不注重表面设计 。一个网站的好坏,不是指你的排名有多么好,你就算把优化做到天上去,别人一进你的首页发现界面设计和“屎”一样,那还不是马上点右上小叉叉吗。这和追妹子一样,上来你扯关键词排名,结果好不容易把姓王的追求者都挤到了

  • 张方文:SEO之用户搜索习惯与人工智能化搜索 2012-01-02

      搜索引擎从发展至今,在各方面都有了质的飞跃和突破。但是搜索引擎一直还有有好多问题都没办法解决,seoer们知道吗?无论是数据储存处理还是数据释放的时效性问题,都是每一家搜索引擎公司一直在努力研究和完善的项目(这些都是正在进行的项目)。其实“用户搜索习惯”与“人工智能化搜索”是搜索引擎公司一直想实施却束手无策的项目。   其实网站的排名是和用户对网站的粘性度有直接关系的,也可以这样说,网站的pv很高,跳出率很低,是维持排名最好的方法。很多黑帽seoer认为靠买链接,或者群发把排名做上来的网站排

  • 解析美丽说网站的SEO优化推广策略 2012-01-02

      淘宝客是指通过互联网帮助淘宝卖家推广商品,并按照成交金额获得佣金的人或者集体。他们在淘宝联盟中找到卖家发布的产品,并且推广出去,当有买家通过自己的推广链接成交后,那么就能够赚到卖家所提供的佣金。   而对于众多的草根淘宝客来说,美丽说可以说是淘宝客的一个传奇了。在这个淘宝客逐渐衰退的趋势下,美丽说却能迎难而上,达成百度权8,成为国内最大的淘宝客网站之一。那么美丽说网站的SEO效果为什么能够在短短三年时间达到这样的程度呢?在此笔者跟大家深入解析一下美丽说网站SEO优化推广策略:   一、美丽说

  • 走向SEO工作高度 快速实效SEO八个步骤 2012-01-02

      做SEO也需要做更多的努力,不仅仅是找友情链接,到处去发帖就行的,成功的站长总 是从一定的高度去从事SEO工作,而不仅仅做那些每个站长都会做的复制、粘贴、再发帖。   1. 熟悉网页代码(HTML,JS等)搜索引擎蜘蛛是直接爬行网页代码来获取信息的。你对网页修改的目的也就是为了让蜘蛛能够毫不费力地顺利爬行完页面,并获 取你想让它获取的关键信息!当然你没有办法控制搜索引擎,但你有办法改变网页。网站排名优化www.jingtian.org.cn熟悉网页代码HTML 的编写(其中包含了Title、

  • 学习seo的步骤及方法 2012-01-03

      要学习seo,首先你要了解seo是什么:seo即是搜索引擎优化(Search Engine Optimization,简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。   它的操作包括两个方面,1.理论2.实践。   如果把它细分大致可以分为6个大类:   1.搜索引擎   搜索引擎的了解研究是学习seo的入门!通过搜索引擎的研究我们知道了搜索引擎对排名有什么要求,搜索引擎的排名因素及搜索引擎工作原理!   2.关键词!   关键词的选取决定于网站的内容!

  • SEO原创之路:如何为用户提供有价值的信息 2012-01-03

      昨天,小鱼儿分享了一篇文章《百度搜索“SEO”出现日本网站的一点思考》。今早,通过百度直接搜索原文章标题,小鱼儿感到非常欣慰,不少朋友关注并分享了小鱼儿的劳动成果。   小鱼儿就逐个点击查看了一下,发现:有的朋友带上了小鱼儿文章带的版权声明(在此表示感谢);当然也有朋友删除了链接;更有一些同学,将标题以及内容进行修改伪原创后进行发布了。对此,小鱼儿不发表什么言论,毕竟俗话说的好“林子大了,什么鸟都用”呵呵!开个玩笑,不带任何讽刺言论。   但正是因为这些不同的做法,让小鱼儿再度思考,百度最近

  • SEOer从技术员到主管:放下你那可笑的高傲 2012-01-03

      这是一个80后SEOer对90后SEOer的一些理解,也是一个80SEOer对80后SEOer的一些忠告。马云辞职的时候说,要将更多的机会留给70后的80后,那么,80后的你们,是否准备好了呢?   收起你不知从何而来的优越感   即使你比他们年长,即使你经验比他们丰厚,即使你技术比他们高超,即使你人生的阅历比他们丰富,这都不能成为你对他们产生优越感的理由。人都有自己的优点和缺点,你的优势人家未必如你,你的劣势人家未必输与你,你的技术你的经验你的阅历都是可以通过时间来弥补的,即使他们现在青涩

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.065 (s). 10 q(s)