seo vue 动态路由_VUE项目SEO问题的解决
1. SEOSEO(搜索引擎優化):搜索引擎優化的中文翻譯。使用搜索引擎的規則來提高網站的自然排名相關的搜索引擎。當一個網絡爬蟲抓取網頁的內容,它需要分析的內容頁面。要點如下:閱讀內容的關鍵字和描述元標簽。抓取和分析基于語義html標記的內容。的影響一個網站,作為一個整體使用div標簽不同于html5標簽的正確使用。讀標簽的鏈接,你可以通過鏈接跳轉到其他網站的標簽。首先(無論是履帶跳躍,或繼續抓取內容然后跳躍,取決于算法是廣度優先和深度優先)標簽h1-h6等不同程度的強調。一般來說,h1被認為是重要內容。也有強勁和em標記重點內容。為什么seo不友好vue單頁?爬蟲程序不會執行js在爬行過程中,所以跳隱藏在js將不會通過js vue控制路線,然后呈現相應的頁面。
因此,搜索引擎蜘蛛只能包括一頁,和相關的子頁的內容不能在百度搜索。加載頁面時,瀏覽器的渲染包括:html解析dom樹建設、cssom建設、javascript解析、布局、畫畫,解析javascript時,我們回到觸發vue的渲染,然后安裝id的div元素的應用,我們只能看到我們的內容頁面,所以即使vue渲染機制是非常快,我們仍然可以看到白色的屏幕一段時間,和問題造成不良的用戶體驗不能TDK相應頁面的標題、關鍵字、描述不同的配置,每個頁面的標題和元標記是相同的,這是不利于網絡爬蟲的爬行。第二,網站呈現1。\u201C后端渲染\u201D是指傳統的ASP, Java或PHP渲染機制;瀏覽器將直接接收HTML字符串由服務器計算(計算:服務器解析模板文件存儲在服務器端),瀏覽器只解析HTML,并顯示圖像所代表的HTML用戶。
一個點擊后端呈現網站將刷新,然后從后端請求新頁面數據。好處:前端消耗更少的時間(前端只負責顯示html),這有利于搜索引擎優化。缺點:網絡傳輸大量的數據,而占用(部分或一小部分)服務器計算資源,和從響應的數據量(稍微)大,模板的交互和風格前端已經發生了變化,變化是緊隨其后的是鏈接。2. \u201C前端呈現\u201D是指使用JS渲染頁面的大部分內容,代表了流行的水療單頁面應用程序;前端呈現意味著從后端瀏覽器將得到一些信息,這些信息可能angularjs模板文件,或者它是數據打包等各種數據交換格式的JSON,甚至直接合法的HTML字符串。前端的信息之后,它組織和安排最后一個可讀的HTML字符串形式。
在反應\/ vue在這種情況下,服務器只jsx \/模板轉換成html,和客戶端坐標之間的同步虛擬dom和真正的dom根據道具\/狀態改變。好處:局部刷新。沒有必要每次都延遲加載一個完整的頁面請求。如果只有可見的區域中的數據加載頁面的開頭,和rp負載其他數據滾動后,可以通過react-lazyload豐富的交互。使用JS實現各種特效和節省服務器的成本。節約用電和金錢。JS支持CDN部署和部署非常簡單。它只需要服務器支持靜態文件自然關注分離的設計。服務器提供了一個接口來訪問數據庫。JS只側重于數據采集和顯示。JS學習一次,使用它無處不在。它可以用于開發Web服務,移動、桌面應用程序類型。缺點:前端是耗時,不利于搜索引擎優化,第一個屏幕加載很慢。
溫泉,這是通常用于前端呈現,將包所有JS作為一個整體。不容忽視的問題是文件太大,導致之前呈現等待很長時間。特別是當網速差,它不是一個非常好的體驗用戶等待白色屏幕。3.\u201C同構呈現\u201D是指前端和后端共享JS,和第一個渲染是用來直接輸出HTML。一般來說,同構渲染是一種常見的前后兩端之間的部分。例如,vue \/反應服務器呈現。3、vue-cli3解決SEO和第一屏幕加載問題。SSR缺點:特定代碼只能在特定的生命周期使用鉤子;一些外部擴展庫(外部庫)可能需要特殊的治療才能運行在服務器呈現應用程序。Nuxt基于Vue生態是一個更高層次的框架,它提供了極其方便開發服務器端Vue呈現應用程序的開發經驗。
比ssr簡單。3.呈現前:prerender-spa-plugin。如果你只是提高幾個營銷頁面的搜索引擎優化(如\/,\/,\/接觸,等等),那么你可能需要pre-render。不需要使用web服務器實時動態編譯的HTML。相反,呈現前的方法是簡單地生成靜態HTML文件用于特定的路線在構建時。的優勢是,它更容易設置呈現前,你可以使用你的前端是一個完全靜態的網站。如果你使用webpack,您可以使用prerender-spa-plugin輕松地添加預呈現。3.Vue預呈現隨著項目只有提高了搜索引擎優化的幾頁,使用預呈現方法。預呈現插件使用vue prerender-spa-plugin正式推薦。使用步驟:1。
添加安裝新的Vue ({el: #應用,路由器,組件:{應用},安裝(){(新的事件(' render-event ')); 3)))。添加const PrerenderSPAPlugin =要求(prerender-spa-plugin) const渲染器=插件:[\u2026\u2026新PrerenderSPAPlugin({\/ \/生成文件的路徑也可以被webpakc一樣包裝。\/ \/下面的句子很重要! ! !\/ \/這個目錄只能有一個水平。如果目錄級別大于1的水平,不會有錯誤提示當生成它。這只會被困在呈現。staticDir:(__dirname,\u201D), \/ \/對應自己的路由文件,如指數參數,您需要編寫\/索引\/ param1。
如果沒有配置,這段pre-compilation不會被執行。渲染器:新渲染器({注入:{foo:\u201C酒吧\u201D},無頭:假的,\/ \/(新事件(\u201Crender-event\u201D)),這兩個應該對應的事件名稱。renderAfterDocumentEvent:\u2018render-event\u2019, renderAfterTime: 5000}}))運行構建包裝(或其它文件)后,有一個成功的頁面內容。
總結
以上是生活随笔為你收集整理的seo vue 动态路由_VUE项目SEO问题的解决的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: jmeter提取mysql数据_通过jm
- 下一篇: c++矩阵连乘的动态规划算法并输出_你在