跳至內容
Mera News

出版商指南，第 5 章

廣告

最後審閱：2026 年 11 月

廣告為新聞報導提供資金，同時也造成了讀者對新聞網站不滿的許多原因。Coalition for Better Ads 發布了一份低於其標準的格式清單。本章說明這份清單、如何為每個版位預留空間，以及在各種螢幕上該把廣告放在哪裡。

應避免的格式

Better Ads Standards 列出 6 種桌機格式與 10 種行動裝置格式。另有獨立的清單涵蓋短影音與行動應用程式。

格式桌機行動裝置
彈出式廣告列入列入
自動播放且有聲音的影片列入列入
前置插頁廣告有倒數計時有或沒有倒數計時
大型固定式廣告超過螢幕的 30%超過螢幕的 30%
廣告密度高於 50%高於 30%
含固定式影片廣告的密度高於 30%未列入
閃爍的動畫廣告未列入列入
有倒數計時的後置插頁廣告未列入列入
全螢幕捲動覆蓋廣告未列入超過頁面的 30%
固定式、彈出式影片廣告未列入列入
固定式影片搭配大型內嵌廣告（300x600 或更大）未列入列入

密度如何計算

密度是主要內容中所有廣告高度的總和，除以主要內容的總高度。它是相對於主要內容計算，而不是相對於視窗。

  • 頁首、頁尾與網站導覽不計入，相關文章也不計入。
  • 主要內容下方的廣告不計算。
  • 所有格式都計算，包括固定式與內嵌廣告。
  • 每個固定式廣告的高度只計算一次。
  • 在桌機上，側邊欄的廣告要計算。
  • 與頁面相關的影片中的前貼與中插廣告不列入測量。

舉個實際例子：一篇行動版文章的主要內容高 5,000 像素。若要維持在 30% 以下或剛好 30%，其中的廣告加起來最多只能有 1,500 像素。

要檢查真實的頁面，請把下面的程式碼貼到瀏覽器主控台。請把選擇器改成符合您的範本，並加上任何位於 article 之外的固定式或側邊欄廣告的高度。

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

為每個版位預留空間

Web.dev 將廣告列為造成版面位移的最大因素之一。請在 CSS 中預留空間。Google 警告不要用 JavaScript 來做，因為位移可能發生在指令碼載入的時候。

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

請使用 min-height，讓較大的廣告素材仍能放得下。對於有多種尺寸的版位，Google Publisher Tag 指南提供三種做法：

預留好處代價
最大尺寸沒有位移小型素材下方會有空白
最小尺寸沒有空白較大的素材出現時會產生位移
最常出現的尺寸兩者兼顧有些位移，也有些空白

同一份指南與 web.dev 還有兩項規則：

  • 把 fluid 版位放在首屏之外。它們會隨素材調整大小，所以一定會造成位移。
  • 不要收合沒有廣告的版位。移除預留的空間造成的頁面位移，可能和插入內容一樣嚴重。請改為顯示預留位置，只有在版位不太可能被填滿時，才一開始就讓它收合。

各種螢幕上的版位配置

在行動裝置上

  • 以手機版面計算密度，因為行動裝置的上限比較低。
  • 讓固定式廣告低於螢幕的 30%。底部的短版錨定廣告是常見的形式。
  • 避免浮在文章上方的廣告，以及任何需要捲動或點選才能通過的全螢幕版位。
  • 讓第一則廣告出現在標題與開頭段落之下，以免把您的 LCP 元素往下推。

在桌機上

  • 把側邊欄廣告計入密度總計。
  • 讓固定式版位低於螢幕的 30%。
  • 影片以靜音開始，讓讀者自行選擇是否開啟聲音。
  • 先決定文章欄的尺寸，讓側邊欄版位能在不移動文章的情況下載入。

速度與無障礙

  • 對首屏之外的廣告使用延遲載入，可用廣告標籤本身的設定，或在您能控制的 iframe 上使用 loading="lazy"。
  • 每個 iframe 都有自己的主執行緒，因此在檢視 INP 時，要確認緩慢的互動來自哪個框架。
  • 在需要同意的地方，請等讀者同意後才載入廣告標籤。彈出視窗章節有詳細說明。
  • 為廣告區域加上標籤，讓螢幕閱讀器使用者能辨認並略過它們。
  • 依 WCAG 成功準則 2.2.2，自動開始、持續超過五秒，且與其他內容並行的移動內容，需要有暫停、停止或隱藏的方式。這適用於動畫廣告。
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

檢查您的狀態

Search Console 的 Ad Experience Report 會列出違反 Better Ads Standards 的廣告體驗。如果審查結果讓您的網站狀態變成「Failing」，報告會列出 Google 發現的問題，但它可能無法涵蓋所有問題。請修正被標出的項目，再要求重新審查，審查範圍涵蓋您的整個網域。

檢查清單

  • 與您的廣告營運團隊一起，針對桌機與行動裝置，逐項檢查格式表。
  • 移除彈出式廣告、行動裝置上的前置插頁廣告，以及倒數計時廣告。
  • 在手機上，測量您最長與最短的文章範本的密度。
  • 檢查每個固定式版位都低於螢幕的 30%。
  • 在 CSS 中用 min-height 為每個版位預留空間。
  • 把 fluid 版位移到首屏之外。
  • 在收合空版位會造成頁面位移的地方，以預留位置取代。
  • 對首屏之外的廣告使用延遲載入。
  • 為每個廣告區域加上標籤。
  • 檢查桌機與行動裝置的 Ad Experience Report。

來源