Ring

 

Skriv

Accelerated Mobile Pages - AMP websites

Google har fra slutningen af februar 2016 tilsluttet sig Accelerated Mobile Pages, der har et klart formål, at øge indlæsningshastigheden på mobile websider og dermed skabe bedre kvalitet for brugerne på disse enheder, hvor indlæsningen vil foregå væsentligt hurtigere end på traditionelle mobilwebsider med f.eks. responsivt webdesign.

Accelerated Mobile Pages teknik bygger på minimeret html kodning

AMP kodning giver hurtigere downloadtider til browseren på følgende måde:

  • Webteknologien, der skaber siderne er minimeret
  • JavaScript er anvendt i mindre omfang, ikke alle typer Java Script er tilladt
  • Google henter indholdet og cacher det, hvilket betyder at siderne vises fra Googles servere

Når man ser på teknikken bag AMP websites, så skal der i modsætning til responsivet design (design tilpasset mobile enheder) oprettes en alternativ version af siden og dens indhold, som overholder konsortiets specifikationer på AMP standarden. Accelerated Mobile Pages, skal validere 100 % i forhold til Googles testværktøj Structured Data Testing Tool, hvis den ikke gør det, så vil siderne ikke vises i AMP formatet.
Webmastere skal være særligt opmærksomme på dette, da det ikke er det samme som at snyde på vægten i forhold til W3C standarden, hvor det er mere eller mindre normalt at websites ikke validerer 100 % og har mange syntaxfejl i koderne. Dette går ikke på et APM site, det skal være 100 % fejlfrit i validering for at fungere.

AMP standarden

AMP konsortiet har udarbejdet en specifikation som kan ses på dette link.

Google´s forklaringer i forhold til AMP projektet og AMP standarden

Læs evt. mere om projektet på Google - om Accelerated Mobile Pages.

AMP kodningen og standarden bag

HTML delen er i princippet en minimeret form for html, hvor vi er nede på kun at anvende det mest nødvendige for at generere en fornuftig side med få egenskaber.
JavaScript er generelt ikke er tilladt på AMP sites, men som ved så mange andre teknikker, så findes der løsninger, hvor man kan få Java Script til at fungere på en fornuftig måde, her tænkes på specielt annoncer og Google analytics, som er nyttige på en webside.

Accelerated Mobile Pages anvender en anden link struktur, dvs, de bruger ikke standardsidernes url-adresse som i f.eks. responsivt design, men er tildelt sin egn nye url, der kan se sådan ud eks.: domain.dk/teknik/amp, der findes også andre formater, der kan anvendes, men fælles for disse er at det er andre URL-adresser end webstedets normale webadresser.

CMS systemet kan klare opgaven med Accelerated Mobile Pages

Joomla, WordPress og andre CMS systemer kan løse opgaven via forskellige AMP plugin, som automatisk kan opbygge AMP siderne.
Hvis modellen med plugin vælges, så vær på vagt med at der er mange børnesygdomme her i startfasen, og der skal jævnligt kodes alternative koder til AMP sidere, hvis det skal fungere korrekt.
Googles brug af AMP ligner Facebook Instant articles, som den kan sammenlignes med.

Facebook Instant artikler giver udgivere mulighed for at integrere deres indhold på Facebooks servere, hvilket betyder at brugerne ikke behøver at forlade Facebook mobile app. Det samme gør sig gældende for Google og AMP websiderne.

Kodningen til Accelerated Mobile Pages og de tilhørende elementer.:

      • AMP HTML
      • AMP JS
      • Google AMP Cache
      • AMP HTML her er der tale om HTML i light version med restriktioner og begrænsninger som skal sikre hurtigt afvikling af den enkelte webside
        HTML. AMP JS Biblioteket, som skal sikre hurtig gengivelse af AMP HTML-sider

Google AMP Cache (valgfrit) leverer AMP HTML-sider

HTML der anvendes til AMP siderne

AMP HTML ligner HTML med udvidet brugerdefinerede AMP egenskaber.

Eksempel:

< html >
< head >
< meta charset=”utf-8″ >
< link rel=”canonical” href=”http://www.onlinemarketing.dk/soegemaskineoptimering.html” >
< meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″ >
< style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
< script async src=”https://cdn.ampproject.org/v0.js”>

< body >Online Marketing – Specialist i søgemaskineoptimering < / body >
< / html >

De fleste tags i en AMP HTML-side er normale HTML-tags, men der er dog nogle af de almindelige HTML-tags, der er erstattet med AMP-specifikke tags. De går under betegnelsen AMP HTML komponenter, der skal få hastigheden på indlæsningen af websiden til at foregå hurtigt.

JS filer til AMP

      • Biblioteket AMP JS implementerer alle AMP elementerne for hurtig eksekvering og ydeevne.
      • Google AMP Cache

Google AMP Cache er en proxy-baseret cache. Google henter AMP HTML-sider og cacher dem, således afviklingen af siderne foregår i et væsentligt hurtigere tempo.
Cachen er med en indbygget validering, der sikrer, at siden er fri for valideringsfejl.
Valideringssystemet sikrer at websider, der ikke validerer og opfylder AMP specifikationen ikke hentes, og derved ikke tages med i Googles indeks

Læs mere på https://www.ampproject.org/

Skal jeg slå til nu!! og komme med på AMP bølgen?

Accelerated Mobile Pages er relativt nye i Google sammenhæng. Det anbefales at have tålmodighed før man sætter ind med fuld skala. Der er stadig mange problemer med de forskellige plugin til de forskellige CMS systemer. Der tilpasses og justeres med mange nye opdateringer fra de enkelte plugin leverandører, hvor der på flere moduler f.eks. har været problemer med forkerte canonical tags og dårlig validering.

Google