โฆษณา

ตรวจทานล่าสุด พฤศจิกายน 2026

โฆษณาจ่ายค่างานข่าว และก็เป็นต้นเหตุของสิ่งที่ผู้อ่านไม่ชอบในเว็บไซต์ข่าวเป็นส่วนใหญ่ Coalition for Better Ads เผยแพร่รายการรูปแบบที่ต่ำกว่ามาตรฐาน บทนี้ครอบคลุมรายการนั้น วิธีกันพื้นที่ให้ทุกช่องโฆษณา และตำแหน่งวางโฆษณาบนแต่ละหน้าจอ

รูปแบบที่ควรหลีกเลี่ยง

มาตรฐาน Better Ads ระบุรูปแบบบนเดสก์ท็อป 6 รูปแบบและบนมือถือ 10 รูปแบบ ส่วนวิดีโอสั้นและแอปมือถือมีรายการแยกต่างหาก

วิธีวัดความหนาแน่น

ความหนาแน่นคือผลรวมความสูงของโฆษณาทั้งหมดในเนื้อหาหลัก หารด้วยความสูงรวมของเนื้อหาหลัก วัดเทียบกับเนื้อหาหลัก ไม่ใช่วิวพอร์ต

• ส่วนหัว ส่วนท้าย และการนำทางของเว็บไซต์ไม่นับ รวมถึงบทความที่เกี่ยวข้องด้วย
• โฆษณาที่อยู่ใต้เนื้อหาหลักไม่นับ
• นับทุกรูปแบบ รวมถึงโฆษณาแบบติดหน้าจอและแบบอินไลน์
• ความสูงของโฆษณาแบบติดหน้าจอแต่ละชิ้นนับเพียงครั้งเดียว
• บนเดสก์ท็อป โฆษณาในแถบข้างนับด้วย
• โฆษณา pre-roll และ mid-roll ในวิดีโอที่เกี่ยวข้องกับหน้าไม่ถูกวัด

ตัวอย่างการคำนวณ สมมติบทความบนมือถือที่เนื้อหาหลักสูง 5,000 พิกเซล เพื่อให้อยู่ที่ 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 เพื่อให้ครีเอทีฟที่ใหญ่กว่ายังใส่ได้ สำหรับช่องที่มีหลายขนาด คู่มือ Publisher Tag ของ Google เสนอสามวิธี

อีกสองกฎจากคู่มือเดียวกันและ web.dev

• ให้ช่อง fluid อยู่ใต้ส่วนที่เห็นได้โดยไม่ต้องเลื่อน ช่องเหล่านี้ปรับขนาดตามครีเอทีฟ จึงทำให้ขยับทุกครั้ง
• อย่าพับช่องที่ไม่มีโฆษณาให้ยุบ การเอาพื้นที่ที่กันไว้ออกอาจทำให้หน้าขยับได้พอ ๆ กับการแทรกเนื้อหา ให้แสดงตัวแทนที่ไว้แทน และเริ่มช่องแบบยุบเฉพาะเมื่อมีโอกาสน้อยที่จะมีโฆษณามาเติม

ตำแหน่งวางบนแต่ละหน้าจอ

บนมือถือ

• นับความหนาแน่นบนเลย์เอาต์โทรศัพท์ เพราะขีดจำกัดของมือถือต่ำกว่า
• ให้โฆษณาแบบติดหน้าจอกินไม่เกิน 30% ของหน้าจอ รูปแบบที่พบบ่อยคือแถบสั้น ๆ ยึดที่ด้านล่าง
• หลีกเลี่ยงโฆษณาที่ลอยทับบทความ และหน่วยโฆษณาเต็มหน้าจอที่ต้องเลื่อนหรือแตะจึงจะผ่านไปได้
• วางโฆษณาแรกไว้ใต้พาดหัวและย่อหน้าแรก เพื่อไม่ให้ดันองค์ประกอบ LCP ของคุณลง

บนเดสก์ท็อป

• นับโฆษณาในแถบข้างรวมในความหนาแน่นทั้งหมด
• ให้หน่วยแบบติดหน้าจอกินไม่เกิน 30% ของหน้าจอ
• เริ่มวิดีโอแบบปิดเสียง และให้ผู้อ่านเลือกเปิดเสียงเอง
• กำหนดขนาดคอลัมน์บทความก่อน เพื่อให้ช่องในแถบข้างโหลดได้โดยไม่ดันบทความ

ความเร็วและการเข้าถึง

• ทำ lazy-load กับโฆษณาที่อยู่นอกวิวพอร์ตแรก ด้วยการตั้งค่าของแท็กโฆษณาเองหรือ loading="lazy" บน iframe ที่คุณควบคุม
• แต่ละ iframe มี main thread ของตัวเอง จึงควรตรวจว่าการโต้ตอบที่ช้ามาจากเฟรมใดเมื่อตรวจ INP
• ในที่ที่ต้องได้รับความยินยอม ให้โหลดแท็กโฆษณาหลังจากผู้อ่านตกลงเท่านั้น บทเรื่องป๊อปอัปมีรายละเอียด
• ใส่ป้ายกำกับให้บริเวณโฆษณา เพื่อให้ผู้ใช้โปรแกรมอ่านหน้าจอรู้จักและข้ามได้
• ตาม WCAG เกณฑ์ความสำเร็จ 2.2.2 เนื้อหาที่เคลื่อนไหวซึ่งเริ่มเอง ยาวนานเกินห้าวินาที และแสดงควบคู่กับเนื้อหาอื่น ต้องมีวิธีหยุดชั่วคราว หยุด หรือซ่อน ซึ่งใช้กับโฆษณาแอนิเมชันด้วย

<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

ตรวจสถานะของคุณ

Ad Experience Report ใน Search Console แสดงรายการประสบการณ์โฆษณาที่ละเมิดมาตรฐาน Better Ads หากการตรวจสอบให้สถานะ “Failing” แก่เว็บไซต์ของคุณ รายงานจะแสดงสิ่งที่ Google พบ ซึ่งอาจไม่ครบทุกปัญหา ให้แก้สิ่งที่รายงานชี้ แล้วขอตรวจสอบใหม่ ซึ่งครอบคลุมทั้งโดเมนของคุณ

รายการตรวจสอบ

• ไล่ตารางรูปแบบกับทีมปฏิบัติการโฆษณาของคุณ ทั้งเดสก์ท็อปและมือถือ
• เอาป๊อปอัป prestitial บนมือถือ และโฆษณาที่มีตัวนับถอยหลังออก
• วัดความหนาแน่นบนเทมเพลตบทความที่ยาวที่สุดและสั้นที่สุด บนโทรศัพท์
• ตรวจว่าทุกหน่วยแบบติดหน้าจอกินไม่เกิน 30% ของหน้าจอ
• กันพื้นที่ให้ทุกช่องใน CSS ด้วย min-height
• ย้ายช่อง fluid ไปไว้ใต้ส่วนที่เห็นได้โดยไม่ต้องเลื่อน
• แทนที่การยุบช่องว่างด้วยตัวแทนที่ ในที่ที่การยุบทำให้หน้าขยับ
• ทำ lazy-load กับโฆษณาที่อยู่นอกวิวพอร์ตแรก
• ใส่ป้ายกำกับให้แต่ละบริเวณโฆษณา
• ตรวจ Ad Experience Report ทั้งเดสก์ท็อปและมือถือ

แหล่งอ้างอิง

• มาตรฐาน Better Ads ฉบับแรก, Coalition for Better Ads
• ความหนาแน่นของโฆษณาบนมือถือสูงกว่า 30%, Coalition for Better Ads
• ความหนาแน่นของโฆษณาบนเดสก์ท็อปสูงกว่า 50%, Coalition for Better Ads
• ความหนาแน่นของโฆษณาบนเดสก์ท็อปสูงกว่า 30% เมื่อมีโฆษณาวิดีโอแบบติดหน้าจอ, Coalition for Better Ads
• โฆษณาแบบติดหน้าจอขนาดใหญ่บนเดสก์ท็อป, Coalition for Better Ads
• โฆษณาแบบติดหน้าจอขนาดใหญ่บนมือถือ, Coalition for Better Ads
• โฆษณา scrollover เต็มหน้าจอบนมือถือ, Coalition for Better Ads
• วิดีโอแบบติดหน้าจอพร้อมโฆษณาอินไลน์ขนาดใหญ่บนมือถือ, Coalition for Better Ads
• ลดการขยับของเลย์เอาต์, Google Publisher Tag
• แนะนำ Ad Experience Report, Web Tools Help
• ปรับ Cumulative Layout Shift ให้เหมาะสม, web.dev
• ปรับ Interaction to Next Paint ให้เหมาะสม, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C