Chuyển đến nội dung
Mera News

Cẩm nang nhà xuất bản, chương 5

Quảng cáo

Xem lại lần cuối vào tháng 11 năm 2026

Quảng cáo chi trả cho nền báo chí, và cũng gây ra phần lớn những điều độc giả không thích ở các trang tin. Coalition for Better Ads công bố danh sách các định dạng không đạt tiêu chuẩn của họ. Chương này nói về danh sách đó, cách giữ chỗ cho mọi vị trí quảng cáo, và nơi đặt quảng cáo trên từng màn hình.

Các định dạng cần tránh

Better Ads Standards nêu tên 6 định dạng trên máy tính và 10 định dạng trên di động. Các danh sách riêng áp dụng cho video ngắn và ứng dụng di động.

Định dạngMáy tínhDi động
Quảng cáo bật lên (pop-up)Có trong danh sáchCó trong danh sách
Video tự phát có âm thanhCó trong danh sáchCó trong danh sách
Quảng cáo prestitialCó đồng hồ đếm ngượcCó hoặc không có đồng hồ đếm ngược
Quảng cáo dính lớnHơn 30% màn hìnhHơn 30% màn hình
Mật độ quảng cáoCao hơn 50%Cao hơn 30%
Mật độ kèm quảng cáo video dínhCao hơn 30%Không có trong danh sách
Quảng cáo hoạt ảnh nhấp nháyKhông có trong danh sáchCó trong danh sách
Quảng cáo postitial có đồng hồ đếm ngượcKhông có trong danh sáchCó trong danh sách
Quảng cáo toàn màn hình khi cuộnKhông có trong danh sáchHơn 30% trang
Quảng cáo video dính, bật raKhông có trong danh sáchCó trong danh sách
Video dính kèm quảng cáo nội dòng lớn (300x600 trở lên)Không có trong danh sáchCó trong danh sách

Cách đo mật độ

Mật độ là tổng chiều cao của mọi quảng cáo trong nội dung chính, chia cho tổng chiều cao của nội dung chính. Mật độ được đo so với nội dung chính, không phải so với khung nhìn.

  • Phần đầu trang, chân trang và thanh điều hướng của trang bị loại trừ, bao gồm cả các bài viết liên quan.
  • Quảng cáo bên dưới nội dung chính không được tính.
  • Mọi định dạng đều được tính, kể cả quảng cáo dính và quảng cáo nội dòng.
  • Chiều cao của mỗi quảng cáo dính chỉ được tính một lần.
  • Trên máy tính, quảng cáo ở các cột bên được tính.
  • Quảng cáo pre-roll và mid-roll trong video liên quan đến trang không được đo.

Lấy ví dụ một bài viết trên di động có nội dung chính cao 5,000 pixel. Để giữ ở mức 30% hoặc thấp hơn, tổng chiều cao quảng cáo trên đó không được vượt quá 1,500 pixel.

Để kiểm tra một trang thực tế, hãy dán đoạn sau vào bảng điều khiển của trình duyệt. Đổi các bộ chọn cho khớp với mẫu trang của bạn, và cộng thêm chiều cao của mọi quảng cáo dính hoặc quảng cáo ở cột bên nằm ngoài 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) + '%');

Giữ chỗ cho mọi vị trí quảng cáo

Web.dev nêu quảng cáo là một trong những nguyên nhân lớn nhất gây xô lệch bố cục. Hãy giữ chỗ bằng CSS. Google cảnh báo không nên làm việc này bằng JavaScript, vì sự xô lệch có thể xảy ra khi tập lệnh được tải.

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

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

Hãy dùng min-height để một nội dung quảng cáo lớn hơn vẫn có thể vừa. Với các vị trí có nhiều kích thước, hướng dẫn Google Publisher Tag đưa ra ba cách:

Giữ chỗLợi íchCái giá
Kích thước lớn nhấtKhông xô lệchKhoảng trống bên dưới các quảng cáo nhỏ
Kích thước nhỏ nhấtKhông có khoảng trốngXô lệch khi một quảng cáo lớn hơn xuất hiện
Kích thước xuất hiện thường xuyên nhấtCân bằng cả haiCó chút xô lệch, có chút khoảng trống

Hai quy tắc nữa từ cùng hướng dẫn đó và web.dev:

  • Đặt các vị trí fluid bên dưới phần nhìn thấy đầu tiên. Chúng thay đổi kích thước theo quảng cáo, nên luôn gây xô lệch.
  • Đừng thu gọn một vị trí không có quảng cáo. Bỏ đi khoảng đã giữ chỗ có thể làm trang xô lệch nhiều như khi chèn thêm nội dung. Hãy hiển thị một phần giữ chỗ thay thế, và chỉ để một vị trí thu gọn ngay từ đầu nếu ít có khả năng có quảng cáo lấp vào.

Vị trí đặt trên từng màn hình

Trên di động

  • Hãy tính mật độ trên bố cục điện thoại, vì giới hạn trên di động là giới hạn thấp hơn.
  • Giữ quảng cáo dính dưới 30% màn hình. Một thanh neo ngắn ở cuối màn hình là dạng thường dùng.
  • Tránh quảng cáo trôi nổi phía trên bài viết, và mọi đơn vị toàn màn hình cần cuộn hoặc chạm mới vượt qua được.
  • Đặt quảng cáo đầu tiên bên dưới tiêu đề và đoạn mở đầu, để nó không đẩy phần tử LCP của bạn xuống thấp.

Trên máy tính

  • Hãy tính quảng cáo ở cột bên vào tổng mật độ của bạn.
  • Giữ các đơn vị dính dưới 30% màn hình.
  • Cho video bắt đầu ở chế độ tắt tiếng, và để độc giả tự chọn bật âm thanh.
  • Định kích thước cột bài viết trước, để các vị trí ở cột bên có thể tải mà không làm nó dịch chuyển.

Tốc độ và khả năng tiếp cận

  • Tải lười quảng cáo nằm ngoài khung nhìn đầu tiên, bằng thiết lập riêng của thẻ quảng cáo hoặc loading="lazy" trên các iframe do bạn kiểm soát.
  • Mỗi iframe có luồng chính riêng, nên hãy kiểm tra xem một tương tác chậm đến từ khung nào khi bạn xem xét INP.
  • Khi cần có sự đồng ý, chỉ tải thẻ quảng cáo sau khi độc giả đồng ý. Chương về cửa sổ bật lên có chi tiết.
  • Gắn nhãn cho các vùng quảng cáo để người dùng trình đọc màn hình có thể nhận ra và bỏ qua chúng.
  • Theo tiêu chí thành công 2.2.2 của WCAG, nội dung chuyển động tự bắt đầu, kéo dài hơn năm giây và chạy cùng nội dung khác cần có cách tạm dừng, dừng hoặc ẩn. Điều đó áp dụng cho quảng cáo hoạt ảnh.
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

Kiểm tra vị thế của bạn

Ad Experience Report trong Search Console liệt kê các trải nghiệm quảng cáo vi phạm Better Ads Standards. Nếu một lần xét duyệt cho trang của bạn trạng thái "Failing", báo cáo sẽ liệt kê những gì Google tìm thấy, và có thể chưa nắm bắt hết mọi vấn đề. Hãy sửa những gì báo cáo nêu, rồi yêu cầu xét duyệt lại, việc này áp dụng cho toàn bộ tên miền của bạn.

Danh sách kiểm tra

  • Cùng nhóm vận hành quảng cáo xem qua bảng định dạng, cho cả máy tính và di động.
  • Gỡ bỏ quảng cáo bật lên, quảng cáo prestitial trên di động và quảng cáo có đồng hồ đếm ngược.
  • Đo mật độ trên mẫu bài viết dài nhất và ngắn nhất của bạn, trên điện thoại.
  • Kiểm tra mọi đơn vị dính đều dưới 30% màn hình.
  • Giữ chỗ cho mọi vị trí quảng cáo bằng CSS với min-height.
  • Chuyển các vị trí fluid xuống bên dưới phần nhìn thấy đầu tiên.
  • Thay việc thu gọn vị trí trống bằng phần giữ chỗ ở nơi nó làm trang xô lệch.
  • Tải lười quảng cáo nằm ngoài khung nhìn đầu tiên.
  • Thêm nhãn cho từng vùng quảng cáo.
  • Kiểm tra Ad Experience Report cho cả máy tính và di động.

Nguồn