[TOC] 良好的web设计和开发的一个重要部分就是SEO 。要想确保一个网页不仅能让搜索引擎合适地索引到，而且能让那些只有有限的web能力的人访问到，结构良好的代码是其中的关键。 ## 注意SEO最佳实践 * [打印媒体 CSS 的最佳实践](http://24ways.org/2007/back-to-the-future-of-print)。 * 站点/应用 符合 [浏览器分辨率指南](http://coderlmn.github.io/code-standards/#_browser_resolution) 。 * 站点/应用 兼容 [浏览器测试与支持](http://coderlmn.github.io/code-standards/#_browser_testing_and_support) 描述的浏览器需求。 * 注意可用性最佳实践，例如 508法规 和 WCAG 标准 * [http://www.section508.gov](http://www.section508.gov/) * [http://www.w3.org/TR/WCAG20/](http://www.w3.org/TR/WCAG20/). ## 易于索引 你必须使用语义化的标记，在关闭 Javascript 和 CSS 之后它仍然是可读和逻辑的。所有页面内容必须是HTML 形式；我们不希望使用iframe 或 Javascript 来加载初始的可索引内容。 所有链接都必须指向 HTML ~~~ <a href="/shelf/jordan/page/2"> ~~~ 而不是这种 ~~~ <a href="javascript:loadPage(2);"> ~~~ 这样既能被搜索引擎正确索引，也能让用户在新窗口或新标签中打开链接。 ## 优化 每个页面的 title 标签应该突出目标关键字。每个页面的 title 应该是独特的。标题（h1,h2,等等）应该构成文档的轮廓并代表该页面最重要的关键字。URL 应该是人类可读的，其中包含主要的目标关键字： ~~~ http://domain.com/mens-shoes/basketball/jordan/jordan-mens-ajf-6-basketball-shoe/ ~~~ **vs** ~~~ http:// domain.com/ecomm.cfm?view=prod&prodId=23425 ~~~ ## Flash和图片替换 总是为 flash 使用备选HTML 内容。所有广告促销图片应该使用基于 CSS 的替代图片而不仅仅设定 alt 属性。 >对不支持flash 版本的应变 ~~~ <a href="/nike/morethanagame/" id="morethan"> <h4>Nike: More Than A Game</h4> <h5>Experience the movement and view apparel</h5> </a> ~~~ ~~~ a#more than { background:url(/promos/nikegame.jpg) no-repeat; width: 200px; height: 100px; text-indent: -999px; overflow:hidden; display:block; } ~~~ ## Google 的 SEO报告卡 [Google 的 SEO报告卡](http://googlewebmastercentral.blogspot.com/2010/03/googles-seo-report-card.html) 是给 Google 的产品团队提供关于通过简单易接受的优化改进他们的产品页面的思路的一项措施。这些优化手段不仅仅是为了帮助搜索引擎更好地理解他们页面的内容，也是改进他们的用户体验。 访问他们的站点时，诸如修复404错误和无效链接、简化URL 选项、提供易于理解的标题以及页面摘录等简单的步骤，其实对用户和搜索引擎都是有利的。