标题(h1–h6)最头痛的事:平衡语义和搜索引擎优化

html语义化,是现在谈论得比较多的话题。那何谓html语义化,简单的说吧,就是要有良好的html结构,在剥离css后,依然能读懂一个页面的结构,能分清哪些是标题,哪些是内容。切忌不要用css让一个标签去表现另一个标签。

而在语义化的过程中,重点和难点在于h(x)标签,h(x)的语义是标题,一个语义良好的页面,h标签应该是完整有序没有断层的。也就是说,要h1,h2,h3,h4这样推下来,不要h1,h3,h4,漏掉h2。一个结构良好的网页,h标签可以组织起一个网页的大纲。

Web内容可访问性指南(WCAG)里提到了这方面的内容:

[I]n HTML, H2 elements should follow H1 elements, H3 elements should follow H2 elements, etc. Content developers should not “skip” levels (e.g., H1 directly to H3).

对于h1标签,一般一个网页只有一个,而h2–h6,一个网页可以有多个。就像一篇文章,只有一个标题,但可以有很多子标题或副标题。

而h1的使用,对于很多人很困惑。一个页面只能出现1次h1, 那对于网站来说,h1是用于网站名称呢还是文章标题?

正确的做法是:对于首页,h1用于网站名称,对于其他页面,h1用于相应的栏目标题或文章标题。而在非首页,网站名称推荐用<div>,<strong>,<h2>等标签。

具体做法,可以参考wordpress3.0 + 版本,在wordpress3.0以前的版本,h1在整个网站中都是用于网站名称,而在wordpress3.0以后的版本,已经修复了这个问题。

关于(hx)标题标签的使用建议:

  • 对于任何可能或“感觉”像是标题的内容,使用hx标签。
  • 一个页面只用一个h1标签,并把它做为文档、文章、页面的主题,而不是用于网站名称或logo。
  • 如果页面的某个模块属于标题,那可根据页面结构使用h2–h6标签,但不要“跳级”。例:尽量不要h1之后就直接用h3,而跳过h2标签。

例子:一个典型的3栏结构的页面,W3C建议的结构(本例来源:http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H42

<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

扩展阅读(E文哦):

手把手教你优化wordpress,提高博客排名

这里主要是针对wordpress的seo站内优化设置。参考了很多搜索引擎优化的文章,感觉这篇文章写得很全面。

目录:

  1. 基础技术优化:简单、高效
    1. 永久链接
    2. 优化标题
    3. 优化描述
    4. 优化More标记
    5. 优化图片
  2. 主题优化
    1. 页面导航
    2. 标题级别
    3. 整理你的代码
    4. 一切只为速度
    5. 反思侧边栏
  3. 进阶优化及: 重复内容
    1. 不收录,仅爬行存档页面
    2. 禁用不必要的存档页面
    3. 关于Wordpress的翻页
    4. 禁止爬行不必要的链接
  4. 调整结构获取更好的排名
    1. 用页面替代文章
    2. 旧瓶装新酒: 让已经获得好排名的文章排名更好
    3. 链接到相关文章
  5. 深度优化: 让这些读者订阅你的文章
  6. 评论优化: 让读者尽情参与
    1. 怎样让读者发表评论
    2. 让读者产生共鸣
    3. 保持交流互动
  7. 优化以外的事情
    1. 紧随评论者
    2. 使用Twitter
    3. 寻找相关博客并和他们建立联系
  8. 结论

原文链接:http://seosem.ws/seo/wordpress-seo-the-definitive-guide/

    2个自动生成进度条(loading)图片的网站

    免费在线生成网站进度条,提供了目前流行的loading 图片和样式,并且能够配置颜色和大小,还能在线预览。设置好后可以直接下载到本地。相当不错,省下很多做进度条的功夫。使用也很简单明了,一看就会。

    1、http://ajaxload.info/#preview

    2、http://preloaders.net/

    JavaScript单元测试框架介绍

    • FireUnit

    介绍:这个是John Resig另起炉灶做的,在他的博客John Resig – FireUnit: JavaScript Unit Testing Extension,发布了他与Jan Odvarko合作开发的基于Firebug的扩展FireUnit。
    简单说来,FireUnit给Firebug增加了一个标签面板,并提供了一些简单的JavaScript API来记录和查看测试。参考:http://shawphy.com/2008/12/fireunit.html
    评价:FireUnit在易用性上表现非常出众,非常适合基于Firebug做调试环境的前端工程师。

    • QUnit

    介绍:QUnit 是一款强大而且容易使用的JavaScript 测试框架,它被用于jQuery 与其插件的测试,同时它也同样可以测试普通的JavaScript 代码。参考:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

    评价:QUnit是一款易用的,基于jQuery的测试框架,如果项目中用到jquery,推荐用QUnit做单元测试。

    • jsUnit

    介绍:系统化的解决方案,基于XNuit规范,如果你会使用jUnit、NUnit等框架,对这个应该会很容易上手,且包括服务器端(Java的)。参考:http://www.jsunit.net/

    评价:非常全面,专业,适合大型企业级开发。

    • Test.Simple & Test.More

    介绍:这个是jQuery之父John Resig在他的著作《Pro Javascript》中推荐的测试框架

    参考:http://openjsan.org/doc/t/th/theory/Test/Simple/0.21/lib/Test/Simple.html
    评价:非常容易上手,非常简洁,适合中小型项目快速引入单元测试。

    总结:推荐使用Qunit和FireUnit。

    2010年《时代》杂志评出的最好的50个网站

    《时代》每年都会评选当年度的最佳的50网站,前两天也评选出了本年度的最佳的50个网站。

    这次评选出的最佳网站分为十个大类,分别为:分10大类别,分别为音乐视频、体育、家庭亲子、新闻资讯、金融、购物旅行、健康健身、社会化媒体、游戏和教育。简要添加了各个网站的介绍。

    音乐视频(Music & Video)

    • Vimeo:视频分享网站,很喜欢其网站风格。
    • Movieclips:根据分类和关键词,最快找到你中意的影片片段,还可以很方便地自己编辑片段进行MashUP。
    • Grooveshark:Grooveshark是一个在线音乐分享社区,基于 DRM(数字版权管理,Digital Rights Management)免费的 Mp3的 p2p 分享网络。你可以创建或者导入自己的音乐列表,分享自己的音乐列表,加入组群,分享音乐并且得到一定的回报。详细介绍
    • MOG:在线音乐订阅服务,具有在线预览功能,价格相比于Spotify,订阅价格也更便宜。
    • Labuat:基于FLASH的用户交互式音乐视频网站。

    体育(Sports)

    家庭亲子(Family & Kids)

    • Design Mom:妈妈设计师,没太理解这个网站做啥的。
    • Serious Eats:各种的美味食谱,视频和博客内容。
    • Babble:涵盖从确认怀孕到宝宝进入青春期之前的各种育儿技巧。
    • Etsy:一个工艺品电子商务网站。
    • Sesame Street:是美国一套著名的幼儿教育电视节目,内容结合了教育和娱乐。

    新闻资讯(News & Info)

    • Guardian:《卫报》
    • The Onion:一个擅长对时事进行讽刺嘲讽的媒体。
    • The Daily Beast:—
    • National Geographic:《国家地理》
    • WikiLeaks:WikiLeaks是一个小型的在线信息文件资源,它的信息是全世界的政府组织都要保密的信息。这个网站允许人们匿名邮递文件

    金融(Financial & Productivity)

    • Mint:在线理财服务网站,可以管理银行卡和信用卡等。
    • Wikinvest:一个热门股投资wiki站点,Wikinvest网站用户会替股票图表附上批注,说明股价的高低点,简介上市公司的经营概况,并发表买进或是出脱的建议。
    • StockMapper:使用其可以让你对数据一目了然,它不仅提供所有股票的数据图表,并且还根据它们的相对市场表现,使用所谓的热图效果给它们标记不同的颜色。
    • Springpad:一个收集和管理任务、网络记事和事件的在线记事簿。
    • Wakerupper:用户安排好自己的行程后,WakerUpper会在指定的时间打电话进行提醒。

    购物旅行(Shopping & Travel)

    • Groupon:目前火爆的团购网站的鼻祖站
    • Gilt Groupe:美国奢侈品购物网站。
    • Rent the Runway:是一个能够相当方便地出租高级服饰的网站。
    • Stay:—
    • SeatGuru:一个在线选择飞机座位的服务。

    健康健身(Health & Fitness)

    • Keas:一个关注用户健康数据,并且提供个性化健康建议的网站。
    • Mayo Clinic:梅约临床和医疗中心的专家们分享健康经验的网站。
    • Walk Jog Run:通过一个iPhone应用监控跑步情况。
    • Exercise TV:一个关于健身锻炼的视频网站。
    • Fit by Fun:通过简单的健美操游戏达到健身的效果。

    社会化媒体(Social Media)

    • Gowalla:基于地理位置的服务,同类服务有Foursquare等。更多LBS服务
    • Foodspotting:基于地理位置的服务,主要以餐厅点评为主
    • LinkedIn:一个社会化网络社区,更多的是为商业用户拓展和管理人脉的用途
    • StockTwits:基于twitter的金融产品,自动跟踪每支股票的动态
    • Tumblr:介于博客微博之间的一款产品,说实话新浪微薄何其很像。

    游戏(Games)

    • Kongregate:收集各类在线游戏的站点。
    • Cactus Squid:Arcade风格的游戏。
    • Pogo:各类经典小游戏收集站。
    • Newgrounds:允许用户自己上传游戏的站点。
    • Games.com:各类休闲小游戏。

    教育(Education)

    • Livemocha:提供了30种不同语言的的指导训练和练习的在线网络社区。
    • Chegg:专业的二手教科书出租网站,租赁时间长达一学期。
    • MIT OpenCourseWare:麻省理工大学开放式课程。
    • Read Print:一个收录在线免费图书的网站。
    • TEDTED(指technology, entertainment, design在英语中的缩写,即技术、娱乐、设计)是美国的一家私有非营利机构,该机构以它组织的TED大会著称。TED网站主要展示TED大会的各类演讲内容。

    相关阅读推荐:

    原文链接:50 Best Websites 2010

    加快您的网站的最佳实践(Best Practices for Speeding Up Your Web Site)

    Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。
    Excetional Performance团队总结出了一系列可以提高网站速度的方法。可以分为7大类34条。包括内容、服务器、cookie、CSS、JavaScript、图片、移动应用等七部分。
    其中内容部分一共十条建议:
    一、内容部分
    1.尽量减少HTTP请求
    2. 减少DNS查找
    3. 避免跳转
    4. 缓存Ajxa
    5. 推迟加载
    6. 提前加载
    7. 减少DOM元素数量
    8. 用域名划分页面内容
    9. 使frame数量最少
    10. 避免404错误

    详细内容可下载附件的pdf文件中文版。也可看原文。

    原文:http://developer.yahoo.com/performance/rules.html

    中文文档下载:performance-rules-web-site.pdf

    其他相关文章:

    http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/

    Jquery实现广告弹窗(背投),绕过所有浏览器拦截

    PopUpAdClass = { };
    PopUpAdClass = new function() {
     // Private fields
     var that = this;
     var windowHandles = {};
     var isChrome = /chrome/.test(navigator.userAgent.toLowerCase());
    
     // Public Members
     this.focus = function(windowHandle) {
     if (!windowHandle) {
     throw new Exception("Window handle can not be null.");
     }
    
     if (isChrome) {
     windowHandle.blur();
     setTimeout(windowHandle.focus, 0);;
     }
     else {
     windowHandle.focus();
     }
     }
    
     this.windowExists = function(windowTarget) {
     return windowTarget &amp;&amp; windowHandles[windowTarget] &amp;&amp; !windowHandles[windowTarget].closed;
     }
    
     this.open = function(url, windowTarget, windowProperties) {
     // See if we have a window handle and if it's closed or not.
     if (that.windowExists(windowTarget)) {
    
     // We still have our window object so let's check if the URLs is the same as the one we're trying to load.
     var currentLocation = windowHandles[windowTarget].location;
    
     if (
     (
     /^http(?:s?):/.test(url) &amp;&amp; currentLocation.href !== url
     )
     ||
     (
     // This check is required because the URL might be the same, but absolute,
     // e.g. /Default.aspx ... instead of http://localhost/Default.aspx ...
     !/^http(?:s?):/.test(url) &amp;&amp;
     (currentLocation.pathname + currentLocation.search + currentLocation.hash) !== url
     )
     ) {
     // Not the same URL, so load the new one.
     windowHandles[windowTarget].location = url;
     }
    
     // Give focus to the window. This works in IE 6/7/8, FireFox, Safari but not Chrome.
     // Well in Chrome it works the first time, but subsequent focus attempts fail,. I believe this is a security feature in Chrome to avoid annoying popups.
     that.focus(windowHandles[windowTarget]);
     }
     else {
     // Need to do this so that tabbed browsers (pretty much all browsers except IE6) actually open a new window
     // as opposed to a tab. By specifying at least one window property, we're guaranteed to have a new window created instead
     // of a tab.
     //windowProperties = windowProperties || 'menubar=yes,location=yes,width=700, height=400, scrollbars=yes, resizable= yes';
     windowProperties = windowProperties || 'menubar=yes,location=yes,width=' + (screen.availWidth - 15) + ', height=' + (screen.availHeight - 140) + ', scrollbars=yes, resizable= yes';
     windowTarget = windowTarget || "_blank";
    
     // Create a new window.
     var windowHandle = windowProperties ? window.open(url, windowTarget, windowProperties) : window.open(url, windowTarget);
    
     if (null === windowHandle || !windowHandle) {
     alert("You have a popup blocker enabled. Please allow popups for " + location.protocol + "//" + location.host);
     }
     else {
     if ("_blank" !== windowTarget) {
     // Store the window handle for reuse if a handle was specified.
     windowHandles[windowTarget] = windowHandle;
     windowHandles[windowTarget].focus();
     }
     }
     }
     }
    }
    
    调用
    $(document).click(function(){
    		PopUpAdClass.open("http://www.ghugo.com/popup.html",'_blank');
    //这个是背投功能,popup 弹出来来或马上失去焦点,最大限度的兼顾用户体验。
    		PopUpAdClass.focus(window);
    //popup一次就好啦,整天弹会让人反感滴。
    		$(document).unbind("click");
    	})
    

    扩展阅读:
    http://stackoverflow.com/questions/2758608/window-focus-not-working-in-google-chrome
    http://www.planabc.net/2008/03/05/ad_back_pop/
    http://www.cnblogs.com/birdshome/archive/2007/12/22/window-open.html

    JavaScript的constructor属性与typeof函数的区别

    有时你可能需要对变量进行类型检查,或者判断变量是否已定义。有两种方法可以使用:typeof函数与constructor属性

    typeof函数的用法可能不用我多说,大家都知道怎么用。而constructor属性大家可能就陌生点。在《精通JavaScript》与《JavaScript 语言精粹》里都有提到construct的用法,但我用自己的几个浏览器(IE7.0 / Firefox3.6.8 / Opera)测试的结果却和书上说的不一样。但是仍然是有办法通过constructor属性来检查变量类型的。

    这里先补充一下,为什么明明有typeof函数可以很方便地用来检测类型,还要用constructor呢?

    因为typeof会把所有的数组类型以及用户自定义类型判断为object,从而无法知道更确切的信息。而constructor却可以解决这个问题。

    ok,明白了我们为什么要用constructor,现在让我带大家一步步认识一下typeof和constructor用法之间的差异吧~

    首先我们运行一下下面这段代码:
    1 var i;
    2 alert(typeof(i));  //”undefined”
    3 alert(i.constructor); //error

    这3行代码告诉你什么情况下可以用constructor。

    你可以看到第2行返回了字符串’undefined’,而第三行则发生了错误,原因是i变量还没有类型定义,自然也没有constructor的存在。

    从这一点上看,typeof可以检查到变量是否有定义,而construct只能检查已定义变量的类型。

    再运行一下下面这段代码:
    1 var i = 2;
    2 alert(typeof(i)); //”number”
    3 alert(i.constructor); //
    4 alert(typeof(i.constructor)); //”function”
     
    你会看到第2行返回了字符串’number’,第3行返回了一串类似函数定义的代码字符串(这就是跟《精通JavaScript》一书中介绍的不一样的地方)。

    我们再用typeof检查一下constructor到底是个什么样类型的属性,第4行返回结果’function’,也就是说,实际上constructor是一个函数,更确切地说是一个构造函数。这时你就可以知道,为什么constructor可以检查出各种类型了。

    有经验的程序员看到这里应该知道要怎么利用constructor来检查变量类型了。方法有多种,这里提供一种比较容易理解的方法。

    其实想法很简单,就是把construcor转化为字符串,通过寻找匹配字符串(function名)来确定是否指定类型。如下例子:
    1 function user() {};
    2 var i = new user();
    3 alert((i.constructor+”).match(/user/) == null);
     
    这仅仅是个简单的例子。如果返回true则变量i不是user类型,返回false则变量是user类型。

    当然,这样检测是不够精确的,比如其实他是一个myuser类型的时候,同样会被认为是user类。所以你需要书写更精确的正则表达式去进行匹配。

    可以这样简单改进你的正则表达式:
    /function user\(\)/
    替换上面代码段中的/user/。当然,如果你的构造函数原型是user(a),那么应该这样书写你的正则表达式:
    /function user\(a\)/
     
    到这里你应该知道怎样使用constructor类型去检查变量类型了吧?

    ok,最后再提个醒,如果你要用基于constructor的方法去检查一些基本类型,如

    Object / Array / Function / String / Number / Boolean

    在你的正则表达式中,一定要将这些单词的首字母大写!!而如果该类型是自定义类型,则根据你定义的时候标识符的写法确定。

    最后再给个官方例子:

    <script type="text/javascript">
    var test=new Date()
    if (test.constructor==Array)
    {document.write("This is an Array")}
    if (test.constructor==Boolean)
    {document.write("This is a Boolean")}
    if (test.constructor==Date)
    {document.write("This is a Date")}
    if (test.constructor==String)
    {document.write("This is a String")}
    </script>
    输出在结果:
    
    This is a Date

    CSS强制换行和CSS强制不换行

    强制不换行
    p.www_ghugo_com {
    white-space:nowrap;
    }
    自动换行
    p.www_ghugo_com {
    word-wrap: break-word;
    word-break: normal;
    }
    强制英文单词断行
    p.www_ghugo_com {
    word-break:break-all;
    }

    CSS设置不换行:

    overflow:hidden 溢出隐藏
    white-space:nowrap 不换行
    pre 换行和其他空白字符都将受到保护
    nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象

    CSS设置强制换行:

    word-break:break-all 强制断开实现转行
    normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
    break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
    设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用break-all 。

    关于html中的rel、rev属性

    目前的 html的语意还不够丰富,它所能表达的无非是段落(p),链接(a),引用(blockquote)等。这些仅仅是文学上语意,而不是人们需要表达的真正内容。 真正内容可以是地址、事件、人物等拥有实际意义的信息。然而html并没有将这些实体标准化。

    另人可喜的是html5 正在朝着html语义化的方向发展。而我们国内,也正在从几年前讨论DIV+CSS上升到Html语义化,CSS模块化上。这说明web前端一直在发展,虽然我接触web开发没多少年,但这种变化,我是深刻体会到的。

    言归正传,正是由于html标签的疲乏,所能表达的语义不够。所以,出现了Microformats这一技术。其实,确切的说Microformats并不是一种新技术,它的实质只是Markup language(HTML、XHTML)的一小段代码和一小段特定的Web内容,所谓formats指的是它有一种固定的标记格式。

    rel、rev这2个属性,则是为了丰富网页语义而设计的。更确切的说,rel,rev这2个属性,是为了更明确的告诉搜索引擎网页的内容,更好的指引搜索引擎去理解你的网站内容。这对SEO有一定的作用。

    区别:rel与rev具有互补的作用,rel指定了向前链接的关系,rev指定了反向链接的关系.

    rel 属性 — rel属性,描述了当前页面与href所指定文档的关系.

    * rel属性通常出现在a,link标签中
    * 属性值
    o alternate — 定义交替出现的链接
    o appendix — 定义文档的附加信息
    o bookmark — 书签
    o chapter — 当前文档的章节
    o contents
    o copyright — 当前文档的版权
    o glossary — 词汇
    o help — 链接帮助信息
    o index — 当前文档的索引
    o next — 记录文档的下一页.(浏览器可以提前加载此页)
    o nofollow — 不被用于计算PageRank
    o prev — 记录文档的上一页.(定义浏览器的后退键)
    o section — 作为文档的一部分
    o start — 通知搜索引擎,文档的开始
    o stylesheet — 定义一个外部加载的样式表
    o subsection — 作为文档的一小部分
    * rel是relationship的英文缩写

    =================================

    rev 属性 — rev属性,描述了href所指定文档与当前页面的关系.

    * rev属性通常出现在a,link标签中
    * 属性值
    o alternate — 定义交替出现的链接
    o appendix — 定义文档的附加信息
    o bookmark — 书签
    o chapter — 当前文档的章节
    o contents
    o copyright — 当前文档的版权
    o glossary — 词汇
    o help — 链接帮助信息
    o index — 当前文档的索引
    o next — 记录文档的下一页.(浏览器可以提前加载此页)
    o nofollow — 不被用于计算PageRank
    o prev — 记录文档的上一页.(定义浏览器的后退键)
    o section — 作为文档的一部分
    o start — 通知搜索引擎,文档的开始
    o stylesheet — 定义一个外部加载的样式表
    o subsection — 作为文档的一小部分