Adsense Warnung: Large ads above the fold on mobile  – Wer Adsense auf mobilen Webseiten einsetzt, hat unter Umständen bereits den Hinweis bekommen, das eine Webseite gegen die Richtlinien verstößt und zwar aus dem Grund „Large ads above the fold on mobile“. Adsense verschickt diese Hinweise direkt im Account (mit roter Schrift) man kann sie also kaum übersehen. Leider ist die Erklärung von Google zu diesem Problem recht allgemein gehalten, so dass man nicht genau weiß, was zu tun ist. Im Original heißt es :

Publisher dürfen Google Anzeigen nicht so implementieren, dass sie nicht als Anzeigen erkennbar sind. Google Anzeigen müssen klar vom Content der jeweiligen Website abgegrenzt werden, um eine positive Nutzererfahrung sicherzustellen. In diesem Zusammenhang sind unter anderem Layouts zu vermeiden, bei denen der Content auf der Seite auf Mobilgeräten durch die Anzeigen an eine Position verschoben werden, die nur mit Scrollen sichtbar ist („below the fold“). Außerdem dürfen auf für Mobilgeräte optimierten Websites keine Anzeigenblöcke im Format 300 x 250 oder größer an „above the fold“-Position platziert werden.

Wo liegt das Problem bei „Large ads above the fold on mobile“?

Die erklärung für diese Meldung liegt im letzten Satz. Bei mobiler Darstellung auf Handys und Smartphones dürfen keine Anzeigenblöcke mit 300×250 Pixeln Größe verwendet werden – zumindest nicht obrhalb des normalen Contents. Diese Anzeigenblöcke sind aber gerade auf normalen Webseiten oft Standard und sie werden dann auch mobil mit ausgeliefert.

Google empfiehlt stattdessen lieber den 320×100 Block für die mobile Verwendung: dieser liefert aber auf normalen Rechnern schlechtere Werte. Die Lösung ist daher, für mobil und Desktop unterschiedliche Werbungen auszuliefern. Das machen viele Adserver von allein, wer aber die Adsense Werbung manuell einbindet, muss sich an dieser Stelle selbst etwas einfallen lassen.

Einfache mobile Weiche um das Problem zu lösen

Ich habe auf einigen Webseiten dazu eine einfache Lösung eingesetzt, die einfach bestimmte Banner deaktiviert, je nachdem, welche Auflösung genutzt wird. Zuerst benötigt man dazu zwei Adsense Werbeblöcke:

• einen Block mit 350×250 Auflösung für den Desktop
• einen Block mit 320×100 Auflösung für die mobile Darstellung

Danach definiere ich mit zwei neue CSS Klassen, die für die Darstellung genutzt werden soll. Die erste (adsense-big) wird auf mobilen Geräten ausgeblendet (bei Displaygröße von weniger als 480 Pixeln), die andere Klasse (adsense-small) ist auf normalen Geräten ausgeblendet und wird nur mobil eingeblendet:

.adsense-small { display:none; }
.adsense-big { display: block; }

@media only screen and (max-width:480px) {
.adsense-small { display:block; }
.adsense-big { display: none; }
}

Die CSS Answeisungen werden entweder im Admin Bereich hinterlegt, falls es dort die Möglichkeit gibt, individuelle CSS einzubinden. Ansonsten kann ma sie auch einfach ans Ender der style.css des Templates setzen. Dafür sollte aber ein Child-Template genutzt werden, sonst kann es passieren, dass bei einem Update diese Änderung wieder überschrieben wird.

Die Adsense Codes werden jetzt jeweils ein einen <div> Container eingeschlossen, der die entsprechende Klasse erhält. Danach platzier man beide Container auf dem Werbeplatz above the fold – also oberhalb des Contents.

Danach kann man Adsense im System melden, dass dieses Problem behoben wäre. Wer sich unsicher ist, kann auch noch mal mit Tools prüfen, ob die Anzeige funktioniert, im einfachsten Fall reicht es auch, den Browser so zusammen zu schieben, dass die Beitre weniger als 480px beträgt. Wechselt dann auch das Werbebanner, hat man alles richtig gemacht.