[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 選項、提供易于理解的標題以及頁面摘錄等簡單的步驟，其實對用戶和搜索引擎都是有利的。