搜索引擎優(yōu)化怎么做(

如何在代碼上做SEO以及單頁(yè)項目如何實(shí)現SEOvueseo)

　　什么是SEO搜索引擎優(yōu)化（Search engine optimizationvue seo，簡(jiǎn)稱(chēng)SEO），是指為了增加搜索引擎自然搜索結果（非商業(yè)推廣結果）中收錄的數量而做的優(yōu)化行為) 和網(wǎng)頁(yè)的排名位置。是為了從搜索引擎獲得更多的免費流量和更好的展示圖片。

　　SEM（Search engine marketing，搜索引擎營(yíng)銷(xiāo)）不僅包括SEO，還包括付費商業(yè)推廣優(yōu)化vue seo。

　　本文主要介紹前端如何在代碼上做SEO，以及如何實(shí)現單頁(yè)項目的SEOvue seo。

　　搜索引擎的工作原理 要了解SEO，首先要了解搜索引擎的工作原理。原理比較復雜，簡(jiǎn)化流程如下：

　　爬蟲(chóng)抓取網(wǎng)頁(yè)內容

　　一般來(lái)說(shuō)，爬蟲(chóng)首先從一個(gè)頁(yè)面開(kāi)始，從中提取到其他頁(yè)面的鏈接，然后將它們作為下一個(gè)請求的對象，一直重復這個(gè)過(guò)程。因此，要想有一個(gè)好的SEO，你需要在主要的網(wǎng)站上有外鏈，這會(huì )增加你網(wǎng)站被搜索引擎抓取的機會(huì )。

　　分析網(wǎng)頁(yè)內容

　　爬蟲(chóng)獲取到 HTML 后，會(huì )分析其內容。一般需要去除雜項、分詞、簡(jiǎn)歷索引數據庫。什么是索引數據庫？簡(jiǎn)單來(lái)說(shuō)就是記錄一個(gè)詞出現在哪些文檔中，出現了多少次，出現在什么地方等等。為什么要建立簡(jiǎn)歷索引數據庫？它用于快速搜索。

　　搜索和排序

　　搜索會(huì )根據你輸入的關(guān)鍵詞查詢(xún)對應的索引數據庫，并對結果進(jìn)行處理和排序。

　　SEO網(wǎng)站前端編碼結構

　　網(wǎng)站 結構要清晰。一般網(wǎng)站的結構是樹(shù)狀的，一般分為三個(gè)層次：首頁(yè)→頻道頁(yè)（列表頁(yè)）→文章頁(yè)（詳情頁(yè)）。

　　網(wǎng)站 的結構應該是扁平的。結構層數越少越好。一般不應超過(guò)三層。搜索引擎到了第三層一般都不想深入爬取。大多數網(wǎng)站，如掘金、雪球等，都是網(wǎng)站的兩層結構，它們的首頁(yè)和頻道頁(yè)是同一個(gè)頁(yè)面。

　　導航

　　頁(yè)面應該有簡(jiǎn)潔的導航。導航可以讓搜索引擎知道網(wǎng)站的結構，也可以讓搜索引擎知道當前頁(yè)面在網(wǎng)站的結構中的級別。建議：

　　每個(gè)頁(yè)面都收錄導航。更多內容網(wǎng)站，可以使用面包屑導航。該鏈接使用文本鏈接。如果是圖片，則使用 alt 屬性通知搜索引擎鏈接指向的位置。規范網(wǎng)址

　　一個(gè)標準化的、簡(jiǎn)單的、易于理解的 URL 可以讓搜索引擎更好地抓取內容。建議：

　　同一個(gè)頁(yè)面只對應一個(gè)url。多個(gè) URL 可以使用 301 進(jìn)行重定向。url可以反映網(wǎng)頁(yè)的內容和網(wǎng)站的結構信息。例如}

　　Sitemap可以通知搜索引擎在網(wǎng)站上有哪些頁(yè)面可供抓取，讓搜索引擎更智能地抓取網(wǎng)站。

　　機器人.txt

　　搜索引擎抓取網(wǎng)站 訪(fǎng)問(wèn)的第一個(gè)文件是robots.txt。在該文件中聲明網(wǎng)站中不想被蜘蛛訪(fǎng)問(wèn)的部分，使網(wǎng)站的部分或全部?jì)热莶荒鼙凰阉饕婧褪珍?，或者可以通過(guò)robots.txt指定使搜索引擎只搜索收錄指定的內容。

　　合理的}

　　對于不同的返回碼，搜索引擎的處理邏輯是不同的。

　　如果網(wǎng)站暫時(shí)關(guān)閉，建議在無(wú)法打開(kāi)網(wǎng)頁(yè)時(shí)使用503狀態(tài)。503可以通知百度蜘蛛頁(yè)面暫時(shí)不可用，請稍后再試。如果百度蜘蛛對您的網(wǎng)站抓取壓力過(guò)大，請盡量不要使用404，也建議返回503，這樣百度蜘蛛過(guò)一段時(shí)間會(huì )再次嘗試抓取該鏈接。如果該站點(diǎn)當時(shí)是免費的，它將被成功抓取。一些網(wǎng)站希望百度只會(huì )收錄部分內容，比如審核后的內容，一段時(shí)間積累的新用戶(hù)頁(yè)面等等。在這種情況下，建議對新發(fā)布的內容暫時(shí)返回403，待審核或做好處理后再返回正常返回碼。當網(wǎng)站搬遷或域名變更時(shí)，請使用301返回。合適的標題

　　標題是網(wǎng)頁(yè)的主要內容，告訴搜索引擎。

　　每個(gè)網(wǎng)頁(yè)都應該有一個(gè)唯一的標題。不要為所有頁(yè)面使用默認標題。標題應簡(jiǎn)潔明了，收錄本網(wǎng)頁(yè)最重要的內容，不得列出與網(wǎng)頁(yè)內容無(wú)關(guān)的信息。用戶(hù)通常從左側瀏覽。在右邊，重要的內容應該放在標題的頂部。百度建議說(shuō)明：

　　首頁(yè)：網(wǎng)站名稱(chēng)或網(wǎng)站名稱(chēng)_服務(wù)介紹/產(chǎn)品介紹頻道頁(yè)面：頻道名稱(chēng)_網(wǎng)站名稱(chēng)文章頁(yè)面：文章標題_頻道名稱(chēng)_網(wǎng)站說(shuō)明有合適的名字

　　描述是對網(wǎng)頁(yè)內容的簡(jiǎn)要概括。該標簽的存在與否不影響頁(yè)面的權重，只會(huì )作為搜索結果摘要的選擇目標。百度推薦做法：

　　為每個(gè)網(wǎng)頁(yè)創(chuàng )建不同的描述，避免所有網(wǎng)頁(yè)使用相同的描述。網(wǎng)站首頁(yè)、頻道頁(yè)、產(chǎn)品參數頁(yè)等沒(méi)有摘要的網(wǎng)頁(yè)最適合用description來(lái)準確描述網(wǎng)頁(yè)，不要堆砌關(guān)鍵詞，合理長(cháng)度的HTML語(yǔ)義

　　HTML 語(yǔ)義使用標簽和屬性來(lái)描述內容。所以HTML語(yǔ)義是SEO的基石。一般建議：

　　HTML 結構應該清晰簡(jiǎn)潔。跳轉使用標簽，不要使用js跳轉圖片加alt指令文章使用標簽攜帶... Vue單頁(yè)項目的SEO 目前，SEO支持較好的項目方案是使用服務(wù)端渲染. 所以如果項目有SEO需求，那么更好的解決方案是服務(wù)端渲染。

　　如果你采用了前后分離的單頁(yè)項目，并且你的網(wǎng)站內容不需要AJAX來(lái)獲取和顯示內容，那么你可以試試prerender-spa-plugin插件，這是一個(gè)webpack 插件。它可以幫助您在打包過(guò)程中通過(guò)無(wú)頭瀏覽器呈現您的頁(yè)面并生成相應的 HTML。當然，這個(gè)方案適合你的路由是靜態(tài)的，而且路由數量不是海量的。

　　如果你的內容是通過(guò)AJAX動(dòng)態(tài)獲取的，那么你可以為vue單頁(yè)項目嘗試prerender。這是一種預渲染服務(wù)，可以幫助您通過(guò)無(wú)頭瀏覽器渲染頁(yè)面并返回 HTML。此解決方案與 prerender-spa-plugin 非常相似。兩者都使用無(wú)頭瀏覽器來(lái)呈現頁(yè)面。不同之處在于渲染的時(shí)間。Prerender-spa-plugin 是在打包過(guò)程中渲染的，注定只渲染靜態(tài)路由。預渲染是根據請求渲染的，因此可以渲染動(dòng)態(tài)路由?，F在我將專(zhuān)注于預渲染程序。

　　使用預渲染

　　1、安裝

　　$ npm install prerender copy code 2、 start service server.js

　　const prerender = require(\'prerender\');const server = prerender();server.start(); 復制代碼3、測試

　　}

　　預渲染方案的原理

　　首先，服務(wù)器收到一個(gè)頁(yè)面請求，然后判斷該請求是否來(lái)自搜索引擎的爬蟲(chóng)。如果不是，則直接返回單頁(yè)項目的HTML，按照正常單頁(yè)項目的工作模式（客戶(hù)端渲染），如果是，則將請求轉發(fā)給預渲染服務(wù)，預渲染服務(wù)將通過(guò)headless瀏覽器進(jìn)行預渲染，渲染完成后會(huì )返回內容，以便爬蟲(chóng)獲取帶有內容的HTML。預渲染中間件用于判斷請求是否來(lái)自搜索引擎爬蟲(chóng)并轉發(fā)請求。

　　值得注意的是，預渲染服務(wù)不收錄無(wú)頭瀏覽器，需要自行安裝chrome瀏覽器。因此，整個(gè)程序的運行需要三個(gè)部分：

　　Chrome 瀏覽器預渲染服務(wù) prerender 中間件 那么預渲染服務(wù)是如何知道頁(yè)面渲染完成的呢？Prerender 服務(wù)計算未完成請求的數量以確定頁(yè)面何時(shí)完成加載。一旦未完成的請求數達到零，服務(wù)將等待一段時(shí)間（默認 500 毫秒），然后保存 HTML。

　　預渲染的最佳實(shí)踐

　　經(jīng)過(guò)實(shí)踐，請求prerender渲染的頁(yè)面需要時(shí)間?？斓臅r(shí)候大概2s左右，慢的時(shí)候可以長(cháng)達8s。一般來(lái)說(shuō)，請求時(shí)間最好在3s以?xún)?。于是我從以下幾個(gè)方面入手，探索了預渲染的優(yōu)化方法。

　　減少資源請求時(shí)間

　　影響prerender渲染時(shí)間的資源主要包括js請求資源和api請求資源。api請求時(shí)間一般由后端決定，所以我考慮的是如何減少js資源請求時(shí)間。一般預渲染服務(wù)渲染的資源請求地址是由頁(yè)面請求URL決定的，所以一般是在線(xiàn)地址。如果我們在網(wǎng)站的服務(wù)器上部署預渲染服務(wù)，讓預渲染服務(wù)請求資源到本地，那么可以縮短資源的請求時(shí)間。

　　如果您的在線(xiàn)服務(wù)啟用了 CDN，那么本地資源還有一個(gè)優(yōu)勢，那就是節省 CDN 流量。

　　優(yōu)化預渲染選項

　　prerender 提供了一些自定義選項

　　pageDoneCheckInterval：該參數是預渲染檢查頁(yè)面請求是否完成的定時(shí)器時(shí)間。默認為500ms，即每500ms檢查一次未完成的請求數是否為零。我將其修改為 100ms 以增加其檢查的頻率。

　　waitAfterLastRequest：該參數是最后一次請求完成后的等待時(shí)間。默認值為 500 毫秒。請求完成后，頁(yè)面更新和渲染需要時(shí)間。如果立即返回，則可能無(wú)法及時(shí)呈現請求的數據。我將時(shí)間更改為 200 毫秒。

　　預渲染插件

　　}

　　添加}

　　var prerender = require(\'prerender\');var server = prerender()server.use(prerender.}

　　復制代碼 如果你需要設置301重定向，你可以這樣做

　　Prerender 根據未完成的請求數判斷渲染是否結束。但是我們返回給搜索引擎的HTML只需要渲染js動(dòng)態(tài)添加的DOM，其實(shí)不需要渲染css或者渲染接口返回的圖片。讓我們看看預渲染器在渲染過(guò)程中是否會(huì )請求這些資源。Prerender 可以開(kāi)啟是否打印請求，開(kāi)啟方法如下：

　　var server = prerender({ logRequests: true}); 復制代碼后，就可以在控制臺看到請求了。該請求收錄 css 和圖像資源。

　　2019-07-17T04:34:03.180Z-47}

　　網(wǎng)頁(yè)的 HTML 文件。網(wǎng)頁(yè)截圖（視口或全屏）。網(wǎng)頁(yè)的 PDF 文件。網(wǎng)頁(yè)的 HAR 文件執行你自己的 javascript 并返回 json 和 HTML。顯然，這些函數需要加載你需要的 CSS 或圖片資源。否則網(wǎng)頁(yè)顯示有問(wèn)題。這時(shí)候，如果你只需要滿(mǎn)足SEO要求不需要的功能，那么blockResources插件就可以派上用場(chǎng)了。添加插件的方式如下：

　　var prerender = require(\'prerender\'); var server = prerender()server.use(prerender.blockResources());server.start(); 使用blockResources插件后，圖片資源和字體資源會(huì )被中止（放棄）。

　　自定義渲染結束時(shí)間

　　如果你想更精細地控制 prerender 返回的時(shí)間，提前結束或延遲結束，那么你可以使用這個(gè)標志 window.prerenderReady。

　　首先，您需要將 window.prerenderReady 設置為 false。當 prerender 檢測到 window.prerenderReady 為 false 后，它會(huì )等待你將其設置為 true 再返回結果。

　　渲染完成后復制代碼，一般在界面請求完成，渲染完成后

　　window.prerenderReady = true; 復制代碼，以便您可以更自由地控制渲染何時(shí)結束。

　　啟用緩存

　　緩存有兩個(gè)方面，一個(gè)是}

　　第一}

　　$ npm install redis , done);)).set(\'afterRender\', function(err, req, prerender_res) {client.set(req.url, prerender_res.body)}); 復制代碼可以通過(guò) beforeRender 和 afterRender Hooks 進(jìn)行細粒度控制，對于頻繁的內容變化不緩存或者短期緩存，對于不頻繁的內容變化設置長(cháng)期緩存。啟用緩存不僅可以加快返回時(shí)間，還可以減輕服務(wù)器的壓力。

　　統計和監測

　　可以在中間件的afterRender中進(jìn)行統計和監控。

　　prerender.set(\'afterRender\', function(err, req, prerender_res) {if(err){ // 這里是錯誤監控代碼 // ... // return} let {headers: req_headers, originalUrl} = req let {headers: res_headers, body} = prerender_res // 這里是統計代碼，可以保存請求并返回相關(guān)信息}) 復制代碼匯總

　　通過(guò)以上優(yōu)化方法（除了自定義渲染結束時(shí)間和開(kāi)啟緩存），我已經(jīng)穩定了HTML請求時(shí)間在5s左右。