Divi Viewport Fehler – Google Mobile Usability richtig lösen
Warum Google den Viewport in Divi bemängelt
Wenn du Divi verwendest und in der Google Search Console oder bei der Seitenprüfung Hinweise zur Mobile Usability erhältst, liegt das sehr häufig an einer falschen Viewport-Konfiguration. Divi setzt standardmäßig einen Meta-Tag, der das Zoomen auf Mobilgeräten deaktiviert. Genau das stuft Google als Barrierefreiheitsproblem ein.
Die Parameter maximum-scale=1.0 und user-scalable=0 verhindern das Vergrößern von Inhalten per Finger-Geste. Nutzer mit eingeschränktem Sehvermögen können Inhalte dadurch schlechter lesen, was Google explizit kritisiert.
Warum einfache Entfernen-Versuche oft scheitern
Viele Anleitungen empfehlen, den Divi-Viewport mit remove_action zu entfernen. In der Praxis funktioniert das jedoch nicht zuverlässig. Der Grund ist, dass Divi den Viewport teilweise sehr früh oder direkt beim Rendern des Head-Bereichs ausgibt. Spätere Hooks greifen dann nicht mehr.
Das Ergebnis ist frustrierend: Der Code ist korrekt eingebaut, aber der fehlerhafte Viewport taucht weiterhin im Quelltext auf.
Die saubere und update-sichere Lösung für Divi
Divi stellt selbst einen offiziellen Filter bereit, mit dem sich der Viewport korrekt anpassen lässt. Dieser Ansatz ist stabil, update-sicher und ohne Workarounds.
Der entscheidende Filter heißt et_viewport_meta.
Schritt-für-Schritt: Viewport in Divi korrekt setzen
1. PHP-Code einfügen
Füge den folgenden Code in die functions.php deines Child-Themes ein. Alternativ kannst du ein PHP-Snippet-Plugin verwenden, das Code im Frontend ausführt.
return ‚width=device-width, initial-scale=1.0‘;
});
Damit weist du Divi an, einen Google-konformen Viewport ohne Einschränkung der Zoom-Funktion auszugeben.
2. Alte Lösungsversuche entfernen
Entferne unbedingt alle zuvor getesteten Varianten, zum Beispiel zusätzliche Viewport-Meta-Tags, JavaScript-Lösungen oder remove_action-Snippets. Es darf am Ende nur eine einzige Viewport-Definition existieren.
3. Caches vollständig leeren
Nach der Änderung müssen alle Caches geleert werden, sonst bleibt der alte Code sichtbar.
- Divi → Theme Options → Builder → Static CSS löschen
- Cache-Plugin leeren (z. B. WP Rocket, LiteSpeed, W3 Total Cache)
- Browser-Cache leeren oder im Inkognito-Fenster prüfen
4. Ergebnis prüfen
Öffne den Seitenquelltext und suche nach viewport. Das Ergebnis muss exakt so aussehen:
Die Parameter maximum-scale und user-scalable dürfen nicht mehr vorhanden sein.
Warum diese Lösung Google-konform ist
Mit dieser Einstellung bleibt dein Divi-Layout unverändert, Nutzer können Inhalte wieder frei vergrößern und Google stuft deine Seite als barrierefrei ein. Der Mobile-Usability-Fehler verschwindet nach der erneuten Prüfung in der Search Console.
Google Search Console richtig nutzen
Nachdem der Code angepasst wurde, solltest du in der Google Search Console eine URL-Prüfung durchführen, die Live-Version testen und anschließend die Indexierung neu beantragen. In der Regel wird der Fehler innerhalb weniger Tage entfernt.
Häufige Fehler vermeiden
Mehrere Viewport-Meta-Tags, fehlende Cache-Leerung oder Tests im normalen Browserfenster führen häufig dazu, dass Änderungen nicht sichtbar werden. Achte darauf, immer im Inkognito-Modus zu prüfen und nur eine Viewport-Definition zu verwenden.
Fazit
Der Viewport-Fehler ist kein Google-Bug und kein Plugin-Problem, sondern eine Divi-Standardeinstellung. Mit dem offiziellen Divi-Filter lässt sich das Problem sauber, dauerhaft und update-sicher beheben.
Wenn du Unterstützung benötigst, kannst du dich jederzeit per E-Mail an hello@mikas.at wenden.