10 wichtige Komponenten für beschleunigte mobile Seiten (AMP), die Sie kennen sollten
Accelerated Mobile Pages oder AMP ist die Initiative von Google , das mobile Internet schneller zu machen . Um dieses Ziel zu erreichen, beschränken die AMP-Standards die Verwendung von HTML, CSS und JavaScript und verwalten das Laden externer Ressourcen wie Bilder, Videos und Anzeigen über eine eigene Laufzeitumgebung .
Dies bedeutet, dass Sie in Ihren AMP-Dokumenten weder benutzerdefiniertes JavaScript (noch von Drittanbietern) noch andere ressourcenbezogene HTML-Elemente wie Bilder und Videos verwenden können.
Um die Lücke zwischen den Bedürfnissen der Benutzer und den besten Leistungspraktiken zu schließen, verfügt AMP über spezifische Komponenten, die Sie anstelle dieser ausgeschlossenen Elemente verwenden können .
AMP-Komponenten sind spezifische HTML-Tags . Sie verhalten sich ähnlich wie normale HTML-Tags: Sie haben öffnende und schließende Tags, Attribute und die meisten können mit CSS formatiert werden. Sie können leicht erkannt werden, da sie immer mit dem amp- Präfix beginnen .
Es gibt zwei Arten von AMP-Komponenten: integrierte und erweiterte Komponenten.
Eingebaute AMP-Komponenten
Built-Ins sind in die JavaScript-Laufzeit von AMP integriert, sodass Sie sie nicht separat hinzufügen müssen.
1. amp-img
ersetzt dieTag in AMP HTML-Dokumenten. Sie müssen die src und alt genauso hinzufügen, wie wenn Sie mit dem regulären arbeiten Element.
hat auch zwei andere erforderliche Attribute: Sie müssen immer die Attribute width und height in ganzzahligen Pixelwerten angeben, da dies der AMP-Laufzeitumgebung ermöglicht , das Layout im Voraus zu berechnen .
Wenn Sie das Bild reagieren möchten, fügen Sie das Attribut layout="responsive" . Das layoutsteuert das Layout in AMP-Dokumenten und es kann zu beliebigen AMP-Komponenten hinzugefügt werden (erfahren Sie mehr dazu auf dem AMP-Layoutsystem).
Sie können auch das srcset Attribut in der Tag, um verschiedene Bilder für unterschiedliche Ansichtsfenster und Pixeldichten zu spezifizieren . Es funktioniert genauso wie bei Nicht-AMP-Bildern.
2. amp-video
kann verwendet werden, um HTML-Videos direkt in AMP-HTML-Dokumente einzubetten . Es ersetzt die
Die Quelle des Videos muss über das HTTPS-Protokoll bedient werden . Sie müssen die Attribute width und height hinzufügen, genau wie beim Komponente.
Das Das Tag verfügt über viele optionale Attribute, z. B. autoplay und poster denen Sie festlegen können, wie Ihr HTML5-Video angezeigt wird.
unterstützt mp4, webm, ogg und alle anderen Formate, die von HTML5 unterstützt werden
Wenn Sie möchten, können Sie auch Fallback-Videos für Benutzer mit Browsern, die keine HTML5-Videos unterstützen, mithilfe des fallback Attributs und des
Ihr Browser unterstützt keine HTML5-Videos.
3. amp-ad und amp-embed
bietet Ihnen Iframe-Sandboxen, in denen Sie Ihre Anzeigen anzeigen können . Sie müssen Ihre Anzeigen über das HTTPS-Protokoll bereitstellen .
Sie können Skripts, die von Ihrem Werbenetzwerk bereitgestellt werden, nicht selbst ausführen. Stattdessen führt die AMP-Laufzeitumgebung das JavaScript des angegebenen Netzwerks in der Sandbox aus. Sie müssen nur angeben, welches Netzwerk Sie verwenden und Ihre Daten hinzufügen.
Das Für die Komponente müssen Sie die Dimensionen der Anzeige mithilfe der Attribute width und heighthinzufügen .
Sie können das von Ihnen verwendete Werbenetzwerk mit dem Attribut type . Sehen Sie sich die Liste der unterstützten Werbenetzwerke an.
Jedes Werbenetzwerk hat seine eigenen data-* -Attribute, die Sie ebenfalls hinzufügen müssen. Um zu sehen, welche Sie benötigen, klicken Sie auf Ihr Werbenetzwerk in der obigen Liste.
ist der Alias von , die Dokumentation sagt nicht viel darüber hinaus, als es verwendet werden kann wenn es semantisch genauer ist . Da Google verspricht, im Laufe der Zeit Anzeigen-bezogene AMP-Komponenten zu entwickeln, könnte sich dies in Zukunft ändern.
4. amp-pixel
Mit Sie können Ihren AMP-HTML-Dokumenten ein Tracking-Pixel hinzufügen, um Seitenaufrufe zu zählen . Es hat nur ein Attribut, das erforderliche src Attribut, in dem Sie die zum Tracking-Pixel gehörende URL angeben müssen.
Das Mit dem Tag können Standard-URLs ersetzt werden. Dies bedeutet, dass Sie einen zufälligen URL-Wert generieren können, um jede Impression zu verfolgen.
Wenn Sie diese Komponente verwenden möchten, finden Sie Informationen in der URL-Ersetzungsrichtlinie von AMP. Beachten Sie, dass Sie das nicht stylen können Komponente.
Erweiterte AMP-Komponenten
Da erweiterte AMP-Komponenten nicht Teil der JavaScript-Laufzeit sind, müssen Sie sie immer indie JavaScript-Laufzeitumgebungimportieren
Abschnitt der AMP-Seite, auf der Sie sie verwenden möchten.
Hinweis: Komponentenversionen können sich in Zukunft ändern. Vergessen Sie daher nicht, die aktuelle Version in der Dokumentation zu überprüfen .
5. amp-audio
ersetzt die
Um es zu verwenden, müssen Sie die src, width und height angeben, und Sie können auch drei optionale Attribute hinzufügen: autoplay, loop und muted .
Es kann auch eine gute Idee sein, Fallback-Audiodateien für Benutzer mit Browsern hinzuzufügen, die HTML5 nicht unterstützen. Sie können dies tun, indem Sie das Attribut " fallback und " tag, genau wie bei den oben genannten Komponente.
Das AMP-Komponente unterstützt die gleichen Audioformate wie die
Ihr Browser unterstützt kein HTML5-Audio.
Benutzen , schließe das folgende Skript in die Abschnitt Ihres AMP-Dokuments:
6. amp-iframe
zeigt einen Iframe in AMP-Dokumenten an. wurde gemacht, um sicherer zu sein als normale HTML-Iframes. Daher sind sie standardmäßig sandboxed .
Es gibt einige Regeln in Bezug auf Sie müssen folgen, um die Validierung zu bestehen.
Sie müssen die Attribute width, height und sandbox angeben. Das sandbox Attribut ist standardmäßig leer, aber Sie können ihm verschiedene Werte geben, um das Verhalten des Iframes zu ändern, zum Beispiel sandbox="allow-scripts" läßt den iframe JavaScript ausführen. Sie können auch Attribute von Standard-Iframes verwenden.
Während die Dimensionen von Vordefiniert durch die Attribute width und height, gibt es eine Möglichkeit, die Größe in Runtime zu ändern. Um das zu verwenden Fügen Sie Ihrer AMP-Seite das folgende Skript hinzu:
7. amp-accordion
Akkordeons stellen ein häufiges UI-Muster im mobilen Design dar, da sie Speicherplatz sparen, den Inhalt aber dennoch auf eine zugängliche Weise anzeigen. ermöglicht das schnelle Hinzufügen von Akkordeons zu AMP-Seiten.
Teile des Akkordeons müssen das verwenden HTML5-Tag, und müssen die direkten Kinder der sein Etikett.
Jeder Abschnitt muss zwei direkte Kinder haben :
eine für die Überschrift
eine für den Inhalt (der Inhalt kann auch ein Bild sein)
Verwenden Sie das expanded 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
Um das zu verwenden Fügen Sie in Ihrem AMP-Dokument das folgende Skript hinzu:
8. amp-lightbox
Fügt den verschiedenen Elementen (in den meisten Fällen Bildern) auf Accelerated Mobile Pages einen Leuchtkasten hinzu .
Wenn der Benutzer mit dem Element interagiert, beispielsweise auf es tippt, wird der Leuchtkasten erweitert und füllt das gesamte Ansichtsfenster . Sie müssen eine Schaltfläche oder ein anderes Steuerelement hinzufügen, auf das der Benutzer tippen kann.
Beachten Sie, dass amp-lightbox nur mit dem nodisplay Layout verwendet werden kann.
Um das zu verwenden Komponente müssen Sie sie mit dem folgenden Code importieren:
9. amp-carousel
Karussells werden häufig im mobilen Design verwendet, da sie zahlreiche ähnliche Elemente (am häufigsten Bilder) entlang der horizontalen Achse anzeigen können . AMP-Ergebnisse werden auch in einem Karussellformat in der Google-Suche angezeigt.
Das Komponente ermöglicht es Ihnen, Karussells auf Ihrer Website hinzuzufügen. Die direkten Kinder der Komponente wird als die Elemente des Karussells betrachtet . Sie müssen die Abmessungen des Karussells mit den Attributen width und height .
Sie können das optionale type Attribut verwenden, um festzulegen, wie die Karussellobjekte angezeigt werden . Wenn das "carousel" Wert "carousel" annimmt, werden die Elemente als fortlaufender Streifen angezeigt (dies ist die Standardeinstellung), während der Wert für "slides" die Elemente im Folienformat anzeigt.
Das Das Tag hat auch andere optionale Attribute, die Ihnen helfen können, das Ergebnis zu optimieren.
Beachten Sie im folgenden Beispiel, dass sowohl das Karussell als auch alle seine Elemente die gleichen Werte für width und height haben .
Das Komponente erfordert das Hinzufügen des folgenden Skripts:
10. amp-analytics
kann verwendet werden, um Analysedaten auf AMP-Seiten zu sammeln . Zur Zeit, unterstützt vier Arten von Tracking-Ereignissen, dies kann sich jedoch in Zukunft ändern:
Seitenansicht
Ankerklicks
Timer
Scrollen
Benutzen , müssen Sie ein JSON-Konfigurationsobjekt in einem hinzufügen
Fügen Sie dem Skript das folgende 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 noch neu ist, können sich in Zukunft viele Dinge ändern. Daher lohnt es sich, die Dokumentation entweder auf Github oder auf der offiziellen AMP-Seite zu lesen.
Da diese AMP-Komponenten Open Source sind, können Sie auch zur Entwicklung beitragen und sogar Ihre eigene Komponente erstellen . Wenn Sie sehen möchten, wie eine vollständige AMP-Seite mit verschiedenen Komponenten aussieht, können Sie sich diese wenigen Beispiele auf Github ansehen.
Im vorherigen Beitrag haben wir Ihnen gezeigt, wie Sie Jekyll installieren und Ihren ersten Post damit veröffentlichen. Wenn Sie es verfolgt haben, können Sie sehen, dass das Erstellen eines Posts ein Kinderspiel ist. Wir erstellen einfach eine neue Markdown-Datei, speichern sie im / _posts- Ordner und sie wird sofort im Blog angezeigt .D
Selfies und Essens-Pornos mögen Instagram dominieren, aber das ist nicht alles, worauf sich die Photo-Sharing-App beschränkt. Einige Unternehmen nutzen die App als Website, um ihre Produkte zu hosten. Andere Unternehmen denken über den Tellerrand hinaus, Instagram als Erweiterung des Marktes zu nutzen und ihre Kunden zu erreichen.In