DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁SEO優化 >> SEO相關 >> 關於SEO >> 用戶體驗 OR 搜索友好?淺談單頁應用SEO
用戶體驗 OR 搜索友好?淺談單頁應用SEO
編輯:關於SEO     

 

用戶體驗 OR 搜索友好?淺談單頁應用SEO

前言

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

 SEO

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

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

 單頁應用的優點

  1. 更好的用戶體驗,讓用戶在web感受natvie的速度和流暢;
  2. 經典MVC開發模式,前後端各負其責。
  3. 一套Server API,多端使用(web、移動APP等)
  4. 重前端,業務邏輯全部在本地操作,數據都需要通過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(http://119.28.4.22)可以很直觀的體驗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/?escapedfragment_=/detail/1

如此以來,就需要Server通過生成靜態的內容以便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處理請求把靜態內容輸出即可。

sitemap

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

<loc>http://119.28.4.22/#!/detail/1</loc>

<changefreq>weekly</changefreq>

<priority>0.5</priority>

</url>

 本文到此為止,歡迎討論。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved