Anleitung zum Viewport (HTML-Metaviewport-Tag)

Was ist ein Sichtfenster?

Viewport ist ein Meta-Tag im des HTML. Es handelt sich um den sichtbaren Teil einer Webseite, den ein Benutzer auf seinem Gerät oder Monitor sehen kann. Falsche Ansichtsfenster führen dazu, dass Benutzer beim Surfen auf der Website scrollen müssen, anstatt dass die Website perfekt auf den Bildschirm ihres Geräts passt.

Warum ist das Ansichtsfenster wichtig?

Für Mobilgeräte optimierte Websites schneiden besser ab, Punkt. Um maximale Mobilfreundlichkeit mit geringsten Investitionen zu erreichen, müssen Websites die Zeit reduzieren, die ein Benutzer mit dem Scrollen oder Ändern der Seitengröße verbringt.

Die Erstellung eines responsiven Designs für die Website ist unerlässlich, da erwartet wird, dass sie von allen Arten von Benutzern und auf jedem Gerät besucht wird. Es liegt an Ihnen, mithilfe des Ansichtsfensters für jedes Gerät die bestmögliche Version Ihrer Website anzubieten.

Einfluss des mobilen Viewports auf SEO

Die Konfiguration Ihres mobilen Darstellungsbereichs ist die einfachste und effektivste Möglichkeit, die Mobilfreundlichkeit Ihrer Website zu erhöhen. Google listet Ansichtsfenster-Meta-Tags zuerst auf Grundprinzipien des responsiven Webdesignsund spiegelt die SEO-Richtlinien wider, denen jede Website folgen muss. Bei der Mobile-First-Initiative heißt es weiter: „Seiten, die für verschiedene Geräte optimiert sind, sollten ein Meta-Viewport-Tag im Dokumentkopf enthalten.“

Best Practices für Viewport

Um sicherzustellen, dass eine Seite mobilfreundlich erscheint, finden Sie hier einige Tipps:

Zeigen Sie die Seite nicht in einer bestimmten Breite an, da die Breite von Gerät zu Gerät unterschiedlich sein kann.

Vermeiden Sie in Ihrem CSS die Verwendung absoluter Breitenwerte wie cm, mm, in, px, pt oder pc. Verwenden Sie stattdessen relative Breitenwerte wie em, ex, ch, rem, vw, vh vmin, vmax und %. Die Verwendung absoluter Werte kann dazu führen, dass die Elemente Ihrer Website weiter geladen werden, als Ihr Ansichtsfenster zulässt.

Testen Sie manuell die Reaktionsfähigkeit und Darstellungsbereitschaft Ihrer Website

Der einfachste und schnellste Weg, um festzustellen, wie Ihre Website auf verschiedenen Geräten aussieht, besteht darin, Ihren Ahrefs-Bericht zu erstellen und den Abschnitt „Geräteanzeige“ des Berichts anzuzeigen:

Lesen:  Eine vollständige Anleitung zum Erlernen der Blockchain-Programmierung

Sie sollten Ihre Website mit Ihrem eigenen Gerät oder mit Chrome „Inspect“ testen, um zu sehen, wie Ihre Website basierend auf den verschiedenen von Google angebotenen Geräten dargestellt wird. Bitte beachten Sie, dass Sie im Chrome-Browser Ihren Bildschirm nicht von links nach rechts ziehen oder zusammenziehen können, um zu zoomen.

Sobald Sie mit der Anzeige Ihrer Website beginnen, ziehen Sie die rechte Seite, um die Breite zu ändern und zu sehen, wie gut Ihre Website für mobile Benutzer konzipiert ist.

Sie können auch beliebte Geräte auswählen und feststellen, ob jedes Gerät korrekt angezeigt wird.

Möchten Sie mehr Geräte? Abhängig von den Anforderungen Ihrer Website kann Ihnen Google Analytics dabei helfen, festzustellen, welche Geräte auf Ihrer Website am häufigsten vorkommen.

Sie können auch zu gehen Publikum > Handy, Mobiltelefon > Geräte und finden Sie die beliebtesten Geräte, mit denen Ihre Website angezeigt wird.

Wenn die aufgelisteten Geräte nicht auf den beliebtesten derzeit verfügbaren Geräten basieren, können Sie das Gerät anhand des Namens suchen oder benutzerdefinierte Geräte basierend auf dem Pixel-Seitenverhältnis hinzufügen.

So fügen Sie ein benutzerdefiniertes Gerät hinzu:

Gehen Sie zu DevTools Institutionen > Geräte > Benutzerdefiniertes Gerät hinzufügen.

Geben Sie dann einen Gerätenamen, eine Breite, Höhe, ein Gerätepixel-Seitenverhältnis und eine Benutzeragentenzeichenfolge ein.

So konfigurieren Sie den mobilen Ansichtsbereich für Ihre Website

Abhängig vom aktuellen Design Ihrer mobilen Website gibt es drei Möglichkeiten, eine für Mobilgeräte optimierte Website zu gestalten: dynamisch, mit separater URL und responsives Design.

Dynamische Designkonfiguration

Wenn Sie derzeit über ein dynamisches Design verfügen, müssen Sie eine ganz separate Seite erstellen, um verschiedene Versionen darzustellen und jedem Benutzeragenten mitzuteilen, worauf er über dieselbe URL zugreifen soll. Sie müssen den Vary-HTTP-Header auf der Seite verwenden. Nachfolgend finden Sie ein Beispiel dafür, wie Sie diese Anfrage stellen können:

Lesen:  WordPress 3.0-Upgrade: Was Sie erwartet

GET /page-1 HTTP/1.1

Host: www.example.com

(…restliche HTTP-Anfrageheader…)

HTTP/1.1 200 OK

Inhaltstyp: Text/HTML

Variieren: Benutzeragent

Inhaltslänge: 5710

(…restliche HTTP-Antwortheader…)

Weitere Informationen hierzu finden Sie hier dynamische Designkonfiguration.

Separate URL-Konfiguration

Separate URLs erfordern mehr Entwicklungsressourcen und erfordern außerdem, dass Sie eine Website von Grund auf erstellen und sie auf einer Subdomain wie www.m.example.com hosten. Um Suchmaschinen das Verständnis einzelner mobiler URLs zu erleichtern, kommentieren Sie sowohl Desktop-Geräte www.example.com als auch mobile Geräte www.m.example.com.

Hier sind Beispiele, wie Sie jede URL mit Anmerkungen versehen können:

Fügen Sie auf der Desktop-Seite (http://www.example.com/page-1) Folgendes hinzu:

und auf der mobilen Seite (http://m.example.com/page-1) sollte die erforderliche Anmerkung lauten:

Dieses rel=”canonical”-Tag auf der mobilen URL, die auf die Desktop-Seite verweist, ist erforderlich.

Sitemap-Anmerkungen sollten Folgendes enthalten:

xmlns:xhtml=”http://www.w3.org/1999/xhtml”>

http://www.example.com/pagina-1/

rel=”alternative”
media=”nur Bildschirm und (maximale Breite: 640 Pixel)”

href=”http://m.example.com/page-1″ />


Weitere Informationen hierzu finden Sie hier separate URL-Konfiguration.

Responsive Design-Konfiguration

Responsive Design ist die einfachste und effektivste Art, eine Website zu erstellen Von Google empfohlen. Die Konfiguration des Ansichtsfensters sollte sicherstellen, dass die Seite mit einer Breite geladen wird, die der Bildschirmbreite des Geräts entspricht, wie zum Beispiel:

A Das Viewport-Element weist den Browser an, wie er die Größe und Skalierung der Seite verwalten soll.

Durch Hinzufügen des Codes width=device-width wird die Größe der Seite an die Breite des Bildschirms angepasst, die ebenfalls je nach Gerät des Benutzers variieren kann.

Der Abschnitt „initial-scale=1.0“ legt die anfängliche Zoomstufe fest, wenn die Seite zum ersten Mal vom Browser geladen wird.

Nachdem Sie den Darstellungsbereich einer Seite festgelegt haben, sollte der nächste Schritt darin bestehen, die Größe des Seiteninhalts zu ändern. Hier ist ein Beispiel für einen mobilfreundlichen Ansichtsbereich, der den Inhalt an die Ansicht des Benutzers anpasst:

Wenn in diesem Beispiel das Ansichtsfenster deaktiviert oder nur für den Desktop konfiguriert ist, müssen Sie es seitwärts verschieben oder zum Zoomen zusammenziehen, um die gesamte Site auf dem Gerät anzuzeigen.

Lesen:  Top-Tipps für den Versand hochwertiger Artikel zu und von Ihrem Unternehmen

So konfigurieren Sie den mobilen Ansichtsbereich in WordPress

Am meisten Themen in WordPress sollte bereits über ein Ansichtsfenster verfügen und auf Mobilgeräte reagieren. Wenn Ahrefs festgestellt hat, dass Ihr WordPress-Theme kein Ansichtsfenster hat, können Sie dies am besten in Ihrem WordPress-Theme überprüfen.

Du musst gehen Aussehen > Editor > Header.php das zu tun.

Der header.php Die Datei muss Folgendes enthalten:

oder

Wenn Sie derzeit kein Ansichtsfenster in der Datei header.php haben und die Responsive-Prüfung bereits durchgeführt haben, wenden Sie sich bitte an Ihren Theme-Entwickler.

Wenn Ihnen der Zugriff auf header.php zu technisch erscheint, können Sie das WordPress-Plugin „Kopf- und Fußzeilen einfügen“ installieren und den Ansichtsbereich im Header-Bereich eingeben.

So konfigurieren Sie den mobilen Ansichtsbereich in Wix

Leider können Sie Wix-Ansichtsfenster derzeit nicht konfigurieren oder reparieren.

Wix verwendet den Meta-Tag:

.

Wenn also Ahrefs bzw Handyfreundlicher Tester von Google Wenn Sie Ihre Website überprüfen, verlieren Sie Punkte für die Mobilfreundlichkeit. Das bedeutet nicht, dass Sie an Rang verlieren oder auf eine andere Plattform wechseln müssen, sondern nur, dass die Erkennung auf einer Gerätebreite basiert, die skalierbar und individuell für jedes Gerät anpassbar ist.

Weitere Informationen zum Wix-Viewport-Problem finden Sie hier unter folgendem Link:

https://support.wix.com/en/article/viewport-configuration-for-mobile-devices

So konfigurieren Sie den mobilen Ansichtsbereich in Shopify

Das Shopify-Theme sollte wie WordPress für den Ansichtsbereich geeignet sein. Wenn Sie jedoch aufgrund des Themas das Ansichtsfenster überprüfen oder hinzufügen müssen, können Sie zu gehen Thema > Aktionen > Code bearbeiten.

Finden Sie „theme.liquid”-Datei und Sie sehen das Ansichtsfenster in der Abschnitt.

Wenn Sie das Ansichtsfenster nicht finden können, können Sie sich an den Theme-Entwickler wenden oder das Ansichtsfenster hinzufügen und den Reaktionstest ausführen, um Ihre nächsten Schritte festzulegen.

Aktuelle Artikel:

Empfohlen