10 Belangrijke AMP-componenten (Accelerated Mobile Pages) die u moet kennen

Versnelde mobiele pagina's of AMP is het initiatief van Google om het mobiele web sneller te maken . Om dit doel te bereiken, beperken de AMP-standaarden de manier waarop u HTML, CSS en JavaScript kunt gebruiken en beheert u het laden van externe bronnen, zoals afbeeldingen, video's en advertenties via de eigen runtime .

Dit houdt in dat u geen aangepaste JavaScript-code (door een auteur geschreven of derden) of resource-gerelateerde HTML-elementen zoals afbeeldingen en video's in uw AMP-documenten mag gebruiken.

Om de kloof te overbruggen tussen de behoeften van gebruikers en de beste prestatiemethoden, heeft AMP specifieke componenten die u kunt gebruiken in plaats van deze uitgesloten elementen .

AMP-componenten zijn specifieke HTML-tags . Ze gedragen zich vergelijkbaar met gewone HTML-tags: ze hebben openings- en sluitingslabels, kenmerken en de meeste kunnen worden gestileerd met CSS. Ze kunnen eenvoudig worden herkend, omdat ze altijd beginnen met de amp- prefix .

Er zijn twee typen AMP-componenten: ingebouwde en uitgebreide componenten.

Ingebouwde AMP-componenten

Ingebouwde modules zijn ingebouwd in de JavaScript-runtime van AMP, dus u hoeft ze niet afzonderlijk op te nemen.

1. amp-img

vervangt de tag in AMP HTML-documenten. U moet de src en alt attributen toevoegen, net als wanneer u met de reguliere methode werkt element.

heeft ook nog twee andere vereiste kenmerken: u moet altijd de kenmerken width en height opgeven in gehele pixelwaarden, omdat de AMP-runtime de lay-out van tevoren kan berekenen .

Als u de afbeelding responsief wilt maken, voegt u het kenmerk layout="responsive" toe. Het layout outkenmerk beheert de lay-out in AMP-documenten en kan worden toegevoegd aan AMP-componenten (lees hier meer over op het AMP-lay-outsysteem).

U kunt ook het kenmerk srcset op de tag om verschillende afbeeldingen voor verschillende viewports en pixeldichtheden op te geven. Het werkt op dezelfde manier als met niet-AMP-afbeeldingen.

2. amp-video

kan worden gebruikt om HTML-video's direct in te sluiten in AMP HTML-documenten. Het vervangt de

De bron van de video moet worden weergegeven via het HTTPS-protocol . U moet de kenmerken width en height, net als bij de component.

De tag heeft veel optionele attributen, zoals autoplay en poster die je kunt specificeren om te verfijnen hoe je HTML5-video wordt weergegeven.

ondersteunt mp4, webm, ogg en alle andere indelingen die worden ondersteund door de HTML5

Als je wilt, kun je ook fallback-video's toevoegen voor gebruikers met browsers die geen HTML5-video's ondersteunen, met behulp van het fallback attribuut en de HTML-tag.

Uw browser ondersteunt geen HTML5-video's.

3. amp-ad en amp-embed

biedt u iframe-sandboxen waarin u uw advertenties kunt weergeven . 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 op te geven welk netwerk u gebruikt en uw gegevens toe te voegen.

De component vereist dat u de afmetingen van de advertentie toevoegt met behulp van de kenmerken width en height .

U kunt het advertentienetwerk dat u gebruikt definiëren met het typekenmerk. Bekijk de lijst met ondersteunde advertentienetwerken.

Elk advertentienetwerk heeft zijn eigen data-* kenmerken die u ook moet toevoegen. Klik op uw advertentienetwerk in de bovenstaande lijst om te zien welke u nodig heeft.

is de alias van , de documentatie zegt er niet veel over anders dan dat het kan worden gebruikt in plaats van wanneer het semantisch nauwkeuriger is . 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 , kunt u een trackingpixel toevoegen aan uw AMP HTML-documenten om paginaweergaven te tellen . Het heeft slechts één attribuut, het vereiste src attribuut, waarin u de URL moet opgeven die bij de trackingpixel hoort .

De tag maakt standaard URL-substituties mogelijk, wat betekent dat u een willekeurige URL-waarde kunt genereren 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 component.

Uitgebreide AMP-componenten

Omdat uitgebreide AMP-componenten geen deel uitmaken van de JavaScript-runtime, moet u deze altijd importeren in de sectie van de AMP-pagina waarop u ze wilt gebruiken.

Opmerking: componentversies kunnen in de toekomst veranderen, dus vergeet niet om de huidige versie in de documentatie te controleren.

5. amp-audio

vervangt de

Om het te gebruiken, moet je de attributen src, width en height specificeren, en je kunt ook drie optionele attributen toevoegen: autoplay, loop en muted .

Het kan ook een goed idee zijn om fallback-audiobestanden toe te voegen voor gebruikers met browsers die HTML5 niet ondersteunen. U kunt dit doen met behulp van het kenmerk fallback en de tag, net als bij het bovengenoemde component.

De AMP-component ondersteunt dezelfde audioformaten als de

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 standaard sandboxed .

Er zijn enkele regels gerelateerd aan je moet volgen om de validatie te halen.

U moet de kenmerken width, height en sandbox opgeven. Het attribuut sandbox is standaard leeg, maar je kunt het verschillende waarden geven om het gedrag van het iframe te wijzigen, bijvoorbeeld sandbox="allow-scripts" laat het iframe JavaScript uitvoeren. U kunt ook attributen van standaard iframes gebruiken.

Terwijl de afmetingen van zijn vooraf gedefinieerd door de kenmerken width en height, er is een manier om het formaat te wijzigen tijdens runtime. Om de te gebruiken component, voeg het volgende script toe aan uw AMP-pagina:

7. amp-accordion

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 snel accordeons toe te voegen aan AMP-pagina's.

Secties van de accordeon moeten de

HTML5-tag en moeten de directe kinderen zijn van de label.

Elke sectie moet twee directe kinderen hebben :

1. een voor de kop
2. één voor de inhoud (de inhoud kan ook een afbeelding zijn)

Gebruik het expanded attribuut in elke sectie die u standaard wilt uitbreiden.

Sectie 1 
 Inhoud van hoofdstuk 1 
Sectie 2 
Inhoud van sectie 2
Sectie 3 

Om de te gebruiken component in uw AMP-document, neemt u het volgende script op:

8. amp-lightbox

voegt een lightbox toe aan verschillende elementen (in de meeste gevallen afbeeldingen) op Accelerated Mobile Pages.

Wanneer de gebruiker een interactie aangaat met het element, bijvoorbeeld tikken erop, wordt de lightbox groter en vult het hele venster . U moet een knop of een ander besturingselement toevoegen waarop de gebruiker kan tikken.

Merk op dat amp-lightbox alleen kan worden gebruikt met de nodisplay lay-out.

 Uitbreiden 

Om de te gebruiken component, moet u het importeren met de volgende code:

9. amp-carousel

Carrousels worden vaak gebruikt in mobiel ontwerp, omdat ze het mogelijk maken om tal van soortgelijke elementen (meestal afbeeldingen) langs de horizontale as weer te geven. 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 kenmerken width en height .

U kunt het optionele kenmerk type om te bepalen hoe de carrouselitems moeten worden weergegeven . Als het "carousel" waarde "carousel" heeft, worden de items weergegeven als een doorlopende strip (dit is de standaardwaarde), terwijl de waarde "slides" de items in de dia-indeling weergeeft.

De tag heeft ook andere optionele kenmerken die u kunnen helpen bij het afstemmen van het resultaat.

In het onderstaande voorbeeld ziet u dat zowel de carrousel als alle items dezelfde waarden voor width en height .

De component vereist de toevoeging van het volgende script:

10. amp-analytics

kan worden gebruikt om analysegegevens op AMP-pagina's te verzamelen . Momenteel, ondersteunt vier soorten volggebeurtenissen, maar dit kan in de toekomst veranderen:

1. Paginaweergave
2. Anker klikken
3. timer
4. scrollen

Gebruiken , moet u een JSON-configuratieobject toevoegen binnen 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 steeds 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 ook bijdragen aan de ontwikkeling, en zelfs uw eigen component maken . Als u wilt zien hoe een complete AMP-pagina eruit ziet met verschillende componenten, kunt u deze paar voorbeelden op Github bekijken.

Hoe SVG-animatie te maken met behulp van CSS

Het animeren van SVG kan worden gedaan via inheemse elementen zoals en . Maar voor degenen die meer vertrouwd zijn met CSS-animaties, maak je geen zorgen, we kunnen ook CSS-animatie-eigenschappen gebruiken voor geanimeerde SVG's.CSS-animatie kan ook een alternatieve manier zijn om JavaScript-bibliotheken zoals SnapSVG te gebruiken

(Technische en ontwerptips)

Versterking van uw siteverkeer door gebruik te maken van uw abonneelijst

Hoewel consumenten het misschien niet hebben gemerkt, hebben bedrijven over de hele wereld het zeker veel moeilijker gevonden om via hun websites verkopen te realiseren dan voorgaande jaren. Dit komt voornamelijk door het algoritme van de zoekmachine-algoritme dat Google het veel moeilijker heeft gemaakt om natuurlijk verkeer van de zoekmachine aan te trekken

(Technische en ontwerptips)