單頁(yè)應(yīng)用SEO淺談（轉(zhuǎn)載）

xuhong 發(fā)布于2019-08-20 12:13 / 962人閱讀

摘要：中的哈希號(hào)單頁(yè)應(yīng)用只有一個(gè)頁(yè)面，視圖的變化通常是通過(guò)路由來(lái)驅(qū)動(dòng)，首先，我們先來(lái)談一談單頁(yè)應(yīng)用的中的號(hào)，很多采用單元結(jié)構(gòu)網(wǎng)站的都出現(xiàn)了這個(gè)符號(hào)。

單頁(yè)應(yīng)用SEO淺談

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

SEO

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

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

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

更好的用戶體驗(yàn)，讓用戶在web感受natvie的速度和流暢；
經(jīng)典MVC開(kāi)發(fā)模式，前后端各負(fù)其責(zé)。
一套Server API，多端使用（web、移動(dòng)APP等）
重前端，業(yè)務(wù)邏輯全部在本地操作，數(shù)據(jù)都需要通過(guò)AJAX同步、提交；

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

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

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

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

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

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

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

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

example.com/#index //首頁(yè)視圖
example.com/#list //列表頁(yè)視圖
example.com/#list/1 //id為1的列表信息的視圖
Backbone.js就是通過(guò)改變#號(hào)參數(shù)來(lái)組織視圖，這里有一個(gè)demo可以很直觀的體驗(yàn)URL的變化。

看過(guò)這個(gè)demo，你或許會(huì)發(fā)現(xiàn)很熟悉的符號(hào)#!，Twitter曾在URL使用這個(gè)標(biāo)識(shí)。這個(gè)標(biāo)識(shí)是Google提出（AJAX 抓?。壕W(wǎng)站站長(zhǎng)和開(kāi)發(fā)人員指南1）：

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

網(wǎng)站提交sitemap給Google；
Google發(fā)現(xiàn)URL里有#!符號(hào)，例如example.com/#!/detail/1，于是Google開(kāi)始抓取example.com/?_escaped_fragment_=/detail/1；
_escaped_fragment_這個(gè)參數(shù)是Google指定的命名，如果開(kāi)發(fā)者希望把網(wǎng)站內(nèi)容提交給Google，就必須通過(guò)這個(gè)參數(shù)生成靜態(tài)頁(yè)面。

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

http://119.28.4.22/?escapedfr...

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

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

判斷爬蟲(chóng)

當(dāng)Google訪問(wèn)119.28.4.22/#!/detail/1 時(shí)，會(huì)自動(dòng)轉(zhuǎn)化成http://119.28.4.22/?_escaped_...，以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的訪問(wèn)重寫(xiě)到/api這個(gè)接口，然后在Server的/api處理請(qǐng)求把靜態(tài)內(nèi)容輸出即可。

sitemap

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

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

結(jié)語(yǔ)

技術(shù)潮流的步伐很快，單頁(yè)應(yīng)用，URL哈希處理也沒(méi)渲染的方式實(shí)際上已經(jīng)流行了很久，在國(guó)外很多用戶數(shù)據(jù)較好的情況下，開(kāi)發(fā)者會(huì)選擇HTML5 History API的pushstate特性開(kāi)發(fā)，在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶情況較多的網(wǎng)站，#能夠很好的兼容。關(guān)于采用HTML5 History API來(lái)架構(gòu)單頁(yè)應(yīng)用的方案，也歡迎討論。

轉(zhuǎn)自：http://isux.tencent.com/seo-f...

GPU云服務(wù)器云服務(wù)器單頁(yè)應(yīng)用單頁(yè)應(yīng)用cdn 單頁(yè)應(yīng)用程序轉(zhuǎn)載

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80862.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xuhong

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

合肥辰工科技辰工生產(chǎn)數(shù)據(jù)分析軟件V3.0

閱讀 1989·2021-11-25 09:43
阿里Java開(kāi)發(fā)手冊(cè)節(jié)選（嵩山版）

閱讀 668·2021-10-11 10:58
JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇）

閱讀 1744·2019-08-30 15:55
css創(chuàng)建優(yōu)雅自然的打開(kāi)動(dòng)畫(huà)

閱讀 1739·2019-08-30 13:13
nextcloud 14 自建應(yīng)用

閱讀 747·2019-08-29 17:01
前端每日實(shí)戰(zhàn)：31# 視頻演示如何利用 CSS 的動(dòng)畫(huà)原理，創(chuàng)作一個(gè)乒乓球?qū)Υ騽?dòng)畫(huà)

閱讀 1852·2019-08-29 15:30
關(guān)于寫(xiě)手機(jī)密碼鎖頁(yè)面的css技巧

閱讀 813·2019-08-29 13:49
CSS || 功能分類

閱讀 2184·2019-08-29 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

單頁(yè)應(yīng)用SEO淺談（轉(zhuǎn)載）

相關(guān)文章

搭建一個(gè)多頁(yè)面的無(wú)依賴的工程化項(xiàng)目

**淺談CDN、SEO、XSS、CSRF**

**淺談CDN、SEO、XSS、CSRF**

**淺談單頁(yè)應(yīng)用中前端分頁(yè)的實(shí)現(xiàn)方案**

**前端學(xué)習(xí)之路之SPA(單頁(yè)應(yīng)用)設(shè)計(jì)原理**

發(fā)表評(píng)論

0條評(píng)論

xuhong

男|高級(jí)講師

TA的文章

合肥辰工科技辰工生產(chǎn)數(shù)據(jù)分析軟件V3.0

阿里Java開(kāi)發(fā)手冊(cè)節(jié)選（嵩山版）

JavaScript五十問(wèn)——對(duì)比來(lái)說(shuō)CSS的Grid與FlexBox（上篇）

css創(chuàng)建優(yōu)雅自然的打開(kāi)動(dòng)畫(huà)

nextcloud 14 自建應(yīng)用

前端每日實(shí)戰(zhàn)：31# 視頻演示如何利用 CSS 的動(dòng)畫(huà)原理，創(chuàng)作一個(gè)乒乓球?qū)Υ騽?dòng)畫(huà)

關(guān)于寫(xiě)手機(jī)密碼鎖頁(yè)面的css技巧

CSS || 功能分類

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

單頁(yè)應(yīng)用SEO淺談（轉(zhuǎn)載）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！