首頁 > 新聞資訊 >

石家莊網站關鍵優化

2020-06-10 13:24 發布:展為網絡有限公司

公司使用現代JavaScript框架和庫(例如React,Angular或Vue)建立網站的情況相當普遍。到目前為止,很明顯,網絡已經脫離了普通的HTML,進入了JS時代。

雖然一家企業愿意利用最新技術并沒有什么不同尋常,但我們需要解決這一趨勢的嚴峻現實:大多數向JavaScript框架的遷移并不是在考慮用戶或自然流量的情況下進行的。

讓我們將其稱為JavaScript悖論:

在聽到關于JavaScript框架創建令人驚嘆的UX的所有嗡嗡聲之后,大品牌跳上了JavaScript炒作之旅。
事實表明,JavaScript框架確實很復雜。
大品牌完全阻止了向JavaScript的遷移。他們失去了自然的流量,常常不得不偷偷摸摸地走,而不是為用戶創造這種驚人的UX旅程(我將在本文中提到一些示例)。
由于沒有回頭路,SEO必須學習如何處理JavaScript網站。


但這說起來容易做起來難,因為要使JavaScript網站在搜索引擎中取得成功對于開發人員和SEO都是一個真正的挑戰。

本文旨在作為我全面的JavaScript SEO終極指南的后續文章,并且旨在使其盡可能地易于遵循。因此,請為自己喝杯咖啡,讓我們玩得開心–這里有六個步驟可幫助您診斷和解決JavaScript SEO問題。

步驟1:使用網址檢查工具查看Google是否可以呈現您的內容
URL檢查工具(以前稱為Google Fetch and Render)是一款很棒的免費工具,可讓您檢查Google是否可以正確呈現您的頁面。

URL檢查工具要求您將網站連接到Google Search Console。如果您還沒有帳戶,請查看Google的幫助頁面。

打開Google Search Console,然后單擊URL檢查按鈕。



在“ URL表單”字段中,鍵入要審核的頁面的完整URL。

然后單擊“實時測試URL”。


測試完成后,單擊“查看已測試的頁面”。




最后,單擊“屏幕快照”選項卡以查看渲染的頁面。


向下滾動屏幕截圖,以確保正確呈現您的網頁。問自己以下問題:

主要內容可見嗎?
Google可以看到用戶生成的評論嗎?
Google可以訪問類似文章和產品之類的區域嗎?
Google可以看到您頁面的其他關鍵元素嗎?

為什么屏幕截圖看起來與我在瀏覽器中看到的不同?以下是一些可能的原因:

Google在渲染時遇到超時。
渲染時發生了一些錯誤。您可能使用了Google Web Rendering Service不支持的某些功能(Google使用已有四年歷史的Chrome 41進行Web渲染,它不支持許多現代功能)。
您已阻止Googlebot的重要JavaScript文件。
第2步:確保您沒有誤阻止JavaScript文件
如果Google無法正確呈現您的頁面,則應確保您沒有在robots.txt中阻止Googlebot的重要JavaScript文件

TL; DR:什么是robots.txt?

這是一個純文本文件,用于指示Googlebot或任何其他搜索引擎bot是否被允許請求頁面/資源。

幸運的是,URL檢查工具指出了被robots.txt阻止的呈現頁面的所有資源。


但是從渲染的角度來看,如何判斷阻塞的資源是否重要?

您有兩個選擇:基本和高級。

基本的
在大多數情況下,最好向開發人員詢問一下是一個好主意。他們創建了您的網站,所以他們應該很了解。

顯然,如果腳本的名稱稱為content.js或productListing.js,則它可能是相關的,不應被阻止。

不幸的是,就目前而言,URL Inspection不會通知您被阻止的JS文件的嚴重性。以前的Google Fetch and Render具有這樣的選擇:

高級
現在,我們可以使用Chrome開發者工具。

出于教育目的,我們將檢查以下URL:http : //botbenchmarking.com/youshallnotpass.html

在最新版本的Chrome中打開頁面,然后轉到Chrome開發者工具。然后移至“網絡”選項卡并刷新頁面。

最后,選擇所需的資源(在本例中為YouShallNotPass.js),右鍵單擊,然后選擇“阻止請求URL”。



刷新頁面,查看是否有重要內容消失。如果是這樣,那么您應該考慮從robots.txt文件中刪除相應的規則。

步驟3:使用網址檢查工具修復JavaScript錯誤
如果您看到Google Fetch and Render無法正確呈現頁面,則可能是由于呈現時發生了JavaScript錯誤。

要進行診斷,請在“ URL檢查”工具中單擊“更多信息”選項卡。


然后,向您的開發人員顯示這些錯誤,讓他們進行修復。

JavaScript代碼中只有一個錯誤可以停止對Google的呈現,從而使您的網站無法建立索引。

您的網站在最新的瀏覽器中可能運行良好,但是如果在舊版瀏覽器中崩潰(Google Web Rendering Service基于Chrome 41),則您的Google排名可能會下降。

需要一些例子嗎?

Angular官方文檔中的一個錯誤導致Google無法渲染我們的測試Angular網站。
曾幾何時,Google對Angular 2+的官方網站Angular.io的某些頁面進行索引編制。
如果您想知道為什么會發生,請閱讀我的JavaScript SEO終極指南。

旁注:如果由于某些原因您不想使用URL Inspection工具來調試JavaScript錯誤,則可以改用Chrome 41。

就我個人而言,我更喜歡將Chrome 41用于調試目的,因為它具有更高的通用性和靈活性。但是,URL Inspection工具在模擬Google Web Rendering Service方面更準確,因此,對于那些不熟悉JavaScript SEO的人,我建議這樣做。

步驟4:檢查您的內容是否已在Google中建立索引
僅查看Google是否可以正確呈現您的網站還不夠。您必須確保Google已正確索引您的內容。最好的選擇是使用site:命令。

這是一個非常簡單且功能強大的工具。它的語法非常簡單:site:[網站的網址]“ [要搜索的片段]”。請注意,不要在site:和URL之間放置空格。

假設您要檢查Google是否已索引Angular.io主頁上的以下文本“跨所有平臺開發”。


在Google中鍵入以下命令:site:angular.io“跨所有平臺開發”


如您所見,Google將該內容編入索引,這是您想要的,但并非總是如此。

帶走:

盡可能使用site:命令。
檢查不同的頁面模板,以確保您的整個網站正常運行。不要停留在一頁上!
如果還可以,請繼續下一步。如果不是這種情況,可能是由于以下幾種原因造成的:

Google仍然沒有呈現您的內容。它應該在Google訪問該網址后的幾天/幾周內發生。如果您網站的特征要求您的內容盡快索引,請實施SSR。
Google在呈現頁面時遇到超時。你的腳本快嗎?服務器負載高時,它們是否仍保持響應?
Google仍在請求舊的JS文件。好吧,Google嘗試緩存很多以節省其計算能力。因此,CSS和JS文件可能會被積極地緩存。如果您發現您已修復所有JavaScript錯誤,但Google仍無法正確呈現您的網站,則可能是因為Google使用了已緩存的舊JS和CSS文件。要解決此問題,您可以在文件名中嵌入一個版本號,例如,將其命名為bundle3424323.js。您可以在《 HTTP緩存的Google指南》中閱讀更多內容。
在建立索引時,如果Google認為某些資源對基本頁面內容沒有貢獻,則可能不會獲取某些資源。

第5步:確保Google可以發現您的內部鏈接
您應該遵循一些簡單的規則:

Google需要適當的<a href>鏈接來發現您網站上的URL。
如果僅當有人單擊按鈕時將您的鏈接添加到DOM,則Google不會看到它。
就是這么簡單,許多大公司都會犯這些錯誤。

正確的鏈接結構
為了抓取網站,Googlebot需要具有傳統的“ href”鏈接。如果未提供,那么Googlebot將無法訪問您的許多網頁!

我認為Google I / O會議上的Tom Greenway(Google代表)對此做了很好的解釋:


請注意:如果您擁有正確的<a href>鏈接,并帶有一些其他參數(如onClick,data-url,ng-href),則對Google來說仍然很好。

開發人員常犯的錯誤:Googlebot無法訪問第二頁及其后的分頁

開發人員常犯的錯誤是,不允許Googlebot從分頁的第二頁及以后的頁面中發現頁面。

當打開Gearbest,Aliexpress和IKEA的移動版本時,您會很快注意到,實際上,它們并沒有讓Googlebot看到分頁鏈接,這確實很奇怪。當Google為這些網站啟用移動優先索引功能時,這些網站將遭受損失。

您如何自行檢查?
如果尚未下載Chrome 41,請從Ele.ph/chrome41獲取。

然后導航到任何頁面。為了本教程的緣故,我使用的是AliExpress.com的移動版本。出于教育目的,如果您遵循相同的示例,則很好。

打開Aliexpress的“手機”類別的移動版本。


然后,右鍵單擊“查看更多”,然后選擇“檢查”按鈕以查看其實現方式。


如您所見,沒有指向分頁第二頁的<a href>和<link rel>鏈接。

Aliexpress.com上的手機類別中有2,000多種產品。由于移動版Googlebot只能訪問其中的20個,因此僅占1%!

這意味著該類別中99%的產品對于移動Googlebot都是不可見的!太瘋狂了!

這些錯誤是由延遲加載的錯誤實現引起的。還有許多其他網站也犯了類似的錯誤。您可以在我的文章“ Mobile First Indexing中可能失敗的流行網站 ”中閱讀更多內容。

TL; DR:僅使用link rel =“ next”對Google來說是太微弱的信號
注意:通常使用“ link rel =” next”來指示分頁序列。但是,凱爾·布蘭切特(Kyle Blanchette)的發現似乎表明,僅“ link rel =” next”這個鏈接對Google來說太弱了,應該通過傳統的<a href>鏈接加以加強。


John Mueller對此進行了更多討論:

“我們可以了解哪些頁面與rel next,rel =” previous”一起,但是如果頁面上根本沒有任何鏈接,那么我們很難在頁面之間進行爬網。(...)因此,在頁面頂部使用rel =” next” rel =” previous”是一個很好的主意,告訴我們這些頁面的連接方式,但是您確實需要頁面上的常規HTML鏈接。


不要誤會我的意思-使用<link rel =” next”>并沒有錯。相反,它們是有益的,但是最好將這些標簽與傳統的<a href>鏈接結合使用。

檢查Google是否可以看到菜單鏈接
審核JavaScript網站的另一個重要步驟是確保Google可以看到您的菜單鏈接。要檢查這一點,請使用Chrome 41。

就本教程而言,我們將使用Target.com的情況:



首先,打開任何瀏覽器并從菜單中選擇一些鏈接:

https://www.target.com/c/clothing/-/N-5xtd3- >服裝
https://www.target.com/c/shoes/-/N-55b0t- >鞋子
https://www.target.com/c/furniture/-/N-5xtnr- >家具
接下來,打開Chrome41。在Chrome開發者工具中(單擊Ctrl + Shift + J),導航到“元素”標簽。

結果?幸運的是,Google可以選擇Target.com的菜單鏈接。


現在,檢查Google是否可以在您的網站上獲取菜單鏈接,并查看您是否也處于目標位置。

步驟6:檢查Google是否可以發現隱藏在標簽下的內容
我經常觀察到,在許多電子商務商店中,Google無法發現和索引隱藏在選項卡下的內容(產品描述,意見,相關產品等)。我知道這很奇怪,但是很常見。

這是確保SEO可以隱藏選項卡下隱藏內容的每次SEO審核的關鍵部分。

打開Chrome 41并導航到Boohoo.com上的任何產品;例如,肌肉貼身背心。


單擊詳細信息和保養以查看產品說明:

“細節與關懷
94%棉6%氨綸。肌肉健美背心。模特身高為6'1“,并穿著英國M碼。“
現在,是時候檢查它是否在DOM中了。為此,請轉到Chrome開發者工具(Ctrl + Shift + J),然后點擊“網絡”標簽。

確保啟用了禁用緩存選項。

單擊F5刷新頁面。刷新后,導航至“元素”選項卡并搜索產品說明:

如您所見,對于boohoo.com,Google能夠查看產品說明。

完善!現在花點時間檢查您的網站是否正常。

包起來
顯然,JavaScript SEO是一個非常復雜的主題,但是我希望本教程對您有所幫助。

如果您仍在努力爭取Google排名,則可能需要考慮實施動態渲染或混合渲染。而且,當然,隨時可以在Twitter上與我聯系,以了解此需求或其他SEO需求。


返回列表
(★^O^★)MG夢幻邂逅APP下载 银河国际棋牌游戏下载 江苏11选五乐选玩法介绍 山西快乐十分预测号码 有没有玩325棋牌输的人 沈阳四冲娱网棋牌官网 科乐麻将万能辅助挂 09年开拓者vs公牛 龙江p62开奖结果 开心乐棋牌官网下载 神来湖北麻将 麻将机 重庆时时现场开奖结果 吉林快三最新规则 湖南快乐十分前一选号 456娱乐棋牌1.0 微乐宁夏麻将下载安装