Skip to main content

Command Palette

Search for a command to run...

SEO:Google Top Heavy 演算法

Published
2 min readView as Markdown
SEO:Google Top Heavy 演算法
L

前端工程師 Augustus 的學習筆記 — solving problems, in simple ways.

本篇大綱


頁面上廣告數量多少是很重要的

上 SEO 的課程時,聽到講師講了 Top Heavy 演算法,才知道網頁上的廣告太多,會影響排名。

根據講師課堂上的解釋,Top Heavy 演算法就是:把網頁切一半,如果上半部的廣告數量佔到 4 個以上,就會扣 SEO 分數,進而影響排名。

聽到這點,有點驚呆了,想想現在一般常見的頁面:

一進去先有一個蓋版 + 1
關掉蓋版,會看見頁面最上方的大橫幅 + 1
而在首頁時,很多站喜歡用 Slider,用了 Slider 其中會有一個是廣告 + 1
頁面如果是兩欄式以上,左側或右側的區塊,裡面會再有一個 Banner + 1
最後頁面滑不到一半,文中又會有廣告 + 1

這樣隨便想一想,廣告至少就有 4-5 個了。如果是 4 個就降分數,那很多網站都被扣分了吧?

廣告是網站的一個收入來源,如果 Google 真的這樣算,那應該會被罵死。

因此爬了一下 Top Heavy 這個演算法。


Top Heavy 演算法關心的是什麼

爬到一篇算是講得比較多的:

Ads Above The Fold Now Penalized By Google’s “Page Layout” Algorithm

裡面有引用到 Google 當初發的 Blog:

Page layout algorithm improvement

Google 這部份的考量,重在使用者體驗,內文中說:

We’ve heard complaints from users that if they click on a result and it’s difficult to find the actual content, they aren’t happy with the experience.

Rather than scrolling down the page past a slew of ads, users want to see content right away. So sites that don’t have much content “above-the-fold” can be affected by this change.

If you click on a website and the part of the website you see first either doesn’t have a lot of visible content above-the-fold or dedicates a large fraction of the site’s initial screen real estate to ads, that’s not a very good user experience. Such sites may not rank as highly going forward.

簡單翻譯就是說,如果你的頁面一點進去,看到的不是使用者想看的內容,而是一堆廣告,使用者還必須一直往下滑才能看到要的資訊,那 Google 就會讓你這頁的排名往下降。

背後沒說出來的話就是:你挑戰了 Google 對於搜尋的權威度了!

Google 就是讓使用者都能很快的找到要的東西,所以才吸引很多人用的,你一個點進去滿滿都是廣告的頁面,使用者找不到要的東西,就會質疑 Google 對於搜尋的專業性,然後久了就不再用 Google,Google 的關鍵字廣告客戶就會減少,然後就得裁員,然後做搜尋的部門就會流淚看戰友被炒……bla bla bla。

因此,雖然 Top Heavy 是 2012 年提出,但這種邏輯相信還是在的,不能不知道這演算法帶來的影響。


要如何知道頁面上的廣告是不是過多?

Google 在 Blog 上說,Top Heavy影響範圍不會到全球網頁數的 1%,畢竟廣告是網站的收入來源,他們也不會沒事斷人財路,這句話就是指只要不太誇張,他們是可以睜一隻眼閉一隻眼的。而且 Google 搜尋結果頁上的前幾筆也是留給關鍵字廣告,總不能自己建了一套演算法來打自己。

那如何判斷頁面上的廣告是不是太多,進而影響排名呢?

Google 有一個網站管理工具,叫 Google Search Console,裡面就有提供在你廣告太多影響了用戶體驗時,會告知你的工具。

這套工具名稱叫作「廣告用戶體驗」,工具說明如下:

「廣告體驗報告」旨在判別哪些廣告體驗違反廣告體驗提升標準,也就是業界認為會造成使用者嚴重困擾的廣告體驗。

以下來講解怎麼設定。


設定廣告體驗報告

首先,網站必須要先登錄在 Google Search Console 中,而且設定的人要有管理者的權限,以上 2 點都有了以後,進入到 Search Console 的後台,就會看到你登錄的網站出現在介面中,然後點左側選單的「Web Tools」:

Google Search Console主要介面

目前 Web Tools 的選單只在舊版介面有,新版介面的使用者必需切換到舊版介面才行。

進到 Web Tools,會看到預設就在廣告體驗區裡,想要多了解一點操作說明,或是 Google 對於頁面廣告的看法,可以點頁面上的影片來看。

Introduction to the Ad Experience Report

影片裡提到 3 點蠻可以記一下的:

  1. 使用者不會討厭頁面上有廣告,但很討厭因為廣告的出現而打擾他們。
  2. 他們這項工具,除了幫你檢查是否有干擾操作的廣告,在你修正後還可以提交修正訊息,Google 會在提交後來檢查。
  3. 桌面、手機分開檢查,有可能會桌機版時出現警告,但手機版時沒有。

這邊嵌入影片,如果想先看的讀者可以先看。

廣告體驗報告的「桌面」、「行動裝置」都要設定,這邊先以行動裝置來看,點選行動裝置後,會出現要檢測哪一項資源:

選擇要檢查哪一個網站

選擇完後,就會看到審查的狀態了,剛提交申請的會顯示未經審查,過幾天後才會看到結果:

末經審查的狀態

要注意一點,審查是從根網域開始的,因此如果網站上有子網域,也會一併檢查,說明文如下:

假設您的根網域是 example.com,這份報告將涵蓋 www.example.com、news.example.com、example.com/finance 等網頁的廣告體驗問題資料。

本篇說明到這邊,如果覺得對你/妳有幫助的話,請不吝拍個手給作者一個鼓勵。

More from this blog

圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小

本篇要解決的問題 很多網站功能會需要處理使用者上傳的圖片,比方讓使用者上傳會員照片。 但隨著手機相機愈做愈好,拍出來的照片隨便都是幾 MB,直接上傳的話,耗時也佔空間。 雖然網路上搜尋有許多圖片壓縮工具,但大多只能設定固定的壓縮的品質,無法保證壓縮後的檔案大小符合需求。 本筆記文將使用 Compressor.js 套件,實作一個圖片壓縮功能,符合以下需求: 自動嘗試不同的壓縮品質,直到檔案小於指定大小(ex: 600KB)為止。 將圖片轉換為 WebP 格式。 長、寬限制最大尺寸。 這...

Oct 4, 20254 min read
圖片壓縮:用 Compressor.js 自動調整品質壓縮至指定大小

使用 pm2.web 建立免費 PM2 監控系統

本篇要解決的問題 PM2 是 Node.js 裡常用的 process manager,一般如果是透過網頁監控、重啟,大概會使用官方的 Keymetrics。 但,But!就是這個 But!免費版最多只能監控 4 個 Process,再多就要掏出魔法小卡了。 問了 ChatGPT 後,發現有一個開源的替代方案:pm2.web,可以自己架設,不管幾個 process 都完全免費。 以下筆記如何使用 Vercel + MongoDB Atlas 部署 pm2.web,免費監控我們的 PM2。 架構...

Sep 26, 20252 min read
使用 pm2.web 建立免費 PM2 監控系統

GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學

本篇要解決的問題 最近在研究 MCP,剛好在 Threads 上看到有人實測 Figma MCP,想試看看是否真的能透過 AI 進行切版。 實作了一下後,還真的可以,不過目前僅針對簡單設計稿進行測試,結果略有跑版現象,整體效果尚可接受。 但目前就有這成果覺得厲害,再給它一段時間,也許前端工程師可以省掉切版的時間,把心力放到別的地方。 前提是,客戶要很明確的知道自己要什麼 XD,不然靠 AI 微調,還不如人工直接改程式還比較快。 用到的資源 以下是要實作用 Figma MCP 來切版,需要的資源:...

Apr 12, 20252 min read
GitHub Copilot + Figma MCP Server 實戰:用 AI 快速切版教學

使用 Google Apps Script 串接 Google Analytics API,整合多站數據

本篇要解決的問題 一間公司裡可能旗下會有多個網站,想同時查看所有網站的 GA 數據,通常需要開啟多個瀏覽器視窗並排顯示,操作較為繁瑣。 如果可以改由 API 來取得 GA 的數據,工程師就可以把各站的資料顯示在一個頁面上,而不用同時開多個 GA 來看。 開通 GA API 取得 GCP 專案編號 要先有 Google Cloud Platform(GCP)的專案,沒有的話登入自己的 Google 帳號,就可以先增一個。 專案編號就在 資訊主頁 上: 開通 GA API 功能 在使用 API ...

Mar 29, 20254 min read
使用 Google Apps Script 串接 Google Analytics API,整合多站數據

監聽 localStorage 事件:如何在同一頁面內偵測變更

本篇要解決的問題 我們有時會把資訊存在瀏覽器的空間裡,像是 Cookies、Local Storage、IndexedDB。 Local Storage 原生的 storage 事件主要用於跨分頁同步,如下: window.addEventListener("storage", () => {}); 但如果想要在同一個頁面內監聽變更,就需要手動覆寫 localStorage 方法。 localStorage event listener 我們可以透過 Storage.prototype 覆寫...

Mar 3, 20251 min read
監聽 localStorage 事件:如何在同一頁面內偵測變更
L

Let's Write

63 posts

前端工程師 August 的學習筆記 — solving problems, in simple ways.