Technisches SEO - Teil 1

Heute beginnen wir mit einer neuen Serie über technisches SEO mit dem ersten Bereich: Mobile Optimierung

In einer Welt, in der über 60 % des Webtraffics von mobilen Geräten stammt (StatCounter, 2024), ist eine optimierte mobile Darstellung Ihrer Website entscheidend für Nutzererfahrung (UX) und Suchmaschinenrankings. Google bevorzugt seit dem Mobile-First-Indexing explizit mobile-optimierte Seiten.

Dieser Artikel erklärt die drei Kernpfeiler der Mobile Optimierung:

Responsive Design
Viewport-Einstellungen
Touch-Freundlichkeit

1. Responsive Design

Was ist das?

Responsive Design sorgt dafür, dass sich eine Website automatisch an verschiedene Bildschirmgrößen (Desktop, Tablet, Smartphone) anpasst – ohne separate mobile Version.

<br><br>

Warum ist es wichtig?

Google-Ranking: Mobile Usability ist ein direkter Rankingfaktor.
Nutzerfreundlichkeit: Vermeidet Zoomen und horizontales Scrollen.
Kostenersparnis: Keine separate mobile Seite nötig.

Umsetzung

a) CSS Media Queries

Definieren Sie Breakpoints für unterschiedliche Bildschirmgrößen:

css

Copy

/* Desktop (Standard) */

.container { width: 1200px; }

/* Tablet (768px–1024px) */

@media (max-width: 1024px) {

.container { width: 90%; }

}

/* Mobile (< 768px) */

@media (max-width: 768px) {

.menu { display: none; } /* Hamburger-Menü statt Desktop-Navigation */

.button { padding: 12px 24px; } /* Größere Touch-Ziele */

}

b) Flexible Grids & Bilder

Nutzen Sie relative Einheiten (%, rem, vw) statt fester Pixelwerte.
Bilder skalierbar halten

css

Copy

img { max-width: 100%; height: auto; }

c) Frameworks & Tools

CSS-Frameworks: Bootstrap, Tailwind CSS (vordefinierte Breakpoints).

WordPress: Themes wie Astra oder GeneratePress sind standardmäßig responsive.

2. Viewport-Einstellungen
Was ist der Viewport?
Der Viewport ist der sichtbare Bereich einer Website auf dem Gerät. Ohne korrekte Einstellungen erscheint die Seite auf Mobilgeräten oft unleserlich verkleinert.
Meta-Tag im HTML-Head
Fügen Sie dies in den <head> Ihrer Website ein:

html
Copy

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">

Run HTML

Parameter erklärt:

Parameter

Wirkung

Empfehlung

width=device-width

Passt die Breite an das Gerät an.

Immer nutzen

initial-scale=1.0

Start-Zoomstufe (1.0 = keine Vergrößerung).

Standard

maximum-scale=5.0

Maximaler Zoom (optional).

Nur bei Bedarf

user-scalable=yes

Erlaubt Nutzern, zu zoomen.

Ja (Barrierefreiheit!)

Wichtig:

Vermeiden Sie user-scalable=no – es schränkt die Barrierefreiheit ein

Testen Sie mit dem Google Mobile-Friendly Test.

Parameter	Wirkung	Empfehlung
width=device-width	Passt die Breite an das Gerät an.	Immer nutzen
initial-scale=1.0	Start-Zoomstufe (1.0 = keine Vergrößerung).	Standard
maximum-scale=5.0	Maximaler Zoom (optional).	Nur bei Bedarf
user-scalable=yes	Erlaubt Nutzern, zu zoomen.	Ja (Barrierefreiheit!)

Diesen Blog hat der SEO Spezialist Köln für die SEO Beratung Köln erstellt.

Seite1SEO
Deutz Mülheimer Strasse 330
51063 Köln
Tel.: 061962028758 erst ab 18:00 Uhr

Weitere Informationen

Fordern Sie gleich ein kostenloses Angebot an. (nur auf Angebot clicken)
Mehr dazu: SEO Betreuer Köln

+11

H: +9°

L: +5°

Köln

Freitag, 19 April

7-Tage-Vorhersage nachsehen

Do	Sa	So	Mo	Di	Mi

+13°	+9°	+11°	+11°	+12°	+10°
+5°	+5°	+3°	+4°	+2°	+5°