單頁應用SEO淺談（轉載）

xuhong 發布于2019-08-20 12:13 / 955人閱讀

摘要：中的哈希號單頁應用只有一個頁面，視圖的變化通常是通過路由來驅動，首先，我們先來談一談單頁應用的中的號，很多采用單元結構網站的都出現了這個符號。

單頁應用SEO淺談

單頁應用（Single Page Application）越來越受web開發者歡迎，單頁應用的體驗可以模擬原生應用，一次開發，多端兼容。單頁應用并不是一個全新發明的技術，而是隨著互聯網的發展，滿足用戶體驗的一種綜合技術。

SEO

一直以來，搜索引擎優化（SEO）是開發者容易忽略的部分。SEO是針對搜索（Google、百度、雅虎搜索等）在技術細節上的優化，例如語義、搜索關鍵詞與內容相關性、收錄量、搜索排名等。SEO也是同行、市場競爭常用的的營銷手段。Google、百度的搜索結果是重要的用戶入口，騰訊云（www.qcloud.com）有30%左右的流量來自搜索引擎。因此SEO在品牌、營銷、用戶量的緯度是非常重要的基礎能力。

那么單頁應用與傳統直出頁面在SEO方面有哪些不同之處呢？

單頁應用的優點

更好的用戶體驗，讓用戶在web感受natvie的速度和流暢；
經典MVC開發模式，前后端各負其責。
一套Server API，多端使用（web、移動APP等）
重前端，業務邏輯全部在本地操作，數據都需要通過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，你或許會發現很熟悉的符號#!，Twitter曾在URL使用這個標識。這個標識是Google提出（AJAX 抓取：網站站長和開發人員指南1）：

因為復雜的單頁架構頁面，對Google來說抓取比較困難，于是給開發者制定一個規范：

網站提交sitemap給Google；
Google發現URL里有#!符號，例如example.com/#!/detail/1，于是Google開始抓取example.com/?_escaped_fragment_=/detail/1；
_escaped_fragment_這個參數是Google指定的命名，如果開發者希望把網站內容提交給Google，就必須通過這個參數生成靜態頁面。

根據上面的demo，我簡單示例一下Google要抓取的頁面的樣子:

http://119.28.4.22/?escapedfr...

如此以來，就需要Server通過生成靜態的內容以便Google抓取。

以下將簡單介紹，單頁架構，爬蟲訪問根目錄時如果配置Server端的路由。

判斷爬蟲

當Google訪問119.28.4.22/#!/detail/1 時，會自動轉化成http://119.28.4.22/?_escaped_...，以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處理請求把靜態內容輸出即可。

sitemap

Gogole的這個規范，必須有sitemap支持，因為有可能單頁架構的站點，索引頁面也是JavaScript渲染的。提交sitemap時，不用關注_escaped_fragment_這個參數名，只提交帶哈希符號的URL即可，例如：

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

結語

技術潮流的步伐很快，單頁應用，URL哈希處理也沒渲染的方式實際上已經流行了很久，在國外很多用戶數據較好的情況下，開發者會選擇HTML5 History API的pushstate特性開發，在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶情況較多的網站，#能夠很好的兼容。關于采用HTML5 History API來架構單頁應用的方案，也歡迎討論。

轉自：http://isux.tencent.com/seo-f...

GPU云服務器云服務器單頁應用單頁應用cdn 單頁應用程序轉載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80862.html

搭建一個多頁面的無依賴的工程化項目

摘要：也就是說，我們需要做一個非單頁應用的工程化項目。現在這個項目的靜態資源是以文件哈希值來控制的。這個該怎么解決呢感謝，我們可以通過如下的配置來實現意思就是如果圖片是在中引用的則不加哈希值，在文件中引入的則加上。最近金拱門比較火，我們先戳開它的官網看看。看完后，如果你老板要是讓你做這么一個網站，一定要seo，一定要兼容IE，你會怎么去做呢？用vue/react吧，單頁應用滿足不了se...

go4it 2019-08-21 17:18 評論0 收藏0
淺談CDN、SEO、XSS、CSRF

摘要：要錢的簡單理解百度的廣告就是不用錢的自己配置提高搜索引擎的權重是一種技術，主要是用于提高網站瀏覽量而做的優化手段為什么需要我們搜一下微信公眾號發現排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學Web開發的時候，多多少少都會聽過這個名詞->CDN。 CDN在我沒接觸之前，它給我的印象是用來優化網絡請求的，我第一次用到CDN的時候是在找JS文件時。當時找不到相對應的JS文件...

asoren 2019-06-21 16:10 評論0 收藏0
淺談CDN、SEO、XSS、CSRF

摘要：要錢的簡單理解百度的廣告就是不用錢的自己配置提高搜索引擎的權重是一種技術，主要是用于提高網站瀏覽量而做的優化手段為什么需要我們搜一下微信公眾號發現排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學Web開發的時候，多多少少都會聽過這個名詞->CDN。 CDN在我沒接觸之前，它給我的印象是用來優化網絡請求的，我第一次用到CDN的時候是在找JS文件時。當時找不到相對應的JS文件...

番茄西紅柿 2019-07-16 14:29 評論0 收藏0
淺談單頁應用中前端分頁的實現方案

摘要：在單頁應用中，我們有很多中分頁方案，最常見的是無限滾動上一頁下一頁和頁碼。本文將談談這三種分頁方式。而前端方面，需要做更多的事情，同時要考慮當前端數據丟失時如用戶刷新頁面的處理方案。簡介分頁是開發中最常見的需求之一。對于分頁，我們討論的最多的是后端的數據庫分頁，這關乎到我們應用程序的性能，也是分頁這個需求的核心。而前端要做的，是把后端返回的數據呈現在頁面上，工作被認為是簡單瑣碎的。...

denson 2019-08-22 10:38 評論0 收藏0
前端學習之路之SPA(單頁應用)設計原理

摘要：設計設計意義前后端分離減輕服務器壓力增強用戶體驗預渲染優化前后端分離前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。響應瀏覽器的前進和后退。代碼實現演示圖結上就是設計原理愿你成為終身學習者 SPA設計 1、設計意義前后端分離減輕服務器壓力增強用戶體驗 Prerender預渲染優化SEO 前后端分離：前端做業務邏輯，后端處理數據和接口，耦合度減少，開發效率提高。 ...

Crazy_Coder 2019-08-22 15:38 評論0 收藏0