Menu Luk

Er du med på vognen?  Accelerated Mobile Pages – AMP websites? Eller venter du?

Googles nye Accelerated Mobile Pages har et bestemt formål, nemlig at gøre hjemmesiders indlæsning hurtig hos brugerne og derved skabe glade brugere, noget som Google hele tiden fokuserer på.  Google har tilsluttet sig AMP modellen fra slutningen af februar 2016.

AMP teknikken bygger på amputeret html

AMP skaber hurtige hastigheder på følgende måder:

  • Der anvendes et mindre sæt webteknologier til at generere sider
  • Der er kun få JavaScript tilladt
  • Google cacher indholdet og henter herved indholdet hurtigt frem og opdaterer selv i forhold til eksisterende website

I modsætning til responsivt design, så skal der oprettes en alternativ version af websitet. Det kræver at denne version validerer 100% i forhold til Googles testværktøj – Structured Data Testing Tool, hvis den ikke gør det, så kommer den ikke i betragtning i Googles søgeresultater (SERPS).

Accelerated Mobile Pages skal overholde specifikationen https://www.ampproject.org/docs/get_started/create_page.html , der er offentliggjort af AMP-projektet.

Det skriver Google om Accelerated Mobile Pages.:  https://googleblog.blogspot.dk/2015/10/introducing-accelerated-mobile-pages.html

AMP standarden

Standarden minder meget om traditionel HTML, men skåret ned til, hvad Google anser for at være det absolutte minimum.

Selvom JavaScript generelt ikke er tilladt på AMP sites, så findes der nogle smuthuller, hvor det er muligt at putte JavaScript, annoncer og Google analytics ind.

Sidernes url-adresse er anderledes end websites almindelige, de har en anden webadresse f.eks.: minhjemmeside.dk/mitbibliotek/amp

WordPress, Joomla Plugin kan løse opgaven

Hvis du bruger WordPress, Joomla eller andre større CMS systemer kan du finde plugin, der automatisk kan skabe disse sider, men de har stadig en del børnesygdomme at slås med og bliver jævnligt opdateret, hvilket indikerer at de ikke spiller max endnu.

Der skulle være en del fokus på disse sider fra Googles side, specielt på Amerikanske websites ligger mange i toppen af søgeresultaterne med deres AMP websites, men er ikke slået igennem herhjemme på nuværende tidspunkt.

Googles brug af AMP ligner Facebook Instant artikel-tjeneste, 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.

 

Se video fra AMP projectet https://www.ampproject.org/

AMP websites kodning består af følgende elementer.:

  • AMP HTML
  • AMP JS
  • Google AMP Cache
  • AMP HTML er HTML light med restriktioner og begrænsninger for at kunne eksekveres hurtigt på den enkelte webside
  • HTML. AMP JS Biblioteket sikrer hurtig gengivelse af AMP HTML-sider

Google AMP Cache (valgfrit) leverer AMP HTML-sider

AMP HTML

AMP HTML ligner HTML med udvidet brugerdefinerede AMP egenskaber.

Et eksempel – Den enkleste fil ser sådan ud:

<!doctype html>
< html >
< head >
< meta charset=”utf-8″ >
< link rel=”canonical” href=”virksomhedes-fede-side.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}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
< script async src=”https://cdn.ampproject.org/v0.js”></ script >
</ head >
< body >Virksomhedens Navn!</ body >
< / html >

Selv om de fleste tags i en AMP HTML-side er normale HTML-tags, er nogle HTML-tags dog erstattet med AMP-specifikke tags. Disse brugerdefinerede elementer, kaldet AMP HTML komponenter, sikrer det er let at få en god hastighed på indlæsningen af websiden.

AMP JS

AMP JS bibliotek implementerer alle AMP elementerne for hurtig eksekvering og ydeevne.

  • Google AMP Cache
  • Google AMP Cache er en proxy-baseret cache. Den henter AMP HTML-sider og cacher dem, dette forbedrer websidens ydeevne.
  • Cachen er med en indbygget validering, som bekræfter, at siden er garanteret fri for fejl.
  • 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/

AMP sider er forholdsvis nye i Google sammenhæng, det anbefales at slå koldt vand i blodet med hensyn til implementering på eksisterende løsninger PT.

Vi har kørt en del test med forskellige plugin på forskellige CMS platforme, og der har været fejl på dem alle. Det kræver tilpasning, hvis det ikke skal skade mere end det gavner. Vi havde f.eks. problemer med forkerte canonical tags, som kan skabe problemer andre steder på sitet.

Posted in Google