de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So validieren Sie beschleunigte mobile Seiten (AMP)

In unserem letzten AMP-Tutorial haben wir Ihnen gezeigt, wie Sie AMP (Accelerated Mobile Pages) einführen können, um eine signifikante Steigerung der Geschwindigkeit und eine bessere Sichtbarkeit der mobilen Google-Suchergebnisse für Ihre Website in der mobilen Umgebung zu erzielen.

Nachdem Sie das Potenzial von AMP erkannt haben, nehme ich an, dass Sie möglicherweise begonnen haben oder planen, Änderungen an Ihren Websites vorzunehmen, um AMP zu entsprechen. Befolgen Sie sorgfältig die Richtlinien in den Dokumenten und stellen Sie Ihr CSS so zusammen, dass die AMP-Seiten an Ihren visuellen Appetit angepasst werden.

Jetzt gibt es noch ein letztes zu tun: diese Seiten zu validieren.

AMP-Validierer

Es gibt verschiedene Möglichkeiten, Ihre AMP-Seiten zu validieren:

  1. Fügen Sie den Pfad #development=1 am Ende der AMP-Seiten-URL hinzu. Der Bericht wird auf der Registerkarte Konsole unter DevTools projiziert.
  2. Alternativ können Sie den Online-AMP-Validator verwenden.
  3. Sie können auch die Chrome AMP-Erweiterung verwenden.

Diese Werkzeuge erzeugen einen Bericht, der Fehler oder Warnungen innerhalb der Seiten auflistet. Auf dieser Grundlage können Sie auswählen, was repariert werden soll.

Die AMP-Validierung regelt in erster Linie die Verwendung von HTML-Elementen, den s und den Stildeklarationen . Stellen Sie sicher, dass diese Dinge auf der Seite alle AMP-konform sind und dass nichts, was die AMP-Richtlinien verletzt, dort verbleibt. Andernfalls wird Ihre AMP-Seite nicht angezeigt.

Datenstruktur

AMP benötigt auch die Schema-Datenstruktur. Diese Daten sind im head Tag der Seite im JSON-Format angelegt. Es enthält kontextuelle Informationen über die Seite einschließlich des Titels, des Verlagslogos und -namens, des Veröffentlichungs- und Änderungsdatums usw.

Je nach dem Zweck der Seite können die darin enthaltenen Daten variieren: Artikel, Rezensionen, Rezepte, Videos usw. Einzelheiten zum Datentyp finden Sie in der Google-Datentypen-Dokumentation.

Es sind einige Daten erforderlich, die Fehler erzeugen, wenn sie nicht geliefert werden; Einige andere Datentypen sind optional und erzeugen nur Warnungen. Diese Art von Fehlern erscheint jedoch nicht in den oben erwähnten AMP-Validatoren.

Stattdessen werden sie im Google Structured Data Testing Tool sowie in Ihrem Google Webmaster-Konto angezeigt.

AMP-Konsumenten oder ein Kunde, der AMP unterstützt, wie z. B. Google Search und Twitter Moments, können diese Daten verwenden, um AMP-Inhalte auf der Ergebnisseite anzuzeigen.

Abgesehen von den AMP-Richtlinien mit ihren eigenen benutzerdefinierten HTML-Elementen müssen die erforderlichen Schemadaten ebenfalls vorhanden sein.

Übersehene Fehler

Die meisten Fehler sind in den Dokumenten explizit aufgeführt und können leicht auf einen Blick erfasst werden. Einige Fehler sind jedoch mit Variablen kontextualisiert, die wir möglicherweise nicht bemerken, wie zum Beispiel der "Ungültige Attributwert", der besagt "The attribute '%1' in tag '%2' is set to the invalid value '%3'." .

Dieser Fehlerbericht erwähnt nicht oder listet genau auf, welcher Wert ungültig ist. Aber was ich weiß ist, dass wir die width und die height nicht einstellen können Element zu 100% oder auto . Diese Attributwerte müssen genau der Größe des Bildes entsprechen, um das Bildverhältnis beizubehalten.

Dies ist nur ein Beispiel. Es gibt eine Reihe benutzerdefinierter Elemente - amp-img, amp-iframe und amp-ads - mit eigenen Validierungsregeln für die Verwendung eines Attributs und dessen Wert.

Dies könnte die Validierung von AMP Page zu einer entmutigenden Aufgabe machen, insbesondere wenn wir Hunderte oder (vielleicht) Tausende von Legacy-Inhalten berücksichtigen, die vor Jahren veröffentlicht wurden.

Letzter Gedanke

AMP befindet sich noch in einem frühen Stadium. Es ist in einer sehr aktiven Entwicklung mit gemeinsamen Bemühungen von Google und der Web-Entwickler-Community. Aber AMP wird sich sicherlich weiterentwickeln . Ähnlich wie in HTML5 gibt es möglicherweise Elemente, Attribute und einige Praktiken, die in der Zukunft ablehnen. Stellen Sie daher sicher, dass Ihre AMP-Seiten basierend auf den letzten Änderungen der Richtlinien von Zeit zu Zeit validiert werden.

Cloud Storage Face-off: iCloud vs Google Drive vs OneDrive vs Dropbox

Cloud Storage Face-off: iCloud vs Google Drive vs OneDrive vs Dropbox

Cloud-Speicherdienste sind in letzter Zeit ziemlich praktisch geworden. Die Möglichkeit, Ihre Dateien in der Cloud zu speichern und sie überall und jederzeit abzurufen, bietet Benutzern eine Flexibilität, die vor Jahren als unmöglich galt.Für diejenigen, die sich nicht ganz sicher sind, welcher Cloud-Speicher für sie geeignet ist, werde ich die kostenlosen Angebote der großen vier Cloud-Speicherdienste aufschlüsseln:Google Drive,Microsoft OneDrive,Dropbox und,Apple iCloud-Laufwerk .Ohne we

(Tech- und Design-Tipps)

Wie man Geschichten erzählt, die andere teilen möchten

Wie man Geschichten erzählt, die andere teilen möchten

Storytelling ist ein Schlüsselfaktor für erfolgreiches Design und die Erstellung von Inhalten im Allgemeinen. Ohne eine Geschichte zu erzählen, gibt es keine Möglichkeit, Leute für den Inhalt zu begeistern, den Sie teilen müssen. Viele Menschen verlieren jedoch das Interesse an einer Geschichte aus einer Vielzahl von Gründen, die wir in der heutigen Post behandeln werden.Wo ver

(Tech- und Design-Tipps)