主頁 > 知識(shí)庫 > 單頁應(yīng)用SEO淺談設(shè)計(jì)

單頁應(yīng)用SEO淺談設(shè)計(jì)

熱門標(biāo)簽:福州云外呼系統(tǒng)怎么樣 如何辦理座機(jī)400電話 百度地圖標(biāo)注店名審核時(shí)間 天津網(wǎng)絡(luò)回?fù)芡夂粝到y(tǒng) 外呼系統(tǒng)呼叫比例 云呼叫系統(tǒng)怎么外呼打電話的 鞏義防封卡外呼系統(tǒng)怎么安裝 高德地圖標(biāo)注審核多久 鞏義電話外呼系統(tǒng)價(jià)格是多少
 

SEO

一直以來,搜索引擎優(yōu)化(SEO)是開發(fā)者容易忽略的部分。SEO是針對(duì)搜索(Google、百度、雅虎搜索等)在技術(shù)細(xì)節(jié)上的優(yōu)化,例如語義、搜索關(guān)鍵詞與內(nèi)容相關(guān)性、收錄量、搜索排名等。SEO也是同行、市場競爭常用的的營銷手段。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(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,我簡單示例一下Google要抓取的頁面的樣子:

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

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

以下將簡單介紹,單頁架構(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)站,#能夠很好的兼容。

標(biāo)簽:撫州 南寧 煙臺(tái) 西安 雙鴨山 榆林 徐州 興安盟

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《單頁應(yīng)用SEO淺談設(shè)計(jì)》,本文關(guān)鍵詞  單頁,應(yīng)用,SEO,淺談,設(shè)計(jì),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《單頁應(yīng)用SEO淺談設(shè)計(jì)》相關(guān)的同類信息!
  • 本頁收集關(guān)于單頁應(yīng)用SEO淺談設(shè)計(jì)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章