您現在的位置: 网站首頁 / seo優化 / 正文

單頁應用SEO淺談設計

作者: admin 发布: 2014-9-25 12:53:34 分类: seo優化 閱讀: 次 查看評論

  单页优化 单页应用 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來說抓取比較困難,于是給開發者制定一個規範:

  1、網站提交sitemap給Google;

  2、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即可,例如:

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

  weekly

  0.5

  結語

  技术潮流的步伐很快,单页应用,URL哈希处理也没渲染的方式实际上已经流行了很久,在国外很多用户数据较好的情况下,开发者会选择HTML5 History API的pushstate特性开发,在URL中抛弃#!。但是IE6、7等低端浏览器用户情况较多的网站,#能够很好的兼容。(作者:人人都是产品经理)

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: seo  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表