Startpagina » mobiel » 10 Belangrijke AMP-componenten (Accelerated Mobile Pages) die u moet kennen
10 Belangrijke AMP-componenten (Accelerated Mobile Pages) die u moet kennen
Versnelde mobiele pagina's of AMP is het initiatief van Google om maak het mobiele web sneller. Om dit doel te bereiken, beperken de AMP-standaarden hoe u HTML, CSS en JavaScript kunt gebruiken, en beheert het laden van externe bronnen, zoals afbeeldingen, video's en advertenties via zijn eigen runtime.
Dit brengt met zich mee dat jij kan niet gebruiken ofwel alle aangepaste (door de auteur geschreven of derden) JavaScript of resource-gerelateerde HTML-elementen zoals afbeeldingen en video's in uw AMP-documenten.
Om de kloof tussen de behoeften van gebruikers en de beste prestatiemethoden te overbruggen, heeft AMP dat wel specifieke componenten jij kan gebruik in plaats van deze uitgesloten elementen.
AMP-componenten zijn specifieke HTML-tags. Ze gedragen zich vergelijkbaar met reguliere HTML-tags: ze hebben openings- en sluitingslabels, kenmerken en de meeste kunnen worden gestileerd met CSS. Ze kunnen gemakkelijk worden herkend, zoals zij begin altijd met de amp- voorvoegsel.
Er zijn twee typen AMP-componenten: ingebouwd en verlengd Components.
Ingebouwde AMP-componenten
Built-ins zijn ingebouwd in de JavaScript-runtime van AMP, dus u hoeft ze niet afzonderlijk op te nemen.
1. amp-img
vervangt de label in AMP HTML-documenten. U moet het toevoegen src en alt attributen net zoals wanneer je met de reguliere werkt element.
heeft ook twee andere vereiste attributen: dat moet je altijd doen specificeer de breedte en hoogte attributen in gehele pixelwaarden, omdat hiermee de AMP-runtime kan worden gebruikt bereken de lay-out van tevoren.
Als je wilt maak de afbeelding responsief, voeg het toe layout = "reageert" attribuut. De lay-out attribuut bepaalt de lay-out in AMP-documenten en deze kan worden toegevoegd aan AMP-componenten (lees hier meer over op het AMP-lay-outsysteem).
U kunt ook de srcset attribuut op de tag aan geef verschillende afbeeldingen op voor verschillende viewports en pixeldichtheden. Het werkt op dezelfde manier als met niet-AMP-afbeeldingen.
2. amp-video
kan gebruikt worden voor sluit HTML-video's direct in in AMP HTML-documenten. Het vervangt de in AMP-bestanden. De label lui laadt video's om de prestaties te optimaliseren.
De bron van de video moet worden geserveerd via het HTTPS-protocol. U moet het. Toevoegen breedte en hoogte attributen, net als bij de bestanddeel.
De tag heeft veel optionele kenmerken, zoals automatisch afspelen en poster die u kunt specificeren om te verfijnen hoe uw HTML5-video wordt weergegeven.
ondersteunt mp4, webm, ogg en alle andere indelingen die worden ondersteund door de HTML5
Als je wilt, kun je ook voeg fallback video's toe voor gebruikers met browsers die geen HTML5-video's ondersteunen, met behulp van de terugvallen attribuut en de HTML-tag.
Uw browser ondersteunt geen HTML5-video's.
3. amp-ad en amp-embed
biedt u iframe sandboxes waarin je kunt toon uw advertenties. U moet uw advertenties weergeven via het HTTPS-protocol.
U kunt zelf geen scripts uitvoeren die door uw advertentienetwerk zijn geleverd. In plaats daarvan voert de AMP-runtime het JavaScript van het opgegeven netwerk uit in de sandbox. U hoeft alleen maar te specificeren welk netwerk u gebruikt, en voeg uw gegevens toe.
De component vereist dat u dit doet voeg de afmetingen van de advertentie toe de ... gebruiken breedte en hoogte attributen.
U kunt het advertentienetwerk definiëren dat u gebruikt met de type attribuut. Bekijk de lijst met ondersteunde advertentienetwerken.
Elk advertentienetwerk heeft er een gegevens-* attributen die je ook moet toevoegen. Klik op uw advertentienetwerk in de bovenstaande lijst om te zien welke u nodig heeft.
is het alias van , de documentatie zegt er niet veel over anders kan het worden gebruikt in plaats van wanneer het semantisch nauwkeuriger. Aangezien Google belooft advertentie-gerelateerde AMP-componenten in de loop van de tijd te ontwikkelen, kan dit in de toekomst veranderen.
4. amp-pixel
Met , jij kan voeg een trackingpixel toe naar uw AMP HTML-documenten naar tel page views. Het heeft slechts één attribuut, de vereiste src attribuut, waarin je moet geef de URL op die bij de trackingpixel hoort.
De tag maakt het mogelijk standaard URL-substituties, wat betekent dat je kunt genereer een willekeurige URL-waarde om elke vertoning bij te houden.
Zie de AMP URL-vervangingshandleiding als u dit onderdeel wilt gebruiken. Merk op dat je de stijl niet kunt stylen bestanddeel.
Uitgebreide AMP-componenten
Als uitgebreide AMP-componenten zijn geen onderdeel van de JavaScript-runtime, u altijd nodig om ze te importeren in de sectie van de AMP-pagina waarop u ze wilt gebruiken.
Opmerking: componentversies kunnen in de toekomst veranderen, dus vergeet niet om dit te doen controleer de huidige versie in de documentatie.
5. amp-audio
vervangt de HTML5-tag, en maakt het mogelijk om sluit HTML5 audiobestanden direct in in AMP-pagina's.
Om het te gebruiken, moet u het src, breedte en hoogte kenmerken en u kunt ook drie optionele kenmerken toevoegen: automatisch afspelen, lus en gedempt.
Het kan ook een goed idee zijn om dit te doen voeg fallback audiobestanden toe voor gebruikers met browsers die HTML5 niet ondersteunen. U kunt dit doen met behulp van de terugvallen attribuut en de tag, net als bij het bovengenoemde bestanddeel.
De AMP-component ondersteunt dezelfde audioformaten als de HTML5-tag.
Uw browser ondersteunt geen HTML5-audio.
Gebruiken , neem het volgende script op in de gedeelte van uw AMP-document:
6. amp-iframe
geeft een iframe weer in AMP-documenten. is gemaakt om veiliger te zijn dan gewone HTML-iframes. Daarom zijn ze dat ook sandboxed standaard.
Er zijn enkele regels gerelateerd aan je moet volgen om te valideren.
U moet het breedte, hoogte, en zandbak attributen. De zandbak attribuut is standaard leeg, maar je kunt er verschillende waarden aan geven Pas het gedrag van het iframe aan, bijvoorbeeldsandbox = "allow-scripts"laat het iframe JavaScript uitvoeren. U kunt ook attributen van standaard iframes gebruiken.
Terwijl de afmetingen van zijn vooraf gedefinieerd door de breedte en hoogte attributen, er is een manier om het in runtime te wijzigen. Om de te gebruiken component, voeg het volgende script toe aan uw AMP-pagina:
7. amp-accordeon
accordeons vormen een veel voorkomend UI-patroon in mobiel ontwerp, omdat ze ruimte besparen, maar toch de inhoud op een toegankelijke manier weergeven. maakt het mogelijk om voeg snel accordeons toe naar AMP-pagina's.
Secties van de accordeon moeten de HTML5-tag en moet de directe kinderen van de label.
Elke sectie moet twee directe kinderen hebben:
een voor de kop
één voor de inhoud (de inhoud kan ook een afbeelding zijn)
Gebruik de uitgebreid attribuut op elke sectie die u standaard wilt uitbreiden.
Sectie 1
Inhoud van sectie 1
Sectie 2
Inhoud van sectie 2
Sectie 3
Afbeelding voor sectie 3
Om de te gebruiken component in uw AMP-document, neemt u het volgende script op:
8. amp-lichttafel
voegt een lightbox toe naar verschillende elementen (in de meeste gevallen afbeeldingen) op Accelerated Mobile Pages.
Wanneer de gebruiker een interactie aangaat met het element, bijvoorbeeld tikken erop, de lightbox breidt uit en vult de volledige viewport. Je moet voeg een knop of een ander besturingselement toe waarop de gebruiker kan tikken.
Let daar op amp-lichttafel kan alleen worden gebruikt met de geen scherm lay-out.
Om de te gebruiken component, moet u het importeren met de volgende code:
9. amp-carrousel
Carrousels worden vaak gebruikt in mobiel ontwerp, zoals ze dat toelaten tal van soortgelijke elementen weergeven (meestal afbeeldingen) langs de horizontale as. AMP-resultaten worden ook gepresenteerd in een carrouselindeling in Google Zoeken.
De component stelt u in staat om carrousels toe te voegen aan uw site. De directe kinderen van de component zal worden beschouwd als de items van de carrousel. U moet de afmetingen van de carrousel definiëren met de breedte en hoogte attributen.
U kunt de optionele gebruiken type attribuut om te bepalen hoe de carrousel items te tonen. Als het type attribuut neemt de "carrousel" waarde, de items worden getoond als een continue strip (dit is de standaard), terwijl de "Slides" waarde geeft de items weer in dia's formaat.
De tag heeft ook andere optionele kenmerken die u kunnen helpen bij het afstemmen van het resultaat.
In het onderstaande voorbeeld merk je dat zowel de carrousel als al zijn items gebruik hetzelfde breedte en hoogte waarden.
De component vereist de toevoeging van het volgende script:
10. amp-analytics
kan gebruikt worden voor verzamel analysegegevens op AMP-pagina's. Momenteel, ondersteunt vier soorten volggebeurtenissen, dit kan echter in de toekomst veranderen:
Paginaweergave
Anker klikken
timer
scrollen
Gebruiken , je moet voeg een JSON-configuratieobject toe in een
Voeg het volgende script toe aan de sectie van uw AMP HTML-pagina om het te importeren component:
Laatste woorden
In dit bericht hebben we alle ingebouwde AMP-componenten en enkele uitgebreide AMP-componenten bekeken. Omdat Accelerated Mobile Pages nog nieuw is, kunnen veel dingen in de toekomst veranderen, dus het is de moeite waard om de documentatie in de gaten te houden op Github of op de officiële AMP-site.
Omdat deze AMP-componenten open source zijn, kunt u zelfs bijdragen aan de ontwikkeling maak je eigen component. Als u wilt zien hoe een complete AMP-pagina eruitziet met verschillende componenten, kunt u deze paar voorbeelden op Github bekijken.
