Indlæg skrevet af:
Green.Click
AMP sider er en version af mobile hjemmesider. Formålet er at øge sidens hastighed og derfor indeholder den minimal kodning. Det er dermed en skrabet version af hjemmesiden, som kører hurtigt på mobilen, således der ikke mistes brugere pga. lange indlæsningstider.
Ved at siderne loades hurtigere, så vil brugervenligheden være bedre. AMP sider loades hurtigere end traditionelle mobilvenlige designs såsom responsive sider etc.
AMP sider, der validerer og er godkendte gemmes i Googles AMP-cache og vises væsentligt hurtigere end hvis de skulle hentes fra webserveren, hvor sitet er hostet.
AMP-formatet understøttes på flere forskellige platforme som f.eks. i Google søgninger. Hvis Google finder AMP siden, og den opfylder specifikationen, så vil Google vise den i sine søgeresultater og sende brugerne direkte til denne AMP side, der er cachelagret hos Google, og derved har en hurtig downloadtid pga. Googles kraftige servere.
Google har siden starten af 2016 været med på projektet Accelerated Mobile Pages.
Minimal html kodning er kernen i AMP projektet
AMP kodningen giver hurtigere downloadtider til browseren:
Der anvendes en teknologi, der minimerer sidernes html
JavaScript bruges i mindre omfang, der er begrænsninger i hvilke typer Java Script, der er tilladt.
Google crawler og henter indholdet og cacher det. Det giver en væsentlig hastighedsforøgelse når siderne hentes direkte fra Googles servere.
AMP stiller store krav til kodning
Teknikken, der anvendes til AMP siderne skal validere 100 % i forhold til Googles testværktøjer “Structured Data Testing Tool”, der bygger på konsortiets specifikationer på AMP standarden. Afvigelser i forhold til denne standard betyder at AMP siderne ikke vises i AMP formatet, og får den “ekstra markering i søgeresultaterne” som Google giver AMP sider på mobile enheder.
AMP websites bygger på en alternativ side med indhold, hvor der i responsivt design anvendes CSS til styring af layout i forhold til mobil, tablet og mobile enheder.
Det er vigtigt som udvikler og daglig webmaster på et website at have styr på valideringen af de enkle AMP-sider – i modsætning til f.eks. W3C standarden, hvor websites, der ikke validerer i forhold til denne standard i de fleste tilfælde fungerer godt nok i forhold til browsere og søgemaskiner.
AMP standarden
Konsortiet bag AMP projektet har udarbejdet en standard, som kan læses her på dette link. Google beskriver desuden i sine guidelines, hvordan de opfatter AMP sider og hvordan denne teknologi bedst udnyttes. Du kan læse beskrivelsen i hele sin ordlyd her Accelerated Mobile Pages.
AMP standarden, sådan fungerer den i praksis
AMP teknikken anvender en minimeret form for HTML, hvor kun de allermest nødvendige elementer er taget med.
I modsætning til almindelige websider, så anvendes der ikke JavaScript på AMP sider, men der er dog undtagelser. Der findes metoder, hvor man kan få JavaScript til at fungere – det er aktuelt ved visning af annoncer og Google Analytics, som websider skal kunne anvende.
Accelerated Mobile Pages anvender ikke de almindelige webadresser, men bruger sit eget format i forhold til den måde man traditionelt anvender responsivt design. Sidernes URL adresser kan f.eks. se således ud.: domain.dk/google-adwords/amp, der findes også andre formater, men de afviger alle i forhold til webstedets normale webadresser.
Accelerated Mobile Pages (AMP) hvordan udarbejdes disse sider?
De fleste CMS løsninger har mulighed for, at der kan udarbejdes AMP format, dels ved plugin på de gængse Open Source systemer og ved at være fuldt integrerede i løsningen. Plugin kan automatisk opbygge AMP siderne, hvilket gør det nemmere at kode disse sider korrekt for webmasteren.
Man skal dog være opmærksom på, der er tale om et projekt under løbende udvikling. Hvilket betyder, at der skal sættes ressourcer af til løbende test af systemerne. Plugin fra tredjeparts leverandører, der ikke er opdateret kan fejle og skabe flere problemer end de resultater, der er ved at anvende teknologien. Det er en af problemstillingerne når det besluttes at anvende denne teknologi.
Accelerated Mobile Pages (AMP) elementerne.:
AMP HTML
AMP JS
Google AMP Cache
AMP HTML
HTML. AMP JS
Google AMP Cache (den er valgfrit) leverer AMP HTML-sider
HTML der anvendes til AMP siderne
AMP HTML er næsten identisk med traditionel html, hvor der dog er tilføjet brugerdefinerede AMP egenskaber.
Eksempel:
<html> <head> <meta charset=”utf-8″> <link rel=”canonical” href=”https://www.greenclickmedia.dk/adwords/”> <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> <script async src=”https://cdn.ampproject.org/v0.js”> <body>Google AdWords - få målbare resultater med AdWords specialist</body> </html>
<<!–
AMP HTML komponenterne skal øge og sikre en mere stabil downloadtid..
Andre typer JS filer i AMP formatet
AMP JS medtager alle AMP elementerne.
Google AMP Cache
Google anvender en proxybaseret cache til AMP siderne. Google henter AMP HTML-sider og cacher dem på deres servere og validerer siderne, det forhindrer at sider, der ikke validerer vises i søgeresultaterne. Processen og metoden gør selve afviklingen hurtigere, og brugerne får hurtigt vist siden i deres browser.Læs mere om AMP projektet på https://www.amp.dev
Oprettelse og test af AMP sider
- Design: udarbejd dine sider så de overholder AMP-specifikationen
- Host: Placer AMP-siderne på dit domæne (Undlad at anvende subdomæne til denne version)
- Synlighed: AMP-siderne skal aktiveres
- Godkendelse: Test, med Googles testværktøj om standarden overholdes med gyldig AMP HTML og siderne validerer
- Strukturerede data: Markér indholdet med strukturerede data
- Status: Brug Search Console (Google webmasterværktøjerne) og se om der fremkommer fejlmeldinger
AMP sider skal anvende canonical tags
Sider der ikke anvender AMP, skal henvise til sider der bruger AMP, således Google kan se der findes en AMP version på en anden url-adresse af siden.:
<link rel="amphtml" href="https://www.domain.dk/adwords/amp-adwords/" />
På siderne med AMP-kodning, her skal der tilføjes følgende canonical tags til siden uden AMP:
<link rel="canonical" href="https://www.domain.dk/adwords/adwords/" />
Enkeltstående sider, hvor der ikke forefindes en ”normalversion” af siden , men kun en AMP side, her skal canonical referere til egen side.:
<link rel="canonical" href="https://www.domain.dk/adwords/amp-adwords-secret/" />
AMP sider, hvor der ikke er normale sider, de indekseres på samme måde som standard siderne. Husk der skal linkes til disse enkeltstående sider, så man sikrer at Google og andre webcrawlere kommer forbi og indekserer og ranker siderne.
Strukturerede data
Der kan med fordel anvendes strukturerede data for at optimere AMP siderne til en bedre placering i søgeresultaterne, hvis AMP artikler indeholder de rigtige markeringer, så kan de blive vist i en karrusel.
Som med AMP, så skal struktureret data testes for at det fungerer. Brug Google værktøjer til opgaven, de kan findes i Google Search Console.
Bør vores virksomhed være med nu med AMP teknologien?
Der er ingen tvivl om at Google vægter disse sider højt og selv er aktiv i forhold til hele konceptet omkring AMP (Accelerated Mobile Pages) men man skal have for øje at Google tit går hurtigt ind i et projekt og kalder det beta i mange år, hvorefter de trækker stikket og går i en anden retning. Det er næsten undtagelsen der bekræfter reglen.
Men har man de fornødne ressourcer til rådighed, herunder personer til aktivt at holde systemet kørende i forhold til validering og funktion på sitet, så vil man kunne opnå bedre resultater i mobile søgninger.
Man skal dog forvente at AMP sider er skrabede modeller af webstedet, de er hurtige, men designmæssigt er de ikke noget at skrive hjem om – det skal man være opmærksom på, da design mulighederne er ret begrænsede qua den skrabede html kodning.
Vi har allerede samlet og delt en masse viden:
