Sie sind mit Freunden unterwegs, alle sind nur am Lachen, Sie haben Spaß ohne Ende – und plötzlich stichelt jemand in der Gruppe die anderen mit einer kniffeligen Frage an: „Warum gibt es eigentlich keine ,B‘-Batterien?“

Wie identifizieren Sie die Keywords, nach denen Ihre Zielgruppe tatsächlich  sucht? Finden Sie es heraus – in unserem kostenlosen Ebook „Einführung in die  Suchmaschinenoptimierung“.

Sie sind völlig überfragt. Genau wie alle anderen auch. Also zücken Sie ganz profimäßig Ihr Smartphone und tippen die Frage in Google ein. Und schwuppdiwupp: Ein Blog-Beitrag einer Batteriefirma wird angezeigt, in dem es um die nationalen Vorschriften für einheitliche Batteriegrößen geht. Genau das, wonach Sie gesucht haben, Sie Streber!

Aber da gibt’s ein Problem: Die Inhalte der Website werden so geladen, als ob Sie diese auf Ihrem Computer anschauen würden. Genauer gesagt: Sie sind klitzeklein und Sie müssen ziemlich viel heranzoomen und herumscrollen, um die Inhalte lesen zu können. Sehr nervig!

Das ist ein Beispiel für ein Viewport-Problem.

Was sind Viewports?

Der Viewport bzw. der Anzeigebereich einer Website bestimmt die Breite einer Webseite auf dem Gerät, auf dem sie geöffnet wird.

Wenn Sie den Viewport Ihrer Website nicht einstellen, verdammen Sie Ihre Besucher zu vielen frustrierenden Minuten des Heranzoomens und Hin- und Herscrollens. (Wenn sie sich überhaupt darauf einlassen und Ihre Website nicht gleich wieder verlassen.) Und das wird einen Großteil Ihrer Websitebesucher betreffen, denn schon jetzt wird häufiger mit dem Handy gesucht als auf dem Computer.

Wenn Ihre Website mithilfe des HubSpot CMS erstellt wurde, müssen Sie sich keine Sorgen um den Viewport machen. Ihre Seiten werden sich automatisch an den richtigen Viewport auf jedem Gerät anpassen. Ansonsten müssen Sie – sogar bei einem responsive Design – stets den Viewport einstellen, um Ihren mobilen Besuchern ein angenehmes Benutzererlebnis zu bieten.

In diesem Beitrag erkläre ich Ihnen, wie das funktioniert. Aber zunächst möchte ich Ihnen die Funktionalität von Viewports noch ein bisschen genauer erklären und Ihnen zeigen, wie das Ganze aussieht.

So sieht Ihre Seite mit und ohne Viewport aus

Wenn Sie Ihren Viewport nicht für Mobilgeräte einstellen, wird Ihre Website auf diesen Geräten mit der Breite wiedergegeben, die für einen typischen Desktop-Bildschirm vorgesehen ist. Das Mobilgerät schrumpft die Ansicht dann automatisch so, dass sie auf den kleinen Bildschirm passt, mit dem Ergebnis, dass die Texte und Grafiken winzig klein angezeigt werden. Das ist die sogenannte „Standardbreite“ mit einer Pixelgröße zwischen 800 – 1024.

Wenn Sie Ihren Viewport für Mobilgeräte einstellen, wird Ihre Website auf diesen Geräten automatisch auf die Größe des Bildschirms skaliert und bietet ein weitaus besseres Benutzererlebnis.

Wie sieht das genau aus? Im untenstehenden Beispiel sehen Sie auf der linken Seite einen Bildschirm, bei dem der Viewport nicht für Mobilgeräte eingestellt wurde. Der mobile Browser stellt also automatisch die für einen Desktop-Computer vorgesehene Breite dar. Beim Beispiel auf der rechten Seite wurde der Viewport eingestellt, sodass der mobile Browser die Breite automatisch anpasst und die Inhalte skaliert, damit sie gut lesbar sind.

Als Erstes sollten Sie herausfinden, ob bereits ein Viewport eingestellt ist

Führen Sie dazu einfach den Google Mobile Ready Check durch. Fügen Sie Ihre URL in das vorgesehene Feld ein und klicken Sie auf „Submit“ (Einreichen). Das Tool testet, ob Ihre Website bereits für Mobilgeräte optimiert ist und prüft, ob Ihr Viewport eingestellt ist.

Wenn Ihr Viewport noch nicht eingestellt ist, lesen Sie weiter.

So stellen Sie den Viewport Ihrer Website ein

Um einen mobilen Viewport einzustellen, müssen Sie einfach einen Meta-Viewport-Tag zu allen Webseiten hinzufügen, die Sie für Mobilgeräte optimieren möchten.

Kopieren Sie dazu einfach den folgenden HTML-Tag und fügen Sie ihn in den Header Ihrer Website ein.

<meta name=viewport content="width=device-width, initial-scale=1">

Wenn Sie diesen Viewport Tag in Ihre Header-Datei einfügen, optimiert das in der Regel automatisch Ihre gesamte Website für Mobilgeräte. Es ist aber auch möglich, dass Sie den Viewport Tag für jede einzelne Ihrer Webseiten einfügen müssen. Vor allem, wenn Sie für Ihre Website und Ihre Landing-Page jeweils eine andere Software verwenden. Wenn Sie kein integriertes CMS, wie beispielsweise das CMS von HubSpot verwenden, müssen Sie manuell prüfen, ob Ihre Landing-Pages, Ihre Webseiten und Ihr Blog schon einen Viewport Tag haben und somit für Mobilgeräte optimiert sind.

Hinweis: Durch den Viewport Tag bekommt Ihre Website kein responsives Design – das ist ein anderer Prozess. Aber durch den Tag müssen Benutzer nicht mehr umständlich zoomen und herumscrollen, um Inhalte auf Ihrer Website lesen zu können.

Was hat es mit dem roten Text auf sich?

Wenn Sie den roten Text („device-width“) so stehen lassen, wie er ist, bedeutet das einfach, dass Sie keine bestimmte Geräte-Breite einstellen, in der Ihre Website angezeigt werden soll. Ihre Website wird sich dann automatisch an die Breite der Geräte anpassen. Dies ist der Regelfall.

Wenn Sie aus irgendeinem Grund einen bestimmten Inhalt für ein bestimmtes Gerät in einer bestimmten Breite darstellen möchten, dann müssen Sie den roten Text durch die Pixelbreite des gewünschten Gerätes ersetzen. Wenn Sie einen Pixelwert in den Tag eingeben (was, wie gesagt, nicht notwendig ist), dann wird Ihre Website auf jedem Gerät in dieser von Ihnen bestimmten Breite angezeigt. (Dies wird üblicherweise nicht empfohlen, es sei denn, Sie haben eine bestimmte Seite/Website so gestaltet, dass sie in einer ganz bestimmten Breite angezeigt werden muss. Allerdings können Sie nur einen einzigen Viewport Tag einstellen, Sie müssen sich also eine Gerätegröße aussuchen und dabei bleiben.)

Aber nehmen wir einmal an, Sie möchten gerne eine ganz bestimmte Breite einstellen. Zum Beispiel unterscheiden sich die Breitenmaße von verschiedenen iPhone-Modellen voneinander. Sagen wir also, Sie möchten, dass Ihre Website genau in der Größe des Querformats des iPhone 6 angezeigt wird. Die Querformat-Breite des iPhone 6 beträgt 667 Pixel; also würden Sie den folgenden Tag auf Ihrer Website einfügen:

<meta name=viewport content="width=667, initial-scale=1">

Alle iPads haben eine Querformat-Breite von 1024 Pixel, also würden Sie diesen Tag auf Ihrer Website einfügen:

<meta name=viewport content="width=1024, initial-scale=1">

Alles klar? Hier finden Sie eine vollständige Liste der verschiedenen Gerätegrößen für den Viewport Tag.

Vergessen Sie nicht, dass es eventuell Probleme geben könnte, wenn Ihr Viewport Tag auf eine bestimmte Größe eingestellt ist, Besucher Ihrer Website aber verschiedene Mobilgeräte benutzen. Eine Lösung dafür könnten eventuell JavaScripts sein, mit denen Sie die einzelnen Meta-Tag-Attribute zumindest bedingt aussuchen können, wie Ian Yates in seinem Blog-Beitrag erklärt... Sie können sich diese Mühe aber auch sparen, indem Sie einfach den roten Text „device-width“ (Geräte-Breite) im Viewport Tag beibehalten – das ist definitiv die einfachste Lösung.

Der Teil des HTML-Tags „initial-scale“ kann übrigens immer bei 1 bleiben. Das bedeutet einfach, dass das Layout Ihrer Website auf jedem Gerät immer mit einem Maßstab von 1:1 dargestellt wird. Dadurch kann Ihre Webseite die volle Breite des Querformats nutzen, egal wie ein Mobilgerät ausgerichtet ist (Hoch- oder Querformat).

was-ist-seo-cta

Ursprünglich veröffentlicht am 8. September 2015, aktualisiert am Dezember 04 2017

Themen:

Mobile Optimierung