الإعلانات

آخر مراجعة نوفمبر 2026

تموّل الإعلانات الصحافة، وهي أيضًا سبب كثير مما يكرهه القرّاء في المواقع الإخبارية. ينشر Coalition for Better Ads قائمة بالصيغ التي تقع دون معياره. يتناول هذا الفصل تلك القائمة، وكيف تحجز مساحة لكل خانة إعلان، وأين تضع الإعلانات على كل شاشة.

صيغ يجب تجنبها

تسمّي معايير Better Ads 6 صيغ لسطح المكتب و10 صيغ للهاتف. وتغطي قوائم منفصلة الفيديو القصير وتطبيقات الهاتف.

كيف تُقاس الكثافة

الكثافة هي مجموع ارتفاعات كل الإعلانات في المحتوى الرئيسي، مقسومًا على الارتفاع الكلي للمحتوى الرئيسي. وتُقاس مقابل المحتوى الرئيسي، لا نافذة العرض.

• تُستثنى الترويسات والتذييلات وتنقل الموقع، وهذا يشمل المقالات ذات الصلة.
• لا تُحتسب الإعلانات الواقعة تحت المحتوى الرئيسي.
• تُحتسب كل الصيغ، بما فيها الإعلانات الثابتة والمضمَّنة.
• يُحتسب ارتفاع كل إعلان ثابت مرة واحدة.
• على سطح المكتب، تُحتسب الإعلانات في الأعمدة الجانبية.
• لا تُقاس إعلانات ما قبل الفيديو وأثنائه في فيديو ذي صلة بالصفحة.

كمثال تطبيقي، خذ مقالًا على الهاتف يبلغ ارتفاع محتواه الرئيسي 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 كي يظل بإمكان تصميم أكبر أن يناسب الخانة. وللخانات ذات الأحجام المتعددة، يعرض دليل Google Publisher Tag ثلاثة أساليب:

وقاعدتان أخريان من الدليل نفسه ومن web.dev:

• أبقِ خانات fluid تحت خط الطي. فهي تغيّر حجمها بحسب التصميم، لذا تسبب تغيّرًا دائمًا.
• لا تطوِ خانة لا يصلها إعلان. فإزالة المساحة المحجوزة قد تحرّك الصفحة بقدر ما يفعله إدراج المحتوى. اعرض بدلًا منها عنصرًا نائبًا، ولا تبدأ بخانة مطوية إلا إذا كان من غير المرجح أن تمتلئ.

الموضع على كل شاشة

على الهاتف

• احسب الكثافة على تخطيط الهاتف، لأن حد الهاتف هو الأدنى.
• أبقِ الإعلان الثابت دون 30% من الشاشة. والشكل المعتاد شريط قصير مثبّت في الأسفل.
• تجنّب الإعلانات التي تطفو فوق المقال، وأي وحدة بملء الشاشة تحتاج إلى تمرير أو لمس لتجاوزها.
• ضع الإعلان الأول تحت العنوان والفقرة الافتتاحية، كي لا يدفع عنصر LCP إلى الأسفل.

على سطح المكتب

• احتسب إعلانات الأعمدة الجانبية في مجموع الكثافة.
• أبقِ الوحدات الثابتة دون 30% من الشاشة.
• ابدأ الفيديو صامتًا، ودع القارئ يختار الصوت.
• حدّد حجم عمود المقال أولًا، كي تُحمَّل خانات العمود الجانبي دون أن تحرّكه.

السرعة وإمكانية الوصول

• أجّل تحميل الإعلانات الواقعة خارج نافذة العرض الأولى، بإعداد وسم الإعلان نفسه أو بـ loading="lazy" على عناصر iframe التي تتحكم بها.
• لكل iframe خيطه الرئيسي الخاص، فتحقق من الإطار الذي جاء منه التفاعل البطيء حين تراجع INP.
• حيث تُطلب الموافقة، حمّل وسوم الإعلانات فقط بعد موافقة القارئ. وتجد التفاصيل في فصل النوافذ المنبثقة.
• ضع تسمية على مناطق الإعلانات ليتمكن مستخدم قارئ الشاشة من التعرف عليها وتجاوزها.
• بموجب معيار النجاح 2.2.2 في WCAG، يحتاج المحتوى المتحرك الذي يبدأ من تلقاء نفسه ويستمر أكثر من خمس ثوانٍ ويعمل بجانب محتوى آخر إلى وسيلة لإيقافه مؤقتًا أو إيقافه أو إخفائه. وينطبق ذلك على الإعلانات المتحركة.

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

تحقق من وضعك

يسرد تقرير Ad Experience Report في Search Console تجارب الإعلانات التي تخالف معايير Better Ads. فإذا منح تقييم موقعك حالة «Failing»، يسرد التقرير ما وجدته Google، وقد لا يرصد كل مشكلة. أصلح ما يشير إليه، ثم اطلب مراجعة جديدة، وهي تشمل نطاقك بالكامل.

قائمة التحقق

• راجع جدول الصيغ مع فريق عمليات الإعلانات لديك، لسطح المكتب والهاتف.
• أزل النوافذ المنبثقة والإعلانات التمهيدية على الهاتف والإعلانات ذات العدّاد التنازلي.
• قِس الكثافة في قالبي مقالك الأطول والأقصر، على هاتف.
• تأكد أن كل وحدة ثابتة تبقى دون 30% من الشاشة.
• احجز كل خانة في CSS بـ min-height.
• انقل خانات fluid إلى ما تحت خط الطي.
• استبدل طيّ الخانة الفارغة بعنصر نائب حيث يحرّك الصفحة.
• أجّل تحميل الإعلانات الواقعة خارج نافذة العرض الأولى.
• أضف تسمية إلى كل منطقة إعلان.
• افحص Ad Experience Report لسطح المكتب والهاتف.

المصادر

• The Initial Better Ads Standards, Coalition for Better Ads
• Mobile ad density higher than 30%, Coalition for Better Ads
• Desktop ad density higher than 50%, Coalition for Better Ads
• Desktop ad density higher than 30% with a sticky video ad, Coalition for Better Ads
• Desktop large sticky ads, Coalition for Better Ads
• Mobile large sticky ads, Coalition for Better Ads
• Mobile full-screen scrollover ads, Coalition for Better Ads
• Mobile sticky video with large inline ad, Coalition for Better Ads
• Minimize layout shift, Google Publisher Tag
• Introduction to the Ad Experience Report, Web Tools Help
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C