搜索 用戶中心
歡迎訪問網站分類目錄,快審10元每站,快審請聯系站長QQ:846657770
當前位置 首頁 > 文章 > SEO資訊
網站單頁做SEO的注意事項
    發布時間:2019-05-29 11:08:36    發布作者:admin

一直以來,搜索引擎優化(SEO)是開發者容易忽略的部分。SEO是針對搜索(Google、百度、雅虎搜索等)在技術細節上的優化,例如語義、搜索關鍵詞與內容相關性、收錄量、搜索排名等。SEO也是同行、市場競爭常用的的營銷手段。Google、百度的搜索結果是重要的用戶入口,騰訊云(www.qcloud.com)有30%左右的流量來自搜索引擎。因此SEO在品牌、營銷、用戶量的緯度是非常重要的基礎能力。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
那么單頁應用與傳統直出頁面在SEO方面有哪些不同之處呢?0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
單頁應用的優點0j1網站目錄_網站網址收錄目錄提交入口

更好的用戶體驗,讓用戶在web感受natvie的速度和流暢;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
經典MVC開發模式,前后端各負其責。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
一套Server API,多端使用(web、移動APP等)0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
重前端,業務邏輯全部在本地操作,數據都需要通過AJAX同步、提交;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
對搜索引擎不友好0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
單頁應用實際是把視圖(View)渲染從Server交給瀏覽器,Server只提供JSON格式數據,視圖和內容都是通過本地JavaScript來組織和渲染。而搜索搜索引擎抓取的內容,需要有完整的HTML和內容,單頁應用架構的站點,并不能很好的支持搜索。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
如果站點在用戶體驗和搜索友好權衡時,如果我們做到更好的體驗,也做到友好的搜索支持,既是一箭雙雕。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
URL中的哈希(#號)0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
單頁應用只有一個頁面,視圖的變化通常是通過路由(route)來驅動,首先,我們先來談一談單頁應用的URL中的#號,很多采用單元結構王皓咱的URL都出現了這個符號。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
#號在瀏覽器的URL中是一個錨點,在當前頁改變#號的參數,頁面會跳轉到錨點所在的位置,通過JavaScript我們可以獲取到#號后的參數:0j1網站目錄_網站網址收錄目錄提交入口

location.hash // 獲取URL hash0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
location.hash = "#list" //改變URL hash0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
改變#號后的參數,頁面并不會重載,于是大多數的單頁架構網站,都在URL中采用#號來作為當前視圖的URL地址,例如:0j1網站目錄_網站網址收錄目錄提交入口

example.com/#index  //首頁視圖0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
example.com/#list   //列表頁視圖0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
example.com/#list/1   //id為1的列表信息的視圖0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
Backbone.js就是通過改變#號參數來組織視圖,這里有一個demo可以很直觀的體驗URL的變化。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
看過這個demo,你獲取會發現很熟悉的符號#!,Twitter曾在URL使用這個標識。這個標識是Google提出。(AJAX 抓取:網站站長和開發人員指南1:0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
因為復雜的單頁架構頁面,對Google來說抓取比較困難,于是給開發者制定一個規范:0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
1、網站提交sitemap給Google;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
2、Google發現URL里有#!符號,例如example.com/#!/detail/1,于是Google開始抓取0j1網站目錄_網站網址收錄目錄提交入口

example.com/?_escaped_fragment_=/detail/1;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
_escaped_fragment_這個參數是Google指定的命名,如果開發者希望把網站內容提交給Google,就必須通過這個參數生成靜態頁面。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
根據上面的demo,我簡單示例一下Google要抓取的頁面的樣子:0j1網站目錄_網站網址收錄目錄提交入口

http://119.28.4.22/?escapedfragment_=/detail/10j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
如此以來,就需要Server通過生成靜態的內容以便Google抓取。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
以下將簡單介紹,單頁架構,爬蟲訪問根目錄時如果配置Server端的路由。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
判斷爬蟲0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
當Google訪問0j1網站目錄_網站網址收錄目錄提交入口

119.28.4.22/#!/detail/10j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
時,會自動轉化成0j1網站目錄_網站網址收錄目錄提交入口

http://119.28.4.22/?_escaped_fragment_=/detail/10j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
以Nginx為例:0j1網站目錄_網站網址收錄目錄提交入口

if ($args ~ _escaped_fragment_) {0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
rewrite ^ /api;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
}0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
/api為后臺服務的接口,已nodejs為例,代理設置如下:0j1網站目錄_網站網址收錄目錄提交入口

upstream nodejs {0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
server 127.0.0.1:3000;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
}0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
location /api {0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_set_header X-Request-URI   $request_uri;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_set_header X-Real-IP       $remote_addr;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_set_header Host            $host;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_set_header Port            $server_port;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_pass http://nodejs;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
proxy_redirect off;0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
}0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
如此,我們便將Google的訪問重寫到0j1網站目錄_網站網址收錄目錄提交入口

/api0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
這個接口,然后在Server的0j1網站目錄_網站網址收錄目錄提交入口

/api0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
處理請求把靜態內容輸出即可。0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
sitemap0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
Gogole的這個規范,必須有sitemap支持,因為有可能單頁架構的站點,索引頁面也是JavaScript渲染的。提交sitemap時,不用關注_escaped_fragment_這個參數名,只提交帶哈希符號的URL即可,例如:0j1網站目錄_網站網址收錄目錄提交入口

http://119.28.4.22/#!/detail/10j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
weekly0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
0.50j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
結語0j1網站目錄_網站網址收錄目錄提交入口
 0j1網站目錄_網站網址收錄目錄提交入口
技術潮流的步伐很快,單頁應用,URL哈希處理也沒渲染的方式實際上已經流行了很久,在國外很多用戶數據較好的情況下,開發者會選擇HTML5 History API的pushstate特性開發,在URL中拋棄#!。但是IE6、7等低端瀏覽器用戶情況較多的網站,#能夠很好的兼容。0j1網站目錄_網站網址收錄目錄提交入口

最新資訊
熱門資訊
福彩老时时彩第