coding
teambition
cloud9
注意這幾個(gè)網(wǎng)站的相同點(diǎn)，那就是在瀏覽器中，做了原先“應(yīng)當(dāng)”在客戶端做的事情。它們的界面切換非常流暢，響應(yīng)很迅速，跟傳統(tǒng)的網(wǎng)頁明顯不一樣，它們是什么呢？這就是單頁Web應(yīng)用。
單頁Web應(yīng)用（single page web application，SPA），就是只有一張Web頁面的應(yīng)用。（使用js控制渲染來替換html跳轉(zhuǎn)）
單頁應(yīng)用程序 (SPA) 是加載單個(gè)HTML 頁面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)更新該頁面的Web應(yīng)用程序。
瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，都由JavaScript來控制。
因此，對(duì)單頁面應(yīng)用來說，模塊化的開發(fā)和設(shè)計(jì)顯得相當(dāng)重要。
原理：JS會(huì)感知到url的變化，通過這一點(diǎn)，可以用js動(dòng)態(tài)的將當(dāng)前頁面的內(nèi)容清除掉，然后將下一個(gè)頁面的內(nèi)容掛載到當(dāng)前頁面上，這個(gè)時(shí)候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個(gè)組件，清除不需要的，顯示需要的組件。這種過程就是單頁應(yīng)用，每次跳轉(zhuǎn)的時(shí)候不需要再請(qǐng)求html文件了。
單頁面應(yīng)用的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
1、用戶操作體驗(yàn)好，用戶不用刷新頁面，整個(gè)交互過程都是通過Ajax來操作。
2、適合前后端分離開發(fā)，服務(wù)端提供http接口，前端請(qǐng)求http接口獲取數(shù)據(jù)，使用JS進(jìn)行客戶端渲染。
缺點(diǎn)：
單頁面應(yīng)用會(huì)將js、 css打包成一個(gè)文件，在加載頁面顯示的時(shí)候加載打包文件，如果打包文件較大或者網(wǎng)速慢則用戶體驗(yàn)不好
SEO（Search Engine Optimization）為搜索引擎優(yōu)化。它是一種利用搜索引擎的搜索規(guī)則來提高網(wǎng)站在搜索引擎排名的方法。目前各家搜索引擎對(duì)JS支持不好，所以使用單頁面應(yīng)用將大大減少搜索引擎對(duì)網(wǎng)站的收錄。
1、Hash模式：（也就是通過錨點(diǎn)？）
這里的 hash 就是指 url 后的 # 號(hào)以及后面的字符。比如說 "
www.baidu.com/#hashhash
" ，其中 "#hashhash" 就是我們期望的 hash 值。
hash 值的變化不會(huì)導(dǎo)致瀏覽器像服務(wù)器發(fā)送請(qǐng)求，而且hash 的改變會(huì)觸發(fā) hashChange 事件，瀏覽器的前進(jìn)后退也能對(duì)其進(jìn)行控制，所以在 H5 的 history 模式出現(xiàn)之前，基本都是使用 hash 模式來實(shí)現(xiàn)前端路由。
在 HTML5 之前，瀏覽器就已經(jīng)有了 history 對(duì)象。但在早期的 history 中只能用于多頁面的跳轉(zhuǎn)。
在 HTML5 的規(guī)范中，history 新增了以下幾個(gè) API：
1、hash 模式相比于 history 模式的優(yōu)點(diǎn)：
兼容性更好，可以兼容到IE8
2、hash 模式相比于 history 模式的缺點(diǎn)：
看起來更丑。
會(huì)導(dǎo)致錨點(diǎn)功能失效。
相同 hash 值不會(huì)觸發(fā)動(dòng)作將記錄加入到歷史棧中，而 pushState 則可以。
引用：
https://www.cnblogs.com/ppforever/p/5126640.html
https://www.jianshu.com/p/0c32c85c668b
https://juejin.im/post/5dac1d0d6fb9a04e0762e3f1
從使用者的角度看，搜索引擎提供一個(gè)包含搜索框的頁面，在搜索框輸入詞語，通過瀏覽器提交給搜索引擎后，搜索引擎就會(huì)返回跟用戶輸入的內(nèi)容相關(guān)的信息列表。
互聯(lián)網(wǎng)發(fā)展早期，以雅虎為代表的網(wǎng)站分類目錄查詢非常流行。網(wǎng)站分類目錄由人工整理維護(hù)，精選互聯(lián)網(wǎng)上的優(yōu)秀網(wǎng)站，并簡(jiǎn)要描述，分類放置到不同目錄下。用戶查詢時(shí)，通過一層層的點(diǎn)擊來查找自己想找的網(wǎng)站。也有人把這種基于目錄的檢索服務(wù)網(wǎng)站稱為搜索引擎，但從嚴(yán)格意義上講，它并不是搜索引擎。
全文搜索引擎是名副其實(shí)的搜索引擎，國外代表有Google，國內(nèi)則有著名的百度搜索。它們從互聯(lián)網(wǎng)提取各個(gè)網(wǎng)站的信息（以網(wǎng)頁文字為主），建立起數(shù)據(jù)庫，并能檢索與用戶查詢條件相匹配的記錄，按一定的排列順序返回結(jié)果。
根據(jù)搜索結(jié)果來源的不同，全文搜索引擎可分為兩類，一類擁有自己的檢索程序（Indexer），俗稱“蜘蛛”（Spider）程序或“機(jī)器人”（Robot）程序，能自建網(wǎng)頁數(shù)據(jù)庫，搜索結(jié)果直接從自身的數(shù)據(jù)庫中調(diào)用，上面提到的Google和百度就屬于此類；另一類則是租用其他搜索引擎的數(shù)據(jù)庫，并按自定的格式排列搜索結(jié)果，如Lycos搜索引擎。
目錄索引雖然有搜索功能，但嚴(yán)格意義上不能稱為真正的搜索引擎，只是按目錄分類的網(wǎng)站鏈接列表而已。用戶完全可以按照分類目錄找到所需要的信息，不依靠關(guān)鍵詞（Keywords）進(jìn)行查詢。目錄索引中最具代表性的莫過于大名鼎鼎的Yahoo、新浪分類目錄搜索。
元搜索引擎（METASearchEngine）接受用戶查詢請(qǐng)求后，同時(shí)在多個(gè)搜索引擎上搜索，并將結(jié)果返回給用戶。著名的元搜索引擎有InfoSpace、Dogpile、Vivisimo等，中文元搜索引擎中具代表性的是搜星搜索引擎。在搜索結(jié)果排列方面，有的直接按來源排列搜索結(jié)果，如Dogpile；有的則按自定的規(guī)則將結(jié)果重新排列組合，如Vivisimo。
其他非主流搜索引擎形式：
1、集合式搜索引擎：該搜索引擎類似元搜索引擎，區(qū)別在于它并非同時(shí)調(diào)用多個(gè)搜索引擎進(jìn)行搜索，而是由用戶從提供的若干搜索引擎中選擇，如HotBot在2002年底推出的搜索引擎。
2、門戶搜索引擎：AOLSearch、MSNSearch等雖然提供搜索服務(wù)，但自身既沒有分類目錄也沒有網(wǎng)頁數(shù)據(jù)庫，其搜索結(jié)果完全來自其他搜索引擎。
3、免費(fèi)鏈接列表（FreeForAllLinks簡(jiǎn)稱FFA）：一般只簡(jiǎn)單地滾動(dòng)鏈接條目，少部分有簡(jiǎn)單的分類目錄，不過規(guī)模要比Yahoo！等目錄索引小很多。
【工作原理】
每個(gè)獨(dú)立的搜索引擎都有自己的網(wǎng)頁抓取程序（spider）。Spider順著網(wǎng)頁中的超鏈接，連續(xù)地抓取網(wǎng)頁。被抓取的網(wǎng)頁被稱之為網(wǎng)頁快照。由于互聯(lián)網(wǎng)中超鏈接的應(yīng)用很普遍，理論上，從一定范圍的網(wǎng)頁出發(fā)，就能搜集到絕大多數(shù)的網(wǎng)頁。
搜索引擎抓到網(wǎng)頁后，還要做大量的預(yù)處理工作，才能提供檢索服務(wù)。其中，最重要的就是提取關(guān)鍵詞，建立索引文件。其他還包括去除重復(fù)網(wǎng)頁、分析超鏈接、計(jì)算網(wǎng)頁的重要度。
單頁網(wǎng)站SEO是一個(gè)比較特殊的優(yōu)化工作，它更多的應(yīng)用于在線商品快速交易行業(yè)，單頁網(wǎng)站其實(shí)往往更多的應(yīng)用在競(jìng)價(jià)推廣，而非SEO。
SEO單頁排名技術(shù)：指的是僅依靠一個(gè)獨(dú)立的頁面，對(duì)目標(biāo)關(guān)鍵詞進(jìn)行優(yōu)化，一般對(duì)內(nèi)容營銷策略的要求極高，多半以高轉(zhuǎn)化率為目的，但這與電商SEO還是有一定區(qū)別。
那么，SEO單頁推廣的劣勢(shì)有哪些呢？
①不能利用站內(nèi)錨文本提高關(guān)鍵詞排名。
②很難去交互友情鏈接。
③高跳出率是無法避免的。
①節(jié)省過高的開發(fā)費(fèi)用，可以更便捷的進(jìn)行管理。
②提高用戶體驗(yàn)：做一個(gè)單頁移動(dòng)優(yōu)化的網(wǎng)頁，要比網(wǎng)站便捷的多，特別是MIP的配置。
③易于傳播與分享，特別適合社交媒體營銷。
④集中優(yōu)勢(shì)的內(nèi)容，往往產(chǎn)生高轉(zhuǎn)化率。
那么，單頁網(wǎng)站SEO優(yōu)化，該怎么做呢？
1、根據(jù)行業(yè)，制作最簡(jiǎn)單的SEO單頁模板，注意：精簡(jiǎn)代碼。
2、優(yōu)化頁面加載速度：特別是對(duì)頁面圖片的優(yōu)化，單頁網(wǎng)站往往圖片量大，且長(zhǎng)。
3、更徹底的研究你的關(guān)鍵詞：?jiǎn)雾摼W(wǎng)站并不能通過更多的長(zhǎng)尾關(guān)鍵詞頁面獲取流量，因此整個(gè)頁面的關(guān)鍵詞挖掘與布局，是非常重要的，你可以參考如下內(nèi)容：
①合理控制關(guān)鍵詞密度，注意上下文的語義相關(guān)。
②選擇合適的核心關(guān)鍵詞，并不需要過高的搜索量，相對(duì)競(jìng)爭(zhēng)度較低的長(zhǎng)尾關(guān)鍵詞是必須的。
③按照文章結(jié)構(gòu)，依次將核心關(guān)鍵詞，長(zhǎng)尾關(guān)鍵詞，分配在從上到下的段落中。
4、精細(xì)化你的內(nèi)容：?jiǎn)雾摼W(wǎng)站，內(nèi)容是最核心的要素，它直接影響你的轉(zhuǎn)化率，針對(duì)你的產(chǎn)品類型與服務(wù)類型，合理的按照段落格式進(jìn)行分布，并且注重各個(gè)標(biāo)簽的使用，它包括：
①
利用層標(biāo)簽，將不同段落進(jìn)行有效的隔離，讓搜索引擎看起來，貌似每個(gè)段落都有其獨(dú)立的意義。
有些SEO專家看了可能有點(diǎn)懵圈，什么？一個(gè)獨(dú)立的頁面，怎么可能有多個(gè)H1標(biāo)簽?zāi)?，這個(gè)是SEO優(yōu)化的大忌呀，確實(shí)這是一個(gè)策略吧，多個(gè)H1標(biāo)簽，分布在
它試圖像搜索引擎模擬多個(gè)頁面的存在，并且強(qiáng)調(diào)H1包含關(guān)鍵詞的重要性，有疊加的感覺。
利用標(biāo)簽，包含最主要的核心關(guān)鍵詞，并且保證其唯一性。而多個(gè)頁面的H1標(biāo)簽的關(guān)鍵詞，就不需要用這個(gè)強(qiáng)調(diào)標(biāo)簽了。
這是一個(gè)兩部的內(nèi)容包括：外鏈建設(shè)與內(nèi)鏈建設(shè)。
①外鏈建設(shè)：利用高質(zhì)量相關(guān)性的鏈接對(duì)目標(biāo)關(guān)鍵詞進(jìn)行鏈接。
②內(nèi)鏈建設(shè)，也就是內(nèi)部錨文本，也就是在單頁上給核心關(guān)鍵詞，加上超鏈接，這個(gè)只需要加上核心關(guān)鍵詞就可以。
下面給出單頁面內(nèi)鏈建設(shè)的秘籍：
代碼如下：
總結(jié)：?jiǎn)雾摼W(wǎng)站SEO，是一個(gè)技術(shù)含量相對(duì)較高的SEO策略，如果不是必須要做的話，不建議大家利用SEO單頁去推廣。
官方微信
TOP
