Unterschiedliche Inhalte für Mobil und Desktop in WordPress anzeigen

Um in WordPress unterschiedliche Inhalte auf Mobil und Desktop anzuzeigen, blendest du entweder Blöcke nach Bildschirmgröße aus, sodass jedes Gerät dieselbe Seite bekommt und der Browser verbirgt, was nicht passt, oder du lässt den Server das Gerät erkennen und jedem eine andere Seite schicken. Das Ausblenden nach Bildschirmgröße ist die richtige Wahl für das Layout und funktioniert mit jedem Seiten-Cache; Geräteregeln auf dem Server sind für den seltenen Fall gedacht, in dem ein Smartphone bestimmte Inhalte gar nicht erst bekommen soll.

Dieser Artikel erklärt beide Ansätze, wie du sie einrichtest (mit dem Block-Editor, einem Page Builder, ein paar Zeilen CSS oder einem Plugin) und die zwei Fallen, in die die meisten tappen: den Seiten-Cache und die Mobile-First-Indexierung von Google.

Zwei Wege, unterschiedliche Inhalte auf Mobil und Desktop zu zeigen

Der Unterschied liegt darin, wo die Entscheidung fällt.

• Nach Bildschirmgröße (CSS): Die ganze Seite geht an jeden Besucher. Gestaltungsregeln, sogenannte Media Queries, blenden einige Teile aus, wenn der Bildschirm schmaler oder breiter als ein festgelegter Wert ist. Nichts wird entfernt, es wird nur nicht angezeigt.
• Nach Gerät (auf dem Server): Wenn die Seite abgerufen wird, schaut WordPress, was der Browser über sich selbst sagt (den User Agent und in modernen Browsern einen Hinweis, ob es ein Mobilgerät ist) und baut für Smartphones und Computer eine unterschiedliche Seite.

Für die meisten Websites ist die Antwort die erste Spalte. Lies weiter, um zu erfahren, wann sich der zusätzliche Aufwand der zweiten lohnt.

Option 1: Blöcke nach Bildschirmgröße ausblenden

Genau das bedeutet „responsives Design“ in der Praxis: eine Seite, die auf jedem Bildschirm anders angeordnet ist. Dafür gibt es vier gängige Wege.

Der Block-Editor von WordPress

Seit WordPress 7.0 kann der Block-Editor jeden unterstützten Block auf Desktop, Tablet oder Mobilgerät ausblenden. Die Option Ausblenden findest du in der Werkzeugleiste des Blocks und in der Listenansicht, wo ein kleines Symbol Blöcke mit einer Sichtbarkeitsregel markiert. Wie das WordPress-Team in der Entwicklernotiz zur Block-Sichtbarkeit (auf Englisch) erklärt, bleiben so ausgeblendete Blöcke in der Seite, und das Ausblenden geschieht per CSS. Die Umbruchpunkte sind in 7.0 fest vorgegeben.

Dein Theme oder Page Builder

Page Builder haben ihre eigenen Schalter. In Elementor zum Beispiel wählst du ein Widget oder einen Container aus, öffnest den Tab Erweitert und nutzt im Bereich Responsiv die Schalter Auf Desktop ausblenden, Auf Tablet Hochformat ausblenden und Auf Mobil Hochformat ausblenden. Auch manche Themes bieten ähnliche Optionen. Prüfe, welche Breiten dein Builder verwendet, denn sie können von denen deines Themes abweichen.

Ein paar Zeilen CSS

Wenn dir ein wenig Code nichts ausmacht, gib dem Block im Panel Erweitert unter Zusätzliche CSS-Klasse(n) einen Klassennamen, zum Beispiel hide-on-phone. Füge dann das hier in das Zusätzliche CSS deiner Website ein:

@media (max-width: 781px) { .hide-on-phone { display: none; } }

Ändere die Zahl, um den Umbruchpunkt zu verschieben. Für den umgekehrten Effekt nimm min-width mit einer Klasse wie hide-on-desktop.

Ein Plugin

Mit Content Gate Pro hat das Panel Visibility jedes Blocks eine Option Hide on mit drei Kästchen: Phone (Bildschirme bis 781 Pixel Breite), Tablet (782 bis 1023 Pixel) und Desktop (ab 1024 Pixel). Auch das funktioniert per CSS, ist also mit Seiten-Cache sicher, und es braucht die Option Allow hiding blocks by screen size in den Settings, die standardmäßig eingeschaltet ist. Unter WordPress 7.0 deckt die Core-Option einfache Fälle schon ab; das Plugin ist nützlich, wenn du denselben Block zusätzlich auf angemeldete Benutzer oder bestimmte Rollen beschränkst. Siehe Einen einzelnen Block einschränken.

Option 2: Regeln nach Gerät auf dem Server

Hier entscheidet WordPress, bevor die Seite den Server verlässt. Die eigene Prüfung von WordPress, die Funktion wp_is_mobile() (Referenz auf Englisch), liest die Selbstbeschreibung des Browsers. Die offizielle Referenz ist in drei Punkten eindeutig: Sie misst nicht die Bildschirmbreite, Tablets zählen als Mobilgeräte, und jeder Seiten-Cache muss getrennte Kopien für mobile und Desktop-Besucher halten.

Wann lohnt sich das? Wenn ein Smartphone etwas gar nicht erst bekommen soll, zum Beispiel:

• eine schwere Einbettung, etwa einen großen 3D-Viewer oder Konfigurator, den Smartphones lieber nicht laden sollen;
• einen Software-Download für Computer, der auf einem Smartphone keinen Sinn ergibt;
• eine Seite, die Smartphone-Besucher ganz woandershin schicken soll.

So richtest du es mit Content Gate ein

Bedingungen nach Gerät sind eine Pro-Funktion. In einer Regel hat Schritt 6 Devices zwei Kästchen, Desktop und Phone; nichts angehakt heißt: alle Geräte. Das Gerät kommt zur Gruppe hinzu, die Zugriff behält: Hakst du Desktop an, kommen nur Besucher an einem Computer hinein, die auch Schritt 2 Who can see it erfüllen, während Smartphone-Besucher das bekommen, was Schritt 4 What everyone else gets festlegt, etwa eine Nachricht oder eine Weiterleitung auf eine smartphonefreundliche Seite. Auf einer Website, auf der sich Besucher nicht anmelden, kombinierst du es mit Only visitors who are not logged in.

Für einen Teil einer Seite kennt der Shortcode das Attribut devices: [content_gate who="logged_out" devices="desktop"]Software herunterladen[/content_gate] zeigt den Text nur Besuchern an einem Computer, die nicht angemeldet sind. Alle Optionen findest du unter So funktionieren Regeln.

Die Anleitung des Plugins selbst rät, Geräteregeln in Ruhe zu lassen, wenn du sie nicht wirklich brauchst. Der Server kann ein Smartphone von einem Computer unterscheiden, nicht aber die genaue Bildschirmgröße erkennen. Tablets zählen als Smartphones, außer neueren iPads, die sich als Mac ausgeben und als Desktop zählen.

Seiten-Cache und SEO: die zwei Fallen

Seiten-Cache

Ein Seiten-Cache speichert eine fertige Kopie jeder Seite und liefert sie an die nächsten Besucher aus. Wenn der erste Besucher nach dem Leeren des Caches ein Smartphone nutzt, kann die mobile Version an alle ausgeliefert werden, auch an Desktop-Besucher, bis der Cache abläuft. Das Ausblenden nach Bildschirmgröße hat dieses Problem nicht, weil jedes Gerät dieselbe Seite bekommt.

Wenn du Geräteregeln auf dem Server nutzt, tu eines davon:

• Schalte in deinem Caching-Plugin oder bei deinem Hosting die Option für einen getrennten Cache für Mobilgeräte ein, falls es sie gibt;
• nimm die betroffenen Seiten vom Cache aus;
• oder frag deinen Hoster, wie sein Cache mit mobilen Besuchern umgeht.

Google indexiert die mobile Version

Google verwendet für die Indexierung und das Ranking die mobile Version einer Seite, die mit einem Smartphone-Crawler abgerufen wird, und verlangt, dass die mobile Version dieselben Inhalte hat wie die Desktop-Version (siehe Googles Best Practices zur Mobile-First-Indexierung). Wenn du Text für Smartphones auf dem Server entfernst, wird Google ihn wahrscheinlich nie sehen. Lass deine wichtigen Inhalte auf Mobilgeräten stehen und nutze Geräteregeln für Extras, nicht für den Text, mit dem du ranken willst.

So testest du beide Versionen

1. Melde dich ab oder nutze ein privates Fenster. Mit Content Gate sehen Administratoren immer alles, deshalb scheinen Regeln mit deinem eigenen Konto nicht zu funktionieren.
2. Ausblenden nach Bildschirmgröße: Zieh das Browserfenster schmaler oder nutze die Geräteansicht in den Entwicklertools deines Browsers und beobachte, wie Blöcke erscheinen und verschwinden.
3. Regeln auf dem Server: Teste auf einem echten Smartphone. Ein schmales Desktop-Fenster ist für den Server immer noch ein Desktop.
4. Mit Cache: Leere ihn, öffne die Seite zuerst auf einem Smartphone und dann auf einem Computer und prüfe, ob jedes Gerät seine eigene Version bekommt.

Welche Option zu dir passt

Um aus Layoutgründen unterschiedliche Inhalte auf Mobil und Desktop anzuzeigen (eine kürzere Überschrift, ein kleineres Bild, ein smartphonefreundlicher Button), blende Blöcke nach Bildschirmgröße aus: mit dem Block-Editor ab WordPress 7.0, mit den Schaltern deines Page Builders oder mit einer Zeile CSS. Das ist einfach, funktioniert mit jedem Cache und folgt dem responsiven Design, das Google empfiehlt.

Nutze Geräteregeln auf dem Server nur, wenn ein Smartphone etwas nicht bekommen darf, und richte deinen Cache dafür ein. Wenn du Content Gate schon nutzt, um Inhalte nach Benutzerrolle einzuschränken, kannst du diese Entscheidung mit den Gerätebedingungen von Pro in dieselben Regeln aufnehmen.