線上服務咨詢
Article/文章
記錄成長點滴 分享您我感悟
單頁主題SEO怎么樣？
發表時間：2019-07-30 15:44:22
文章來源：沈陽軟件開發
標簽：網站建設 小程序開發 小程序制作 微信小程序開發 公眾號開發 微信公眾號開發 網頁設計 網站優化 網站排名 網站設計 微信小程序設計 小程序定制 微信小程序定制
瀏覽次數：0
前言單頁應用（Single Page Application）越來越受Web開發人員的歡迎，單頁面應用程序的體驗可以模擬本機應用程序，一個開發和多端兼容性。單頁應用程序不是一項完全發明的技術，而是隨著互聯網的發展而滿足用戶體驗的綜合技術。
SEO搜索引擎優化（SEO）一直是開發人員忽略的一部分。 SEO針對技術細節進行了優化，如搜索（谷歌，百度，雅虎搜索等），如語義，搜索關鍵字和內容相關性、，以及搜索排名。 SEO也是同行和市場競爭的常見營銷工具。谷歌，百度的搜索結果是重要的用戶門戶網站，而騰訊云（www.qcloud.com）約有30％的流量來自搜索引擎。因此，SEO是品牌，營銷和用戶量的緯度中非常重要的基本能力。
那么單頁應用程序和傳統的直接頁面在SEO方面有什么區別？
單頁面應用程序的優點是更好的用戶體驗，讓用戶感受到網絡上natvie的速度和流暢度;經典的MVC開發模式，每一側的前后責任。一套服務器API，多端使用（網絡，移動APP等）繁重的前端，業務邏輯全部在本地運行，數據需要通過AJAX進行同步和提交;對搜索引擎不友好單頁面應用程序實際上將視圖呈現從服務器傳輸到瀏覽器。服務器僅提供JSON格式數據，視圖和內容由本地JavaScript組織和呈現。搜索搜索引擎抓取的內容需要完整的HTML和內容，單頁面應用程序架構網站，并且不支持搜索。
如果網站的用戶體驗和搜索友好，如果我們有更好的體驗和友好的搜索支持，這是一把雙刃劍。
URL中的哈希值（##）單頁面應用程序只有一頁。視圖的變化通常由路線驅動。首先，我們來談談單頁應用程序的URL中的＃。許多使用單位結構網站的URL出現。
##是瀏覽器URL中的錨點。當前頁面更改##參數時，頁面將跳轉到錨點的位置。通過JavaScript，我們可以在##：
之后獲取參數 12location.hash //獲取URL hashlocation.hash='＃list'//更改URL哈希在##之后更改參數后，頁面不會重載，因此大多數單頁架構網站使用URL中的##作為當前視圖的URL地址，例如：
123example.com/#index //主頁視圖example.com/#list //列表頁面視圖example.com/#list/1 //ID為1的列表信息視圖Backbone.js通過更改＃參數來組織視圖。有一個演示可用于直觀地體驗URL更改。
閱讀本演示后，您可能會發現熟悉的符號＃!這是Twitter在URL上使用的。此徽標由Google提出（AJAX抓取：網站網站管理員和開發者指南1）：
由于復雜的單頁架構頁面很難被Google抓取，因此為開發人員開發了一個規范：
網站向Google提交站點地圖;谷歌找到＃！ URL中的符號，例如example.com/#!/detail/1，因此Google開始抓取example.com /？_ escaped_fragment _=/detail/1;_escaped_fragment_此參數是Google指定的命名。如果開發人員想要向Google提交網站內容，則必須使用此參數生成靜態頁面。
根據上面的演示，我只想舉例說明Google如何抓取頁面:
http://119.28.4.22/?escapedfragment _=/detail/1
因此，Server需要為Google抓取生成靜態內容。
以下是單頁架構的簡要介紹。如果爬網程序訪問根目錄，則配置服務器端路由。
判斷爬行動物當Google訪問119.28.4.22/#!/detail/1時，它將自動轉換為http://119.28.4.22/?_escaped_fragment_=/detail/1，以Nginx為例：
123if（$ args~_escaped_fragment_）{rewrite ^/api;}/api是后臺服務的接口。 Nodejs用作示例。代理設置如下：
12345678910111213upstream 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; proxy_set_header Port $ Server_port; proxy_passhttp://nodejs; proxy_redirect off;}這樣，我們將重寫Google對/api接口的訪問權限，然后在服務器的/api處理請求中輸出靜態內容。
網站地圖Gogole的規范必須具有站點地圖支持，因為它可以用于單頁架構站點，索引頁面也是JavaScript呈現的。提交站點地圖時，您無需關注參數名稱_escaped_fragment_，只需提交帶有哈希符號的URL，例如：
！1234 //119.28.4.22 /＃/細節/1 GT;＆GT;結論技術趨勢的步伐很快，單頁應用程序，URL散列和渲染方法實際上已經流行了很長時間。對于許多具有良好數據的外國用戶，開發人員將選擇HTML5 History API的pushstate功能。丟棄＃！在URL中。但是，網站，＃在IE6和7等低端瀏覽器中更受歡迎，可以非常兼容。關于使用HTML5 History API構建單頁應用程序，也歡迎討論。
參考文獻1:https://support.google.com/webmasters/answer/174992?hl=zh-Hans
標簽:＆amp; nbsp＆amp; nbspSEO，網絡營銷，SEM網站建設,小程序開發,小程序制作,微信小程序開發,公眾號開發,微信公眾號開發,網頁設計,網站優化,網站排名,網站設計,微信小程序設計,小程序定制,微信小程序定制
