寫在前面
這是好久之前的工作了狈醉，之前還沒用vue spa 做項(xiàng)目的時候峻汉，都是用的原生js寫項(xiàng)目，純html,css,js寫項(xiàng)目赢赊，真的是每個頁面引用css,js各種文件寫到頭痛寞焙，那個時候做一個大型網(wǎng)站储狭，基本都是各種ui框架，bootstrap,layui,amazy-ui,mui,weui,jqueryweui,zui,各種框架各種組合捣郊，代碼也是混亂不堪辽狈，項(xiàng)目體積大，對爬蟲不是特別友好呛牲，后來項(xiàng)目上線的時候刮萌，公司要求做seo，就開始了漫長的項(xiàng)目規(guī)范娘扩，優(yōu)化代碼過程着茸。在這過程中也總結(jié)了好多經(jīng)驗(yàn)，再次記錄下來琐旁，方便以后學(xué)習(xí)更新使用涮阔。
ONE，首先介紹下seo
全稱：Search English Optimization灰殴，搜索引擎優(yōu)化敬特。自從有了搜索引擎，SEO便誕生了牺陶。
存在的意義：為了提升網(wǎng)頁在搜索引擎自然搜索結(jié)果中的收錄數(shù)量以及排序位置而做的優(yōu)化行為伟阔。
簡言之，就是希望百度等搜索引擎能多多我們收錄精心制作后的網(wǎng)站掰伸，并且在別人訪問時網(wǎng)站能排在前面皱炉。
TWO，搜索引擎工作原理
(1),當(dāng)我們在輸入框中輸入關(guān)鍵詞狮鸭，點(diǎn)擊搜索或查詢時合搅，然后得到結(jié)果多搀。深究其背后的故事，搜索引擎做了很多事情
(2),在搜索引擎網(wǎng)站历筝，比如百度酗昼，在其后臺有一個非常龐大的數(shù)據(jù)庫，里面存儲了海量的關(guān)鍵詞梳猪，而每個關(guān)鍵詞又對應(yīng)著很多網(wǎng)址，這些網(wǎng)址是百度程序從茫茫的互聯(lián)網(wǎng)上一點(diǎn)一點(diǎn)下載收集而來的蒸痹，這些程序稱之為“搜索引擎蜘蛛”或“網(wǎng)絡(luò)爬蟲”春弥。這些勤勞的“蜘蛛”每天在互聯(lián)網(wǎng)上爬行，從一個鏈接到另一個鏈接叠荠，下載其中的內(nèi)容匿沛，進(jìn)行分析提煉，找到其中的關(guān)鍵詞榛鼎，如果“蜘蛛”認(rèn)為關(guān)鍵詞在數(shù)據(jù)庫中沒有而對用戶是有用的便存入數(shù)據(jù)庫逃呼。反之，如果“蜘蛛”認(rèn)為是垃圾信息或重復(fù)信息者娱，就舍棄不要抡笼，繼續(xù)爬行，尋找最新的黄鳍、有用的信息保存起來提供用戶搜索推姻。當(dāng)用戶搜索時，就能檢索出與關(guān)鍵字相關(guān)的網(wǎng)址顯示給訪客框沟。
(3),一個關(guān)鍵詞對用多個網(wǎng)址藏古，因此就出現(xiàn)了排序的問題，相應(yīng)的當(dāng)與關(guān)鍵詞最吻合的網(wǎng)址就會排在前面了忍燥。在“蜘蛛”抓取網(wǎng)頁內(nèi)容拧晕，提煉關(guān)鍵詞的這個過程中，就存在一個問題：“蜘蛛”能否看懂梅垄。如果網(wǎng)站內(nèi)容是flash和js厂捞，那么它是看不懂的，會犯迷糊哎甲，即使關(guān)鍵字再貼切也沒用蔫敲。相應(yīng)的，如果網(wǎng)站內(nèi)容是它的語言炭玫，那么它便能看懂奈嘿，它的語言即SEO。
THREE, 前端SEO
一吞加，網(wǎng)站結(jié)構(gòu)布局優(yōu)化：盡量簡單裙犹、開門見山尽狠，提倡扁平化結(jié)構(gòu)。
通過網(wǎng)站的結(jié)構(gòu)布局設(shè)計(jì)和網(wǎng)頁代碼優(yōu)化叶圃，使前端頁面既能讓瀏覽器用戶能夠看懂袄膏，也能讓“蜘蛛”看懂。 >>一般而言掺冠，建立的網(wǎng)站結(jié)構(gòu)層次越少沉馆，越容易被“蜘蛛”抓取，也就容易被收錄德崭。一般中小型網(wǎng)站目錄結(jié)構(gòu)超過三級斥黑，“蜘蛛”便不愿意往下爬，“萬一天黑迷路了怎么辦”眉厨。并且根據(jù)相關(guān)調(diào)查：訪客如果經(jīng)過跳轉(zhuǎn)3次還沒找到需要的信息锌奴，很可能離開。因此憾股，三層目錄結(jié)構(gòu)也是體驗(yàn)的需要鹿蜀。為此我們需要做到：
1,控制首頁鏈接數(shù)量
a,網(wǎng)站首頁是權(quán)重最高的地方，如果首頁鏈接太少服球，沒有“橋”茴恰，“蜘蛛”不能繼續(xù)往下爬到內(nèi)頁，直接影響網(wǎng)站收錄數(shù)量有咨。但是首頁鏈接也不能太多琐簇，一旦太多，沒有實(shí)質(zhì)性的鏈接座享，很容易影響用戶體驗(yàn)婉商，也會降低網(wǎng)站首頁的權(quán)重，收錄效果也不好渣叛。
b,因此對于中小型企業(yè)網(wǎng)站丈秩，建議首頁鏈接在100個以內(nèi)，鏈接的性質(zhì)可以包含頁面導(dǎo)航淳衙、底部導(dǎo)航蘑秽、錨文字鏈接等等，注意鏈接要建立在用戶的良好體驗(yàn)和引導(dǎo)用戶獲取信息的基礎(chǔ)之上箫攀。
2,扁平化的目錄層次
盡量讓“蜘蛛”只要跳轉(zhuǎn)3次肠牲，就能到達(dá)網(wǎng)站內(nèi)的任何一個內(nèi)頁。扁平化的目錄結(jié)構(gòu)靴跛，比如：“植物”--> "水果" --> "蘋果"缀雳、“桔子”、“香蕉”梢睛，通過3級就能找到香蕉了肥印。
3,導(dǎo)航優(yōu)化
導(dǎo)航應(yīng)該盡量采用文字方式识椰，也可以搭配圖片導(dǎo)航，但是圖片代碼一定要進(jìn)行優(yōu)化深碱，<img>標(biāo)簽必須添加“alt”和“title”屬性腹鹉，告訴搜索引擎導(dǎo)航的定位，做到即使圖片未能正常顯示時敷硅，用戶也能看到提示文字功咒。
其次，在每一個網(wǎng)頁上應(yīng)該加上面包屑導(dǎo)航绞蹦，好處：從用戶體驗(yàn)方面來說航瞭，可以讓用戶了解當(dāng)前所處的位置以及當(dāng)前頁面在整個網(wǎng)站中的位置，幫助用戶很快了解網(wǎng)站組織形式坦辟，從而形成更好的位置感，同時提供了返回各個頁面的接口章办，方便用戶操作锉走；對“蜘蛛”而言，能夠清楚的了解網(wǎng)站結(jié)構(gòu)藕届，同時還增加了大量的內(nèi)部鏈接挪蹭，方便抓取，降低跳出率休偶。
4,網(wǎng)站的結(jié)構(gòu)布局--不可忽略的細(xì)節(jié)
a,頁面頭部：logo及主導(dǎo)航梁厉，以及用戶的信息。
b,頁面主體：左邊正文踏兜，包括面包屑導(dǎo)航及正文词顾；右邊放熱門文章及相關(guān)文章，好處：留住訪客碱妆，讓訪客多停留肉盹，對“蜘蛛”而言，這些文章屬于相關(guān)鏈接疹尾，增強(qiáng)了頁面相關(guān)性上忍，也能增強(qiáng)頁面的權(quán)重。
c,頁面底部：版權(quán)信息和友情鏈接纳本。
d,特別注意：分頁導(dǎo)航寫法窍蓝，推薦寫法：“首頁 1 2 3 4 5 6 7 8 9 下拉框”，這樣“蜘蛛”能夠根據(jù)相應(yīng)頁碼直接跳轉(zhuǎn)繁成，下拉框直接選擇頁面跳轉(zhuǎn)吓笙。而下面的寫法是不推薦的，“首頁 下一頁 尾頁”朴艰，特別是當(dāng)分頁數(shù)量特別多時观蓄，“蜘蛛”需要經(jīng)過很多次往下爬混移，才能抓取，會很累侮穿、會容易放棄歌径。
5,控制頁面的大小，減少http請求亲茅，提高網(wǎng)站的加載速度
一個頁面最好不要超過100k回铛，太大，頁面加載速度慢克锣。當(dāng)速度很慢時茵肃，用戶體驗(yàn)不好，留不住訪客袭祟，并且一旦超時验残，“蜘蛛”也會離開。
二巾乳，網(wǎng)頁代碼優(yōu)化(參考您没，后期還會更新，還是不太全面)
1,<title>標(biāo)題：
只強(qiáng)調(diào)重點(diǎn)即可胆绊，盡量把重要的關(guān)鍵詞放在前面氨鹏，關(guān)鍵詞不要重復(fù)出現(xiàn)，盡量做到每個頁面的<title>標(biāo)題中不要設(shè)置相同的內(nèi)容压状。
2,<meta keywords>標(biāo)簽：
關(guān)鍵詞仆抵，列舉出幾個頁面的重要關(guān)鍵字即可，切記過分堆砌种冬。
<meta name="keywords" content="網(wǎng)賺論壇,網(wǎng)賺社區(qū),網(wǎng)賺培訓(xùn)"/>
3,<meta description>標(biāo)簽：
網(wǎng)頁描述镣丑，需要高度概括網(wǎng)頁內(nèi)容，切記不能太長碌廓，過分堆砌關(guān)鍵詞传轰，每個頁面也要有所不同。
<meta name="description" content="進(jìn)行一些表述" />
4,<body>中的標(biāo)簽：
盡量讓代碼語義化谷婆，在適當(dāng)?shù)奈恢檬褂眠m當(dāng)?shù)臉?biāo)簽慨蛙，用正確的標(biāo)簽做正確的事。讓閱讀源碼者和“蜘蛛”都一目了然纪挎。比如：h1-h6 是用于標(biāo)題類的期贫，<nav>標(biāo)簽是用來設(shè)置頁面主導(dǎo)航的等。
5,<a>標(biāo)簽:
頁內(nèi)鏈接异袄，要加 “title” 屬性加以說明通砍，讓訪客和 “蜘蛛” 知道。而外部鏈接，鏈接到其他網(wǎng)站的封孙，則需要加上 el="nofollow" 屬性, 告訴 “蜘蛛” 不要爬迹冤，因?yàn)橐坏爸┲搿迸懒送獠挎溄又螅筒粫倩貋砹?/p>
6,正文標(biāo)題要用<h1>標(biāo)簽:
“蜘蛛” 認(rèn)為它最重要虎忌，若不喜歡<h1>的默認(rèn)樣式可以通過CSS設(shè)置泡徙。盡量做到正文標(biāo)題用<h1>標(biāo)簽，副標(biāo)題用<h2>標(biāo)簽, 而其它地方不應(yīng)該隨便亂用 h 標(biāo)題標(biāo)簽膜蠢。
7,<img>應(yīng)使用 "alt" 屬性加以說明
8,文本縮進(jìn)不要使用特殊符號 ? 應(yīng)當(dāng)使用CSS進(jìn)行設(shè)置堪藐。版權(quán)符號不要使用特殊符號 ? 可以直接使用輸入法，拼“banquan”挑围，選擇序號5就能打出版權(quán)符號?礁竞。
10,巧妙利用CSS布局，將重要內(nèi)容的HTML代碼放在最前面杉辙，最前面的內(nèi)容被認(rèn)為是最重要的模捂，優(yōu)先讓“蜘蛛”讀取，進(jìn)行內(nèi)容關(guān)鍵詞抓取蜘矢。
11,不要使用iframe框架,因?yàn)椤爸┲搿币话悴粫x取其中的內(nèi)容
12,謹(jǐn)慎使用 display：none ：對于不想顯示的文字內(nèi)容枫绅，應(yīng)當(dāng)設(shè)置z-index或設(shè)置到瀏覽器顯示器之外。因?yàn)樗阉饕鏁^濾掉display:none其中的內(nèi)容硼端。
13,css代碼放在最前面，Js代碼前面
接下來談一下web性能優(yōu)化寓搬。
其實(shí)珍昨，web性能優(yōu)化與seo優(yōu)化有著很大的聯(lián)系，性能優(yōu)化做好了句喷，對seo有很大的幫助镣典。
接下來說一下自己在項(xiàng)目中做過的優(yōu)化方案，參考了好多大神的方案唾琼，以及自己總記得的經(jīng)驗(yàn)兄春，記錄下來，方便以后更新學(xué)習(xí)锡溯。
前沿：
研究表明：用戶最滿意的打開網(wǎng)頁時間是2-5秒赶舆，如果等待超過10秒，99%的用戶會關(guān)閉這個網(wǎng)頁
接下來我們將研究一下前端攻城獅如何來提高頁面的加載速度：
一祭饭，減少HTTP請求
似乎只要提到性能優(yōu)化芜茵，就會說到減少http請求，那么就說說如何減少http請求：：
1倡蝙，能使用icon不適用圖片九串，實(shí)在避免不了要使用圖片，就使用雪碧圖，
2猪钮，對圖片進(jìn)行壓縮（一般網(wǎng)站的圖片在200k到500k之間）盡量小于200k,
3品山，圖片轉(zhuǎn)base64
4, 使用靜態(tài)資源緩存
5, 添加Expires頭
a,頁面的初次訪問者會進(jìn)行很多HTTP請求，但是通過使用一個長久的Expires頭烤低，可以使這些組件被緩存肘交，下次訪問的時候，就可以減少不必要的HTPP請求拂玻，從而提高加載速度酸些。寫法：Cache-Control： max-age=12345600
6，壓縮css,js,html
7, 精簡代碼
8檐蚜，多使用外部文件魄懂，公共的js,css
9, 圖片懶加載，資源按需加載闯第，可以減少大量的的請求
二市栗，使用cdn加速
三，樣式css放頭部咳短，js放底部
四填帽，減少iframe數(shù)量，或者不要使用iframe因?yàn)榕老x不會爬取iframe里邊的內(nèi)容
五咙好，避免404
404代表服務(wù)器沒有找到資源篡腌，客戶端發(fā)送一個請求但是服務(wù)器卻返回一個無用的結(jié)果，時間浪費(fèi)掉了
六勾效，減少DNS查找
當(dāng)我們在瀏覽器的地址欄輸入網(wǎng)址（譬如： [小編簡書]http://www.reibang.com/u/12e7fdbba52f） 嘹悼，
然后回車，回車這一瞬間到看到頁面到底發(fā)生了什么呢层宫？
域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請求 --> 服務(wù)器響應(yīng)http請求杨伙，瀏覽器得到html代碼 --> 瀏覽器解析html代碼，并請求html代碼中的資源（如js萌腿、css限匣、圖片等） --> 瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶
七，使用ajax緩存
結(jié)束語
在學(xué)習(xí)過程中總結(jié)下來的毁菱，可能也不太全面米死，記錄下來，方便學(xué)習(xí)贮庞，希望能幫助到自己和大家哲身，也希望看到的攻城獅多多提出寶貴的意見，小編好更新學(xué)習(xí)贸伐。分享并快樂著勘天。
