Viele Suchmaschinen orientieren sich bei der Rangfolge einer Seite danach, wie gut sie für Mobilgeräte optimiert ist. Ohne ein Meta-Tag für den Darstellungsbereich rendern Mobilgeräte Seiten mit typischen Desktop-Bildschirmbreiten und verkleinern die Seiten dann, sodass sie schwer zu lesen sind.
Wenn Sie das Meta-Tag für den Darstellungsbereich festlegen, können Sie die Breite und Skalierung des Darstellungsbereichs so steuern, dass er auf allen Geräten die richtige Größe hat.
So schlägt die Überprüfung des Lighthouse-Meta-Tags für den Darstellungsbereich fehl
Lighthouse kennzeichnet Seiten ohne Darstellungsbereich-Meta-Tag:
Eine Seite besteht die Prüfung nicht, wenn alle diese Bedingungen erfüllt sind:
– Das <head>
des Dokuments enthält ein <meta name="viewport">
-Tag.
– Das Darstellungsbereich-Meta-Tag enthält ein content
-Attribut.
– Der Wert des content
-Attributs enthält den Text width=
.
Meta-Tag für den Darstellungsbereich hinzufügen
Fügen Sie dem <head>
Ihrer Seite ein <meta>
-Tag für den Darstellungsbereich mit den entsprechenden Schlüssel/Wert-Paaren hinzu:
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
Funktionsweise der einzelnen Schlüssel/Wert-Paare:
– width=device-width
legt die Breite des Darstellungsbereichs auf die Breite des Geräts fest.
– initial-scale=1
legt die anfängliche Zoomstufe fest, wenn der Nutzer die Seite besucht.