10 Viktiga accelererade mobiltelefoner (AMP) -komponenter du borde veta

Accelererade mobil sidor eller AMP är Googles initiativ till göra mobilwebben snabbare. För att uppnå detta mål begränsar AMP-standarderna hur du kan använda HTML, CSS och JavaScript, och hanterar lastning av externa resurser, till exempel bilder, videoklipp och annonser via egen körtid.

Detta medför att du kan inte använda antingen någon anpassad (författare-skriftlig eller tredje part) JavaScript eller någon resursrelaterad HTML-element som bilder och videor i dina AMP-dokument.

För att överbrygga klyftan mellan användarnas behov och bästa prestanda har AMP specifika komponenter du kan använd i stället för dessa uteslutna element.

AMP-komponenter är specifika HTML-taggar. De beter sig som vanliga HTML-taggar: de har öppna och stänga taggar, attribut, och de flesta kan stylas med CSS. De kan lätt erkännas, som de börja alltid med amp- prefix.

Det finns två typer av AMP-komponenter: inbyggt och förlängas Komponenter.

Inbyggda AMP-komponenter

Inbyggda ins är inbyggda i AMPs JavaScript runtime, så du behöver inte inkludera dem separat.

1. amp-img

ersätter märka i AMP HTML-dokument. Du måste lägga till src och alt attribut precis som när du arbetar med det vanliga element.

har också två andra nödvändiga attribut: du behöver alltid specificera bredd och höjd attribut i heltal pixelvärden, eftersom detta tillåter AMP runtime till Beräkna layouten i förväg.

Om du vill göra bilden lyhörd, Lägg till layout = "mottaglig" attribut. De layout attribut kontrollerar layouten i AMP-dokument, och det kan läggas till alla AMP-komponenter (läs mer om detta på AMP Layout System).

Du kan också använda srcset attribut på tagga till Ange olika bilder för olika visningsportar och pixeldensiteter. Det fungerar på samma sätt som med icke-AMP-bilder.

2. amp-video

kan användas till bädda in HTML-videor direkt i AMP HTML-dokument. Det ersätter i AMP-filer. De märka lat laddar videor för att optimera prestanda.

Källan till videon måste serveras via HTTPS-protokollet. Du måste lägga till bredd och höjd attribut, precis som med komponent.

De taggen har många valfria attribut, till exempel autospela och affisch som du kan ange för att finjustera hur din HTML5-video visas.

stöder mp4, webm, ogg och alla andra format som stöds av HTML5

Om du vill kan du också lägg till fallback-videor för användare med webbläsare som inte stöder HTML5-videor, använder Retirera attribut och HTML-tagg.

  
 
Din webbläsare stöder inte HTML5-videor.
 
    

3. amp-ad och amp-embed

ger dig med iframesandlådor där du kan visa dina annonser. Du måste betjäna dina annonser via HTTPS-protokollet.

Du kan inte köra skript som tillhandahålls av ditt annonsnätverk själv. Istället kör AMP runtime JavaScript för det angivna nätverket inuti sandlåten. Du behöver bara ange vilket nätverk du använder, och lägg till dina uppgifter.

De komponent kräver dig att Lägg till annonsens dimensioner använda bredd och höjd attribut.

Du kan definiera det annonsnätverk du använder med typ attribut. Se listan över stödda annonsnätverk.

Varje annonsnätverk har sitt eget data-* attribut du behöver också lägga till. För att se vilken du behöver klickar du på ditt annonsnätverk i listan ovan.

är aliaset av , dokumentationen säger inte mycket om det annat än det kan användas istället för När det är semantiskt mer exakt. Eftersom Google lovar att utveckla annonsrelaterade AMP-komponenter över tid, kan det hända att det ändras i framtiden.

4. amp-pixel

Med , du kan lägg till en spårningspixel till dina AMP HTML-dokument till räkna sidvisningar. Den har bara ett attribut, det krävs src attribut, där du behöver Ange webbadressen som hör till spårningspixeln.

De taggen tillåter standard URL-substitutioner, vilket betyder att du kan generera ett slumpmässigt URL-värde att spåra varje intryck.

Se AMPs webbadressbytesguide om du vill använda den här komponenten. Observera att du inte kan ställa in komponent.

Utökade AMP-komponenter

Som förlängda AMP-komponenter ingår inte i JavaScript runtime, du behöver alltid importera dem i avsnitt på AMP-sidan där du vill använda dem.

Obs! Komponentversionerna kan ändras i framtiden, så glöm inte att kolla nuvarande version i dokumentationen.

5. amp-audio

ersätter HTML5-taggen, och gör det möjligt att bädda in HTML5-ljudfiler direkt på AMP-sidor.

För att kunna använda den måste du ange src, bredd och höjd attribut, och du kan också lägga till tre valfria attribut: autospela, slinga och dämpad.

Det kan också vara en bra idé att lägg till backback ljudfiler för användare med webbläsare som inte stöder HTML5. Du kan göra detta genom att använda Retirera attribut och tagg, precis som med ovan nämnda komponent.

De AMP-komponenten stöder samma ljudformat som HTML5-tagg.

  
 
Din webbläsare stöder inte HTML5-ljud.
 
    

Att använda , inkludera följande skript i del av ditt AMP-dokument:

6. amp-iframe

visar en iframe i AMP-dokument. har gjorts för att vara säkrare än vanliga HTML iframes. Därför är de som sandlåda som standard.

Det finns vissa regler relaterade till Du måste följa för att godkänna.

Du måste ange bredd, höjd, och sandlåda attribut. De sandlåda Attributet är tomt som standard, men du kan ge det olika värden för att modifiera iframes beteende, till exempelsandlåda = "Tillåt-scripts"låter iframe köra JavaScript. Du kan också använda attribut av standard iframes.

Medan dimensionerna av är fördefinierade av bredd och höjd attribut, det finns ett sätt att ändra storlek på runtime. Att använda komponent, lägg till följande skript på din AMP-sida:

7. amp-dragspel

dragspel utgör ett frekvent användargränssnitt i mobil design, eftersom de sparar utrymme, men visar fortfarande innehållet på ett tillgängligt sätt. gör det möjligt att Lägg snabbt till dragspel till AMP-sidor.

Sektioner av dragspelet måste använda

  
 
Sektion 1
 
Innehållet i avsnitt 1
 
 
 
Sektion 2
 
Innehållet i avsnitt 2
 
 
 
Avsnitt 3
 
    
 
  

  Bygga ut