How to Limit Adsense Responsive Ad Sizes

15Katey

Member
I switched over to Adsense responsive ads a few years ago. Since then, I've seen many gigantic ads on my website. They're located pretty much everyplace I put this code. I'm not in love with these things and ever since I watched a video that was released by the Google Webmasters Youtube channel that discussed mobile first indexing, I've been very concerned with having a very large ad located at the top of my website. When my pages are viewed on a desktop, they're fine. The ad doesn't take up that much room. But when it's viewed on a smart phone, the ad takes up most of the initial screen real estate. Google even warns about this in the video I watched, so that's what prompted me to look into whether or not I could limit the sizes of these responsive ads. I can and I'll show you how to do it too. First though, take a look at the 5:50 mark of this video. This is the section I'm referring to that discusses how the mobile first Googlebot doesn't like having large ads located above the fold on web pages. They say it's a bad user experience, which I happen to agree with.


Google now gives us the opportunity to modify Adsense ad code to limit the sizes of ads based on screen width. What this means is that we can now offer our website visitors one size ad on a desktop, one size on a tablet, and one size on a mobile phone. Here are the instructions for modifying Adsense ads in this way. All it takes is a bit of code and some changes to the original ad itself.

Here's some demo ad code with the modifications:

Code:
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

The example above covers what to do if you'd like to serve exact size ads. On the page I linked to above, there are instructions of you'd like to put height or width limits on the ad code instead, without limiting both height and width.

A few days ago, I modified my ad code and then tested the ads on a mobile phone. Everything works great. So if you've got any questions about how to do this, please ask below.
 
Top