SEO
一直以來，搜索引擎優(yōu)化（SEO）是開發(fā)者容易忽略的部分。SEO是針對搜索（Google、百度、雅虎搜索等）在技術細節(jié)上的優(yōu)化，例如語義、搜索關鍵詞與內容相關性、收錄量、搜索排名等。SEO也是同行、市場競爭常用的的營銷手段。Google、百度的搜索結果是重要的用戶入口，騰訊云（www.qcloud.com）有30%左右的流量來自搜索引擎。因此SEO在品牌、營銷、用戶量的緯度是非常重要的基礎能力。
那么單頁應用與傳統(tǒng)直出頁面在SEO方面有哪些不同之處呢？
單頁應用的優(yōu)點
更好的用戶體驗，讓用戶在web感受natvie的速度和流暢；
經典MVC開發(fā)模式，前后端各負其責。
一套Server API，多端使用（web、移動APP等）
重前端，業(yè)務邏輯全部在本地操作，數據都需要通過AJAX同步、提交；
對搜索引擎不友好
單頁應用實際是把視圖（View）渲染從Server交給瀏覽器，Server只提供JSON格式數據，視圖和內容都是通過本地JavaScript來組織和渲染。而搜索搜索引擎抓取的內容，需要有完整的HTML和內容，單頁應用架構的站點，并不能很好的支持搜索。
如果站點在用戶體驗和搜索友好權衡時，如果我們做到更好的體驗，也做到友好的搜索支持，既是一箭雙雕。
URL中的哈希（#號）
單頁應用只有一個頁面，視圖的變化通常是通過路由（route）來驅動，首先，我們先來談一談單頁應用的URL中的#號，很多采用單元結構王皓咱的URL都出現了這個符號。
#號在瀏覽器的URL中是一個錨點，在當前頁改變#號的參數，頁面會跳轉到錨點所在的位置，通過JavaScript我們可以獲取到#號后的參數：
location.hash // 獲取URL hash
location.hash = "#list" //改變URL hash
改變#號后的參數，頁面并不會重載，于是大多數的單頁架構網站，都在URL中采用#號來作為當前視圖的URL地址，例如：
example.com/#index //首頁視圖
example.com/#list //列表頁視圖
example.com/#list/1 //id為1的列表信息的視圖
Backbone.js就是通過改變#號參數來組織視圖，這里有一個demo可以很直觀的體驗URL的變化。
看過這個demo，你獲取會發(fā)現很熟悉的符號#!，Twitter曾在URL使用這個標識。這個標識是Google提出。（AJAX 抓取：網站站長和開發(fā)人員指南1：
因為復雜的單頁架構頁面，對Google來說抓取比較困難，于是給開發(fā)者制定一個規(guī)范：
1、網站提交sitemap給Google；
2、Google發(fā)現URL里有#!符號，例如example.com/#!/detail/1，于是Google開始抓取
example.com/?_escaped_fragment_=/detail/1；
_escaped_fragment_這個參數是Google指定的命名，如果開發(fā)者希望把網站內容提交給Google，就必須通過這個參數生成靜態(tài)頁面。
根據上面的demo，我簡單示例一下Google要抓取的頁面的樣子:
http://119.28.4.22/?escapedfragment_=/detail/1
如此以來，就需要Server通過生成靜態(tài)的內容以便Google抓取。
以下將簡單介紹，單頁架構，爬蟲訪問根目錄時如果配置Server端的路由。
判斷爬蟲
當Google訪問
119.28.4.22/#!/detail/1
時，會自動轉化成
http://119.28.4.22/?_escaped_fragment_=/detail/1
以Nginx為例：
if ($args ~ _escaped_fragment_) {
rewrite ^ /api;
}
/api為后臺服務的接口，已nodejs為例，代理設置如下：
upstream nodejs {
server 127.0.0.1:3000;
}
location /api {
proxy_set_header X-Request-URI $request_uri;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $
host;
proxy_set_header Port $server_port;
proxy_pass http://nodejs;
proxy_redirect off;
}
如此，我們便將Google的訪問重寫到
/api
這個接口，然后在Server的
/api
處理請求把靜態(tài)內容輸出即可。
sitemap
Gogole的這個規(guī)范，必須有sitemap支持，因為有可能單頁架構的站點，索引頁面也是JavaScript渲染的。提交sitemap時，不用關注_escaped_fragment_這個參數名，只提交帶哈希符號的URL即可，例如：
http://119.28.4.22/#!/detail/1
weekly
0.5
結語
技術潮流的步伐很快，單頁應用，URL哈希處理也沒渲染的方式實際上已經流行了很久，在國外很多用戶數據較好的情況下，開發(fā)者會選擇HTML5 History API的pushstate特性開發(fā)，在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶情況較多的網站，#能夠很好的兼容。
