優化大型菜單以進行 SEO：數位行銷大師班
Posted: Wed Dec 04, 2024 7:50 am
我們的數位行銷代理商每天都在為客戶開展工作，使他們的網站更加成功。
我們做的事情有很多，首要領域是網頁設計、網頁開發、圖形設計以及所有數位行銷學科，例如搜尋引擎優化(SEO)、按點擊付費(PPC) 和社交媒體活動。
我們還對客戶的網站進行深入的審查和分析，並深入研究影響其網站性能的一些真正令人著迷的方面。
最近的焦點之一是「超級選單」對特定網站的速度和功能的影響。
什麼是超級菜單？
大型選單是一種網站導航系統，其下拉式選單可 柬埔寨手機號碼列表 在懸停或點擊時展開。擴展的菜單選項為用戶提供了更深入的網站鏈接，特別是對於那些擁有大量豐富內容的網站。
大型菜單是幫助訪客快速獲取精細內容的好方法。
舉個例子；
BBC 的主導航位於「標頭」中，當您按一下「體育」時，您將被導向到一個新頁面，即「體育」部分的主索引頁面，以及「體育」子導航。
如果您隨後點擊「足球」子部分，您將進入更高層級的導航，其中包含BBC 體育網站「足球」部分的所有關鍵部分。
BBC 體育頻道選單系統。
這是一個相當靜態的大型菜單，並且有充分的理由。每個子選單都會在上下文中加載，以便用戶在他們選擇導航的區域內擁有清晰的路徑。 BBC 確保不會加載不相關的鏈接，因此用戶體驗是最佳的，並且伺服器/瀏覽器不會受到無關代碼的負擔。
另一種常見的大型菜單是您在 B&Q 的diy.com網域上看到的那種。它比 Beeb 的菜單更即時動態，因此用戶可以立即深入了解部門和部分。然而，它確實加載了“無處不在的一切”，這既非常有用，但也是一種技術開銷。
百安居超級選單系統，
超級菜單的缺點
雖然這些豐富的選單系統對於大幅改善使用者體驗 (UX) 很有用，但也可能存在缺點。
您嘗試從網頁中利用的功能和功能越多，提供龐大的巨型選單所需的 HTML 行就越多。額外的程式碼會增加“開銷”，並可能因為額外的“呼叫”插件和需要加載以提供選單功能的額外腳本而減慢網頁速度。
最重要的是，您要為程式碼添加更多鏈接，因此，當像GoogleBot 這樣的抓取工具出現來讀取您的網站並查看重要內容時，您會將這些機器人發送到許多其他頁面，而不僅僅是一個狹小的菜單以及您的主要內容。這可能會影響您的“抓取預算”，減慢機器人的速度，影響網頁的準確索引和積極排名。
另一件需要記住的事情是，您的選單系統可以很好地表明您認為哪些頁面對您的業務和/或使用者很重要。谷歌了解這一點，並將選單連結視為這些連結頁面重要性的訊號。在 Google Search Console 中，有一個有用的工具“連結”，它可以顯示網站的外部連結和內部連結結構。內部連結報告顯示您的“熱門內部連結頁面”，而您的選單系統在其中發揮重要作用。
當然，您的主頁應該有最多的內部連結。然後查看您的報告深入分析—其中還包含哪些內容？您能看到所有首頁嗎？您所有最重要的頁面都在那裡可見嗎？您是否列出了您最賺錢的服務以及您希望排名更高的服務？
選單系統案例研究
我們的一位數位行銷客戶曾經讓一家以前的網頁設計公司為其網站建立了一個巨大的巨型菜單。它取代了相對簡單的選單系統，並且只是對搜尋結果產生直接不利影響的眾多因素之一。
首先，我們幫助他們避免了一場重大災難，因為他們最初遵循了之前顧問的一些糟糕建議，我們避免了他們的熱門內容進入付費牆。這將使他們的排名和流量立即下降 25%，因為他們最受歡迎的文章無法被搜尋引擎索引。
其他問題包括他們以前的網頁設計顧問從頭開始完全重建網站並丟失了所有先前的 URL、標題標籤和元描述。歷史性的連結資產立即消失。還有一個非常笨重且笨重的 WordPress 主題，效率不高。此外，該網站的用戶體驗考慮不周，因為每個頁面都充滿了許多不相關的功能[這是另一篇部落格文章的故事 - 編輯]
然而，這個龐大的選單系統將客戶的專業服務分成兩個不同的部分。然後將它們分成另外六個小節，每個小節都填滿了多達二十個內部連結。
因此，他們的菜單系統中可能有多達 240 個鏈接，並且所有代碼都包含在每個鏈接周圍。我們認為這是過度且不必要的。
作為我們數位行銷保留的一部分，我們每月定期在他們的網站上進行SEO，花費大量時間進行修復，從「快速獲勝」和「容易實現的目標」到更具技術性的SEO 挑戰，例如評估他們的選單系統並進行排序的變化。
客戶擁有基於 Google Cloud 的快速託管解決方案，因此具有大型選單系統的網站應該很快。他們的網站速度可能很快，但選單系統的重量卻使其受到損害。我們現在正在刷新它，並將在獲得最終結果後報告。
審核您的選單系統
要審核網頁，請使用 Google Chrome 瀏覽器並開啟「隱身視窗」（一個私人標籤）。這會刪除您的瀏覽器可能使用的任何擴充程序，這些擴充功能可能會影響您的報告。然後造訪您想要檢查的頁面並使用 Chrome 瀏覽器內建的 Google Lighthouse 工具。按一下 f-12 並針對相關頁面的行動版或桌面版或兩者執行報表。
您需要尋找的是存在“過多 DOM”的任何標誌。
DOM 是文件物件模型，正如我們之前提到的，選單系統中的大量連結和程式碼可能會創建過多的 DOM。
大型 DOM 樹可能會不必要地增加透過網路傳輸到裝置的資料負載，從而降低頁面效能。一旦載入了慢速頁面及其所有程式碼，您的裝置就需要在您捲動和互動時渲染和重新渲染頁面。第三，您的裝置記憶體將被這些大頁面佔用，再次損害效能。
所以你需要目標是擁有盡可能小的 DOM。當您的 DOM 超過 1,500 個節點時，Google 的 Lighthouse 工具會發出警告。
從下面的數據中您可以看到，我們客戶的 DOM 遠遠超過了 1,500 個大關，並且其主頁背後的代碼是透過 1, 643 個元素交付的。
這並不是他們頁面的唯一問題，但總的來說，它影響了他們的效能，在行動裝置上，它的得分很低，滿分 100 分。
其他引人注目的數字是首次內容繪製(FCP) 的數字為3.5 秒——行動用戶將等待到這個時間，然後才能看到螢幕上的任何內容（頁面應該在2-3 秒內加載，對嗎？然後，互動時間 (TTI) 縮短了近 21 秒 – 行動裝置上的使用者必須等待這麼長時間才能與網頁互動！這太長了，可能不只是選單系統，還顯示了其他問題，例如 WordPress 主題、外掛程式等。 （有關 LCP 和 CLS 的更多信息，請參閱我們關於Core Web Vitals的文章）
巨型選單 DOM 大小過大。
查看帶有和不帶有megamenu 的渲染 HTML：
HTML 與megamenu – 244Kb。
不含megamenu 的 HTML – 183 Kb。
僅程式碼就減少了 75%。當然，這不是一個完美的範例，因為我們只是刪除了所有大型選單程式碼，而且我們需要某種選單。但這確實表明大型菜單佔用了您寶貴的程式碼庫的多少——在這個特定範例中佔了四分之一。
接下來我們來看看選單系統中的 URL。僅查看其中一個小節，就有 14 個連結和連結文字。我們將連結與其流量進行比較，並按受歡迎程度和訪問次數對主題進行排名。
我們使用了 Google Analytics 和報表Behaviour > Site Content > All Pages。
這為我們提供了按受歡迎度報告列出的頁面 URL，我們將其匯出到電子表格以供進一步清理和分析。
然後，我們拉出選單系統中列出的頁面，按照頁面瀏覽量對它們進行排序，然後就可以得到更清晰的視圖。被認為重要到足以出現在選單系統中的頁面有一些有趣的結果：
按受歡迎程度和結果排列的選單項目。
首先，無論如何，這些頁面都不是網站上最受歡迎的頁面。在近 1,300 頁中，這個特定的選單部分以 #29 開始，以 #307 結束。
選單系統這一部分中最受歡迎的頁面有 401 次頁面瀏覽量，緊隨其後的是 248 次，然後迅速下降，直到最後一頁只有 13 次頁面瀏覽量。
這裡要問的問題是——如果最不受歡迎的頁面有路標並且可以從網站的其他地方訪問，為什麼它們與更重要的資源一起出現在主選單系統中？
再次查看本小節，排名前 5 的主題的流量達到了三位數。我們需要考慮刪除只有兩位數的主題和連結。所以一旦我們完成了手邊的任務，可能還會有另一輪工作。
剔除選單鏈接
僅在本小節中，我們就刪除了列表中的最後 4 個鏈接，即訪問量最少的鏈接。
儲存選單系統後，我們刷新了網頁，重新運行了 Google Lighthouse 報告，看到了以下改進：
DOM 1631 性能 24。
與先前的測試相比，我們可以看到效能從 21 提高到 24，並且過多的 DOM 雖然仍然存在，但已從 1,643 個元素減少到 1,631 個。
刪除 4 個不太受歡迎的選單項目後，每個選單項目減少了 3 個 DOM 節點。因此，為了達到 1,500 個以下的神奇屏障，我們需要考慮刪除另外 43 個選單項目。
在行動裝置上，這些變更將「互動時間」減少了 4 秒，但在這個特定網頁真正實現之前還有很長的路要走 - 16 秒對於您能夠互動來說仍然是太長的等待時間在在行動裝置上使用網頁，因此我們將在您繼續閱讀時繼續解決這個問題...
尾註
這個小小的技術 SEO 練習的效果對文件物件模型進行了一些改進，並為我們帶來了輕微的效能提升。
如果我們繼續分析和優化meu系統，我們將為使用者帶來更快、更有效率、更有用的體驗。
為了幫助使用者找到您網站中較晦澀的頁面，請確保有 HTML 網站地圖。您通常可以自動產生這些內容並將連結放置在每個頁面的頁腳中。此外，讓您的網站搜尋框突出，這對用戶體驗有好處。
最後一點，我們正在追溯地開發一個原本可能不應該這樣建構的網站。事後諸葛亮是一件美妙的事情，但使用擁有多年經驗的專家的機構可以防止這種誤導性設計引發的問題。
在本文開頭的選單範例中，我們列出了 BBC 的選單系統，該系統僅在您登陸對應頁面時載入相關子選單。他們的資訊架構和 Web 開發團隊創建了一個高效且有效的結構。您不必在網站不需要的部分載入不相關的子選單和連結。
此外，BBC 和 B&Q 都是大型跨國和國家組織，預算也相符。這些大企業可以負擔得起頂級的網頁開發團隊和企業級託管解決方案。中小企業受到內部團隊和可用解決方案知識的限制。
這就是我們的用武之地，您當地的數位行銷機構。我們將為您提供適合您預算的最佳解決方案，並幫助您超越您的體重。
Clever Marketing - 漢普郡、薩里和伯克郡的數位行銷代理商。
您的網站速度慢嗎？它會損害您在搜尋引擎中的排名嗎？有一些需要解決的SEO 技術問題嗎？
與您值得信賴的數位合作夥伴 Clever Marketing 交談。請致電01276 402 381或填寫簡易聯絡表。
我們做的事情有很多，首要領域是網頁設計、網頁開發、圖形設計以及所有數位行銷學科，例如搜尋引擎優化(SEO)、按點擊付費(PPC) 和社交媒體活動。
我們還對客戶的網站進行深入的審查和分析，並深入研究影響其網站性能的一些真正令人著迷的方面。
最近的焦點之一是「超級選單」對特定網站的速度和功能的影響。
什麼是超級菜單？
大型選單是一種網站導航系統，其下拉式選單可 柬埔寨手機號碼列表 在懸停或點擊時展開。擴展的菜單選項為用戶提供了更深入的網站鏈接，特別是對於那些擁有大量豐富內容的網站。
大型菜單是幫助訪客快速獲取精細內容的好方法。
舉個例子；
BBC 的主導航位於「標頭」中，當您按一下「體育」時，您將被導向到一個新頁面，即「體育」部分的主索引頁面，以及「體育」子導航。
如果您隨後點擊「足球」子部分，您將進入更高層級的導航，其中包含BBC 體育網站「足球」部分的所有關鍵部分。
BBC 體育頻道選單系統。
這是一個相當靜態的大型菜單，並且有充分的理由。每個子選單都會在上下文中加載，以便用戶在他們選擇導航的區域內擁有清晰的路徑。 BBC 確保不會加載不相關的鏈接，因此用戶體驗是最佳的，並且伺服器/瀏覽器不會受到無關代碼的負擔。
另一種常見的大型菜單是您在 B&Q 的diy.com網域上看到的那種。它比 Beeb 的菜單更即時動態，因此用戶可以立即深入了解部門和部分。然而，它確實加載了“無處不在的一切”，這既非常有用，但也是一種技術開銷。
百安居超級選單系統，
超級菜單的缺點
雖然這些豐富的選單系統對於大幅改善使用者體驗 (UX) 很有用，但也可能存在缺點。
您嘗試從網頁中利用的功能和功能越多，提供龐大的巨型選單所需的 HTML 行就越多。額外的程式碼會增加“開銷”，並可能因為額外的“呼叫”插件和需要加載以提供選單功能的額外腳本而減慢網頁速度。
最重要的是，您要為程式碼添加更多鏈接，因此，當像GoogleBot 這樣的抓取工具出現來讀取您的網站並查看重要內容時，您會將這些機器人發送到許多其他頁面，而不僅僅是一個狹小的菜單以及您的主要內容。這可能會影響您的“抓取預算”，減慢機器人的速度，影響網頁的準確索引和積極排名。
另一件需要記住的事情是，您的選單系統可以很好地表明您認為哪些頁面對您的業務和/或使用者很重要。谷歌了解這一點，並將選單連結視為這些連結頁面重要性的訊號。在 Google Search Console 中，有一個有用的工具“連結”，它可以顯示網站的外部連結和內部連結結構。內部連結報告顯示您的“熱門內部連結頁面”，而您的選單系統在其中發揮重要作用。
當然，您的主頁應該有最多的內部連結。然後查看您的報告深入分析—其中還包含哪些內容？您能看到所有首頁嗎？您所有最重要的頁面都在那裡可見嗎？您是否列出了您最賺錢的服務以及您希望排名更高的服務？
選單系統案例研究
我們的一位數位行銷客戶曾經讓一家以前的網頁設計公司為其網站建立了一個巨大的巨型菜單。它取代了相對簡單的選單系統，並且只是對搜尋結果產生直接不利影響的眾多因素之一。
首先，我們幫助他們避免了一場重大災難，因為他們最初遵循了之前顧問的一些糟糕建議，我們避免了他們的熱門內容進入付費牆。這將使他們的排名和流量立即下降 25%，因為他們最受歡迎的文章無法被搜尋引擎索引。
其他問題包括他們以前的網頁設計顧問從頭開始完全重建網站並丟失了所有先前的 URL、標題標籤和元描述。歷史性的連結資產立即消失。還有一個非常笨重且笨重的 WordPress 主題，效率不高。此外，該網站的用戶體驗考慮不周，因為每個頁面都充滿了許多不相關的功能[這是另一篇部落格文章的故事 - 編輯]
然而，這個龐大的選單系統將客戶的專業服務分成兩個不同的部分。然後將它們分成另外六個小節，每個小節都填滿了多達二十個內部連結。
因此，他們的菜單系統中可能有多達 240 個鏈接，並且所有代碼都包含在每個鏈接周圍。我們認為這是過度且不必要的。
作為我們數位行銷保留的一部分，我們每月定期在他們的網站上進行SEO，花費大量時間進行修復，從「快速獲勝」和「容易實現的目標」到更具技術性的SEO 挑戰，例如評估他們的選單系統並進行排序的變化。
客戶擁有基於 Google Cloud 的快速託管解決方案，因此具有大型選單系統的網站應該很快。他們的網站速度可能很快，但選單系統的重量卻使其受到損害。我們現在正在刷新它，並將在獲得最終結果後報告。
審核您的選單系統
要審核網頁，請使用 Google Chrome 瀏覽器並開啟「隱身視窗」（一個私人標籤）。這會刪除您的瀏覽器可能使用的任何擴充程序，這些擴充功能可能會影響您的報告。然後造訪您想要檢查的頁面並使用 Chrome 瀏覽器內建的 Google Lighthouse 工具。按一下 f-12 並針對相關頁面的行動版或桌面版或兩者執行報表。
您需要尋找的是存在“過多 DOM”的任何標誌。
DOM 是文件物件模型，正如我們之前提到的，選單系統中的大量連結和程式碼可能會創建過多的 DOM。
大型 DOM 樹可能會不必要地增加透過網路傳輸到裝置的資料負載，從而降低頁面效能。一旦載入了慢速頁面及其所有程式碼，您的裝置就需要在您捲動和互動時渲染和重新渲染頁面。第三，您的裝置記憶體將被這些大頁面佔用，再次損害效能。
所以你需要目標是擁有盡可能小的 DOM。當您的 DOM 超過 1,500 個節點時，Google 的 Lighthouse 工具會發出警告。
從下面的數據中您可以看到，我們客戶的 DOM 遠遠超過了 1,500 個大關，並且其主頁背後的代碼是透過 1, 643 個元素交付的。
這並不是他們頁面的唯一問題，但總的來說，它影響了他們的效能，在行動裝置上，它的得分很低，滿分 100 分。
其他引人注目的數字是首次內容繪製(FCP) 的數字為3.5 秒——行動用戶將等待到這個時間，然後才能看到螢幕上的任何內容（頁面應該在2-3 秒內加載，對嗎？然後，互動時間 (TTI) 縮短了近 21 秒 – 行動裝置上的使用者必須等待這麼長時間才能與網頁互動！這太長了，可能不只是選單系統，還顯示了其他問題，例如 WordPress 主題、外掛程式等。 （有關 LCP 和 CLS 的更多信息，請參閱我們關於Core Web Vitals的文章）
巨型選單 DOM 大小過大。
查看帶有和不帶有megamenu 的渲染 HTML：
HTML 與megamenu – 244Kb。
不含megamenu 的 HTML – 183 Kb。
僅程式碼就減少了 75%。當然，這不是一個完美的範例，因為我們只是刪除了所有大型選單程式碼，而且我們需要某種選單。但這確實表明大型菜單佔用了您寶貴的程式碼庫的多少——在這個特定範例中佔了四分之一。
接下來我們來看看選單系統中的 URL。僅查看其中一個小節，就有 14 個連結和連結文字。我們將連結與其流量進行比較，並按受歡迎程度和訪問次數對主題進行排名。
我們使用了 Google Analytics 和報表Behaviour > Site Content > All Pages。
這為我們提供了按受歡迎度報告列出的頁面 URL，我們將其匯出到電子表格以供進一步清理和分析。
然後，我們拉出選單系統中列出的頁面，按照頁面瀏覽量對它們進行排序，然後就可以得到更清晰的視圖。被認為重要到足以出現在選單系統中的頁面有一些有趣的結果：
按受歡迎程度和結果排列的選單項目。
首先，無論如何，這些頁面都不是網站上最受歡迎的頁面。在近 1,300 頁中，這個特定的選單部分以 #29 開始，以 #307 結束。
選單系統這一部分中最受歡迎的頁面有 401 次頁面瀏覽量，緊隨其後的是 248 次，然後迅速下降，直到最後一頁只有 13 次頁面瀏覽量。
這裡要問的問題是——如果最不受歡迎的頁面有路標並且可以從網站的其他地方訪問，為什麼它們與更重要的資源一起出現在主選單系統中？
再次查看本小節，排名前 5 的主題的流量達到了三位數。我們需要考慮刪除只有兩位數的主題和連結。所以一旦我們完成了手邊的任務，可能還會有另一輪工作。
剔除選單鏈接
僅在本小節中，我們就刪除了列表中的最後 4 個鏈接，即訪問量最少的鏈接。
儲存選單系統後，我們刷新了網頁，重新運行了 Google Lighthouse 報告，看到了以下改進：
DOM 1631 性能 24。
與先前的測試相比，我們可以看到效能從 21 提高到 24，並且過多的 DOM 雖然仍然存在，但已從 1,643 個元素減少到 1,631 個。
刪除 4 個不太受歡迎的選單項目後，每個選單項目減少了 3 個 DOM 節點。因此，為了達到 1,500 個以下的神奇屏障，我們需要考慮刪除另外 43 個選單項目。
在行動裝置上，這些變更將「互動時間」減少了 4 秒，但在這個特定網頁真正實現之前還有很長的路要走 - 16 秒對於您能夠互動來說仍然是太長的等待時間在在行動裝置上使用網頁，因此我們將在您繼續閱讀時繼續解決這個問題...
尾註
這個小小的技術 SEO 練習的效果對文件物件模型進行了一些改進，並為我們帶來了輕微的效能提升。
如果我們繼續分析和優化meu系統，我們將為使用者帶來更快、更有效率、更有用的體驗。
為了幫助使用者找到您網站中較晦澀的頁面，請確保有 HTML 網站地圖。您通常可以自動產生這些內容並將連結放置在每個頁面的頁腳中。此外，讓您的網站搜尋框突出，這對用戶體驗有好處。
最後一點，我們正在追溯地開發一個原本可能不應該這樣建構的網站。事後諸葛亮是一件美妙的事情，但使用擁有多年經驗的專家的機構可以防止這種誤導性設計引發的問題。
在本文開頭的選單範例中，我們列出了 BBC 的選單系統，該系統僅在您登陸對應頁面時載入相關子選單。他們的資訊架構和 Web 開發團隊創建了一個高效且有效的結構。您不必在網站不需要的部分載入不相關的子選單和連結。
此外，BBC 和 B&Q 都是大型跨國和國家組織，預算也相符。這些大企業可以負擔得起頂級的網頁開發團隊和企業級託管解決方案。中小企業受到內部團隊和可用解決方案知識的限制。
這就是我們的用武之地，您當地的數位行銷機構。我們將為您提供適合您預算的最佳解決方案，並幫助您超越您的體重。
Clever Marketing - 漢普郡、薩里和伯克郡的數位行銷代理商。
您的網站速度慢嗎？它會損害您在搜尋引擎中的排名嗎？有一些需要解決的SEO 技術問題嗎？
與您值得信賴的數位合作夥伴 Clever Marketing 交談。請致電01276 402 381或填寫簡易聯絡表。