建站優(yōu)化

Website development

談?wù)勗O(shè)計(jì)和seo

發(fā)布時(shí)間：2014-09-26 10:51:19

TAGS：

單頁優(yōu)化單頁應(yīng)用 SEO 用戶體驗(yàn) 搜索引擎優(yōu)化

單頁應(yīng)用（Single Page Application）越來越受web開發(fā)者歡迎，單頁應(yīng)用的體驗(yàn)可以模擬原生應(yīng)用，一次開發(fā)，多端兼容單頁應(yīng)用并不是一個(gè)全新發(fā)明的技術(shù)，而是隨著互聯(lián)網(wǎng)的發(fā)展，滿足用戶體驗(yàn)的一種綜合技術(shù)

SEO一直以來，搜索引擎優(yōu)化（SEO）是開發(fā)者容易忽略的部分 SEO是針對(duì)搜索（Google、百度、雅虎搜索等）在技術(shù)細(xì)節(jié)上的優(yōu)化，例如語義、搜索關(guān)鍵詞與內(nèi)容相關(guān)性、收錄量、搜索排名等 SEO也是同行、市場(chǎng)競(jìng)爭(zhēng)常用的的營銷手段 Google、百度的搜索結(jié)果是重要的用戶入口，騰訊云（www.qcloud.com）有30%左右的流量來自搜索引擎因此SEO在品牌、營銷、用戶量的緯度是非常重要的基礎(chǔ)能力

那么單頁應(yīng)用與傳統(tǒng)直出頁面在SEO方面有哪些不同之處呢？

單頁應(yīng)用的優(yōu)點(diǎn)

更好的用戶體驗(yàn)，讓用戶在web感受natvie的速度和流暢；

經(jīng)典MVC開發(fā)模式，前后端各負(fù)其責(zé)

一套Server API，多端使用（web、移動(dòng)APP等）

重前端，業(yè)務(wù)邏輯全部在本地操作，數(shù)據(jù)都需要通過AJAX同步、提交；

對(duì)搜索引擎不友好

單頁應(yīng)用實(shí)際是把視圖（View）渲染從Server交給瀏覽器，Server只提供JSON格式數(shù)據(jù)，視圖和內(nèi)容都是通過本地JavaScript來組織和渲染而搜索搜索引擎抓取的內(nèi)容，需要有完整的HTML和內(nèi)容，單頁應(yīng)用架構(gòu)的站點(diǎn)，并不能很好的支持搜索

如果站點(diǎn)在用戶體驗(yàn)和搜索友好權(quán)衡時(shí)，如果我們做到更好的體驗(yàn)，也做到友好的搜索支持，既是一箭雙雕

URL中的哈希（#號(hào)）

單頁應(yīng)用只有一個(gè)頁面，視圖的變化通常是通過路由（route）來驅(qū)動(dòng)，首先，我們先來談一談單頁應(yīng)用的URL中的#號(hào)，很多采用單元結(jié)構(gòu)王皓咱的URL都出現(xiàn)了這個(gè)符號(hào)

#號(hào)在瀏覽器的URL中是一個(gè)錨點(diǎn)，在當(dāng)前頁改變#號(hào)的參數(shù)，頁面會(huì)跳轉(zhuǎn)到錨點(diǎn)所在的位置，通過JavaScript我們可以獲取到#號(hào)后的參數(shù)

location.hash // 獲取URL hash

location.hash = "#list" //改變URL hash

改變#號(hào)后的參數(shù)，頁面并不會(huì)重載，于是大多數(shù)的單頁架構(gòu)網(wǎng)站，都在URL中采用#號(hào)來作為當(dāng)前視圖的URL地址，例如

example.com/#index //首頁視圖

example.com/#list //列表頁視圖

example.com/#list/1 //id為1的列表信息的視圖

Backbone.js就是通過改變#號(hào)參數(shù)來組織視圖，這里有一個(gè)demo可以很直觀的體驗(yàn)URL的變化

看過這個(gè)demo，你獲取會(huì)發(fā)現(xiàn)很熟悉的符號(hào)#!，Twitter曾在URL使用這個(gè)標(biāo)識(shí) 這個(gè)標(biāo)識(shí)是Google提出（AJAX 抓取網(wǎng)站站長和開發(fā)人員指南1

因?yàn)閺?fù)雜的單頁架構(gòu)頁面，對(duì)Google來說抓取比較困難，于是給開發(fā)者制定一個(gè)規(guī)范

1、網(wǎng)站提交sitemap給Google；

2、Google發(fā)現(xiàn)URL里有#!符號(hào)，例如example.com/#!/detail/1，于是Google開始抓取

example.com/?_escaped_fragment_=/detail/1；

_escaped_fragment_這個(gè)參數(shù)是Google指定的命名，如果開發(fā)者希望把網(wǎng)站內(nèi)容提交給Google，就必須通過這個(gè)參數(shù)生成靜態(tài)頁面

根據(jù)上面的demo，我簡(jiǎn)單示例一下Google要抓取的頁面的樣子:

http://119.28.4.22/?escapedfragment_=/detail/1

如此以來，就需要Server通過生成靜態(tài)的內(nèi)容以便Google抓取

以下將簡(jiǎn)單介紹，單頁架構(gòu)，爬蟲訪問根目錄時(shí)如果配置Server端的路由

判斷爬蟲

當(dāng)Google訪問

119.28.4.22/#!/detail/1

時(shí)，會(huì)自動(dòng)轉(zhuǎn)化成

http://119.28.4.22/?_escaped_fragment_=/detail/1

以Nginx為例

if ($args ~ _escaped_fragment_) {

rewrite ^ /api;

}

/api為后臺(tái)服務(wù)的接口，已nodejs為例，代理設(shè)置如下

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

這個(gè)接口，然后在Server的

/api

處理請(qǐng)求把靜態(tài)內(nèi)容輸出即可

sitemap

Gogole的這個(gè)規(guī)范，必須有sitemap支持，因?yàn)橛锌赡軉雾摷軜?gòu)的站點(diǎn)，索引頁面也是JavaScript渲染的提交sitemap時(shí)，不用關(guān) _escaped_fragment_這個(gè)參數(shù)名，只提交帶哈希符號(hào)的URL即可，例如

http://119.28.4.22/#!/detail/1

weekly

0.5

結(jié)語

技術(shù)潮流的步伐很快，單頁應(yīng)用，URL哈希處理也沒渲染的方式實(shí)際上已經(jīng)流行了很久，在國外很多用戶數(shù)據(jù)較好的情況下，開發(fā)者會(huì)選擇HTML5 History API的pushstate特性開發(fā)，在URL中拋棄#! 但是IE6、7等低端瀏覽器用戶情況較多的網(wǎng)站，#能夠很好的兼容

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/web/seo/5669.html

上一篇：談?wù)勂髽I(yè)網(wǎng)站SEO操作的新方法

下一篇：百度改過算法之后，隨之谷歌發(fā)布熊貓算法4.1

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理