Startseite » Handy, Mobiltelefon » 10 Wichtige Komponenten für beschleunigte mobile Seiten (AMP), die Sie kennen sollten
10 Wichtige Komponenten für beschleunigte mobile Seiten (AMP), die Sie kennen sollten
Beschleunigte mobile Seiten oder AMPERE ist Googles Initiative dazu Machen Sie das mobile Internet schneller. Um dieses Ziel zu erreichen, schränken die AMP-Standards die Verwendung von HTML, CSS und JavaScript ein verwaltet das Laden externer Ressourcen, wie Bilder, Videos und Anzeigen über seine eigene Laufzeit.
Das bedeutet, dass Sie Kann ich nicht benutzen Entweder benutzerdefiniertes (vom Autor oder von Drittanbietern erstelltes) JavaScript oder ressourcenbezogene HTML-Elemente wie Bilder und Videos in Ihren AMP-Dokumenten.
Um die Lücke zwischen den Bedürfnissen der Benutzer und den besten Leistungspraktiken zu schließen, hat AMP dies spezifische Komponenten Sie können Verwendung anstelle dieser ausgeschlossenen Elemente.
AMP-Komponenten sind bestimmte HTML-Tags. Sie verhalten sich ähnlich wie normale HTML-Tags: Sie haben öffnende und schließende Tags und Attribute. Die meisten davon können mit CSS gestaltet werden. Sie können leicht als sie erkannt werden fange immer mit dem an Ampere- Präfix.
Es gibt zwei Arten von AMP-Komponenten: eingebaut und verlängert Komponenten.
Eingebaute AMP-Komponenten
Einbauten sind in die JavaScript-Laufzeitumgebung von AMP integriert, sodass Sie sie nicht separat einbinden müssen.
1. Amp-Img
ersetzt das Etikett in AMP-HTML-Dokumenten. Sie müssen das hinzufügen src und alt Attribute wie bei der Arbeit mit dem regulären Element.
hat auch zwei andere erforderliche Attribute: Sie müssen immer Präzisiere das Breite und Höhe Attribute in ganzzahligen Pixelwerten, da dies die AMP-Laufzeit ermöglicht Berechnen Sie das Layout im Voraus.
Wenn du möchtest mach das Bild ansprechbar, Ergänzen Sie die layout = "responsive" Attribut. Das Layout Attribut steuert das Layout in AMP-Dokumenten, und es kann zu beliebigen AMP-Komponenten hinzugefügt werden (erfahren Sie mehr über das AMP-Layoutsystem).
Sie können auch die srcset Attribut auf die Tag zu verschiedene Bilder angeben für verschiedene Ansichtsfenster und Pixeldichten. Dies funktioniert genauso wie bei nicht AMP-Bildern.
2. Amp-Video
kann benutzt werden um HTML-Videos direkt einbetten in AMP-HTML-Dokumenten. Es ersetzt das in AMP-Dateien. Das Etikett faul lädt videos um die Leistung zu optimieren.
Die Quelle des Videos muss über das HTTPS-Protokoll bereitgestellt werden. Sie müssen das hinzufügen Breite und Höhe Attribute wie bei der Komponente.
Das Das Tag verfügt über viele optionale Attribute, z automatisches Abspielen und Poster Hier können Sie festlegen, wie Ihr HTML5-Video genau angezeigt werden soll.
unterstützt mp4, webm, ogg und alle anderen vom HTML5 unterstützten Formate
Wenn Sie möchten, können Sie auch Fallback-Videos hinzufügen Für Benutzer mit Browsern, die keine HTML5 - Videos unterstützen, wird die Zurückfallen Attribut und die HTML-Tag.
Ihr Browser unterstützt keine HTML5-Videos.
3. Amp-Ad und Amp-Embed
versorgt dich mit Iframe-Sandkästen in dem du kannst schalten Sie Ihre Anzeigen ein. Sie müssen Ihre Anzeigen schalten über das HTTPS-Protokoll.
Sie können keine von Ihrem Werbenetzwerk bereitgestellten Skripts selbst ausführen. Stattdessen führt die AMP-Laufzeit das JavaScript des angegebenen Netzwerks in der Sandbox aus. Sie Sie müssen nur angeben, welches Netzwerk Sie verwenden, und fügen Sie Ihre Daten hinzu.
Das Komponente erfordert Sie Fügen Sie die Abmessungen der Anzeige hinzu Verwendung der Breite und Höhe Attribute.
Sie können das Anzeigennetzwerk definieren, das Sie mit verwenden Art Attribut. Liste der unterstützten Werbenetzwerke anzeigen.
Jedes Werbenetzwerk hat sein eigenes Daten-* Attribute, die Sie auch hinzufügen müssen. Klicken Sie in der obigen Liste in Ihrem Werbenetzwerk auf, um zu sehen, welches Sie benötigen.
ist der Alias von , Die Dokumentation sagt nicht viel darüber aus, als dass sie anstelle von verwendet werden kann wenn es semantisch genauer. Wie Google verspricht, die AMP-Komponenten für Anzeigen im Laufe der Zeit weiterzuentwickeln, kann sich dies in der Zukunft ändern.
4. Amp-Pixel
Mit , Sie können Fügen Sie ein Tracking-Pixel hinzu an Ihre AMP HTML-Dokumente an Seitenaufrufe zählen. Es hat nur ein Attribut, das erforderliche src Attribut, in dem Sie müssen Geben Sie die URL an, die zum Tracking-Pixel gehört.
Das tag erlaubt Standard-URL-Ersetzungen, Was bedeutet, dass Sie können Erzeugen Sie einen zufälligen URL-Wert um jeden Eindruck zu verfolgen.
Informationen zur Verwendung dieser Komponente finden Sie im Handbuch zum Ersetzen von URLs von AMP. Beachten Sie, dass Sie das Format nicht formatieren können Komponente.
Erweiterte AMP-Komponenten
Als erweiterte AMP-Komponenten sind nicht Teil der JavaScript-Laufzeit, Sie müssen sie immer importieren in dem Abschnitt der AMP-Seite, auf der Sie sie verwenden möchten.
Hinweis: Komponentenversionen können sich in der Zukunft ändern. Vergessen Sie dies nicht Überprüfen Sie die aktuelle Version in der Dokumentation.
5. Amp-Audio
ersetzt das HTML5-Tag und macht es möglich HTML5-Audiodateien direkt einbetten auf AMP-Seiten.
Um es zu verwenden, müssen Sie das angeben src, Breite und Höhe Attribute, und Sie können auch drei optionale Attribute hinzufügen: automatisches Abspielen, Schleife und stummgeschaltet.
Es kann auch eine gute Idee sein Fallback-Audiodateien hinzufügen für Benutzer mit Browsern, die kein HTML5 unterstützen. Sie können dies tun, indem Sie die Zurückfallen Attribut und die tag, genau wie bei den oben genannten Komponente.
Das Die AMP-Komponente unterstützt dieselben Audioformate wie die HTML5-Tag.
Ihr Browser unterstützt kein HTML5-Audio.
Benutzen , Fügen Sie das folgende Skript in das ein Abschnitt Ihres AMP-Dokuments:
6. Amp-iframe
zeigt einen iframe an in AMP-Dokumenten. wurde sicherer als reguläre HTML-Iframes. Deshalb sind sie standardmäßig in sandboxed.
Es gibt einige Regeln im Zusammenhang mit Sie müssen folgen, um die Bestätigung zu bestehen.
Sie müssen das angeben Breite, Höhe, und Sandkasten Attribute. Das Sandkasten Das Attribut ist standardmäßig leer, aber Sie können ihm andere Werte zuweisen Ändern Sie das Verhalten des Iframes, zum Beispielsandbox = "allow-scripts"lässt den iframe JavaScript ausführen. Sie können auch Attribute von Standard-iframes verwenden.
Während die Abmessungen von sind durch die vordefiniert Breite und Höhe Attribute gibt es eine Möglichkeit, die Größe in Runtime zu ändern. Um die Fügen Sie Ihrer AMP-Seite das folgende Skript hinzu:
7. Amp-Akkordeon
Akkordeons stellen ein häufiges UI-Muster im mobilen Design dar, da sie Platz sparen und dennoch den Inhalt auf eine zugängliche Weise anzeigen. macht es möglich schnell Akkordeons hinzufügen zu AMP-Seiten.
Teile des Akkordeons müssen das verwenden HTML5-Tag und muss das sein direkte Kinder des Etikett.
Jede Sektion muss zwei direkte Kinder haben:
eine für die Überschrift
eine für den Inhalt (der Inhalt kann auch ein Bild sein)
Verwenden Sie die erweitert Attribut für jeden Abschnitt, den Sie standardmäßig erweitern möchten.
Abschnitt 1
Inhalt von Abschnitt 1
Sektion 2
Inhalt von Abschnitt 2
Sektion 3
Bild für Abschnitt 3
Um die Komponente in Ihrem AMP-Dokument enthalten, schließen Sie das folgende Skript ein:
8. Amp-Leuchtkasten
fügt einen Leuchtkasten hinzu auf verschiedene Elemente (in den meisten Fällen Bilder) auf Accelerated Mobile Pages.
Wenn der Benutzer mit dem Element interagiert, tippt es beispielsweise die Lightbox an erweitert und füllt das gesamte Ansichtsfenster. Du musst Fügen Sie eine Schaltfläche oder ein anderes Steuerelement hinzu auf die der Benutzer zugreifen kann.
Beachten Sie, dass Amp-Leuchtkasten kann nur mit der verwendet werden kein Bildschirm Layout.
Um die Komponente, müssen Sie es mit dem folgenden Code importieren:
9. Amp-Karussell
Karussells werden häufig im mobilen Design verwendet, da sie dies zulassen Anzeige zahlreicher ähnlicher Elemente (am häufigsten Bilder) entlang der horizontalen Achse. AMP-Ergebnisse werden in der Google-Suche auch in einem Karussellformat dargestellt.
Das Mit dieser Komponente können Sie Ihrer Site Karussells hinzufügen. Das direkte Kinder des Komponente wird als das betrachtet Artikel des Karussells. Sie müssen die Abmessungen des Karussells mit angeben Breite und Höhe Attribute.
Sie können das optionale verwenden Art zu bestimmendes Attribut So zeigen Sie die Karussellartikel an. Wenn die Art Attribut nimmt die "Karussell" Wert werden die Elemente angezeigt als durchgehender Streifen (Dies ist die Standardeinstellung), während die "Folien" Wert zeigt die Elemente an im Folienformat.
Das tag verfügt auch über weitere optionale Attribute, mit denen Sie das Ergebnis optimieren können.
Beachten Sie in dem folgenden Beispiel, dass sowohl das Karussell als auch alle seine Elemente vorhanden sind benutze das gleiche Breite und Höhe Werte.
Das Komponente erfordert das Hinzufügen des folgenden Skripts:
10. Amp-Analytics
kann benutzt werden um Analysedaten sammeln auf AMP-Seiten. Zur Zeit, unterstützt vier Arten von Nachverfolgungsereignissen, Dies kann sich jedoch in der Zukunft ändern:
Seitenansicht
Ankerklicks
Timer
Scrollen
Benutzen , du musst Fügen Sie ein JSON-Konfigurationsobjekt hinzu in einem
Fügen Sie dem folgenden Skript hinzu Abschnitt Ihrer AMP-HTML-Seite zum Importieren der Komponente:
Letzte Worte
In diesem Beitrag haben wir uns alle eingebauten AMP-Komponenten und einige der erweiterten Komponenten angesehen. Da Accelerated Mobile Pages immer noch neu ist, können sich viele Dinge in der Zukunft ändern. Es lohnt sich also, die Dokumentation entweder auf Github oder auf der offiziellen AMP-Site zu überwachen.
Da diese AMP-Komponenten Open Source sind, können Sie sogar zur Entwicklung beitragen Erstellen Sie Ihre eigene Komponente. Wenn Sie sehen möchten, wie eine vollständige AMP-Seite mit verschiedenen Komponenten aussieht, können Sie diese wenigen Beispiele auf Github überprüfen.
