november 17, 2016
AMP (Accelerated Mobile Pages) – hvad og hvordan?
Tilbage til vidensunivers
Simon Hedegård
nov 17
I 2015 lancerede Google sit AMP-projekt. Siden da har der været mange spekulationer om, hvor projektet er på vej hen og med hvilken hastighed.
Kun folkene bag AMP-projektet kan give alle svarene, men her giver jeg dig et overblik over, hvad AMP er, og hvordan du kommer i gang med det.
I samme ombæring kommer vi omkring, hvad fordele og ulemper er ved AMP. Jeg kan allerede løfte sløret for, at det har betydning for SEO og konvertering.
Det er vigtigt at huske på, at AMP er ”work in progress”. Tingene ændrer sig lynhurtigt, og indlægget her afspejler derfor et øjebliksbillede af AMP i november 2016.
Hvem får glæde af at blive klogere på AMP?
Mange kan få glæde af at blive klogere på AMP.
Indlægget her er for dig, der arbejder med SEO og online markedsføring og endnu ikke har sat dig ind i AMP. Og det er særligt aktuelt for dig, der arbejder på et medie, der udgiver indhold online.
Men det er også relevant for dig, der driver et hvilket som helst website eller webshop, fordi målsætningen er at udbrede AMP til alle typer af sider.
Hvad er AMP?
AMP er en forkortelse for Accelerated Mobile Pages. Det er et open source framework, der – som navnet antyder – skal sikre, at sider i mobilvisning loader hurtigere. I øjeblikket gælder det dog kun indholdssider, fx nyhedsartikler og blogindlæg.
Men på sigt er det meningen, at alle typer af sider skal kunne AMP-optimeres.
Du kan genkende AMP-sider i SERP, fordi der fremgår et lille lynikon ud for metabeskrivelsen.
Det er Google, der står bag initiativet til framework’et. Derfor overrasker det heller ikke, at målet med AMP er at skabe en bedre brugeroplevelse for den voksende gruppe af brugere, der læser indhold på mobilen.
AMP-projektet støttes og udvikles af en lang række virksomheder i samarbejde med Google, bl.a. LinkedIn, Twitter og WordPress.
AMP gør det altså nemmere at servicere mobillæsere, uden at udgivere af indhold selv skal bruge ressourcer på at hastighedsoptimere. Det er der både fordele og ulemper ved, som du kan læse om længere nede i indlægget.
Du kan læse mere om hastighedsoptimering her.
Hvordan fungerer AMP?
Men hvordan fungerer AMP i praksis? Helt konkret er AMP et framework, der bruges til at lave mobilsider. Som du kan læse herunder er framework’et strømlinet og strippet for meget funktionalitet for at gøre siderne hurtigere. Framework’et kan opdeles i tre dele:
- AMP HTML: Standard HTML udvidet med AMP-attributter. Forstår du HTML, forstår du også AMP-versionen af det – de fleste tags er regulære HTML-tags, men nogle er AMP-specifikke. Se Googles eget eksempel på den simpleste AMP HTML-fil.
- AMP JS: JavaScript framework til mobilsider. Ret vigtigt, fordi JavaScript ikke er tilladt, medmindre det er gennem AMP-specifikke udvidelser.
- AMP CDN: Et valgfrit Content Delivery Network, der cacher dine AMP-klargjorte sider og automatisk optimerer dem.
Desuden cacher og hoster Google AMP-siderne på deres egne servere, hvilket er med til at forkorte loadtiden betragteligt. På den måde skal siderne ikke kaldes – de ligger allerede klar.
Læg mærke til lyn-ikonet, der viser AMP-siderne i SERP.
Sådan kommer du i gang med AMP
Er du teknisk anlagt, har du nok allerede regnet ud, at AMP-optimering kræver, at du har to versioner af en side: Den eksisterende side og en AMP-version af denne.
Din eksisterende side:
ditwebsite.dk/blog-post/
AMP-versionen af din side:
ditwebsite.dk/blog-post/amp/
Det betyder også, at du skal huske at inkludere følgende canonical-lignende tag på din originale side:
<link rel="amphtml" href="http://www.dinside.dk/blog-post/amp/">
Dog er det Googles cachede version af siden, som brugeren vil få vist, når han eller hun finder den via en Google-søgning. Derfor vil den visuelle linkstruktur også se anderledes ud for brugeren.
Bruger du WordPress som CMS, kan du med fordel bruge AMP-plugin’et, der autogenerer en AMP-version af dit indlæg. Lige nu understøtter plugin’et kun indlæg (blog posts), men folkene bag arbejder på, at plugin’et også skal supportere almindelige sider (pages).
I teorien kan du nøjes med en AMP-version af hele dit site, men det vil jeg ikke anbefale. Det vil blive en kedelig omgang, fordi AMP er begrænset i forhold til både design og funktionalitet. Fx må CSS kun være in-line og fylde maksimum 50 kb, hvilket netop er årsagen til, at AMP-sider er hurtige. Se alle kravene til en AMP-side her.
For at komme rigtigt i gang med AMP, er det vigtigt, at du læser op på sagerne på den officielle AMP-side.
Husk semantisk opmærkning af din HTML
En del af kravene til AMP-sider er, at du opmærker visse elementer semantisk med Schema.org-vokabularen. Du kommer altså ikke uden om strukturerede data. Er du ikke helt inde i strukturerede data, kan du læse vores guide og indlægget om JSON-LD specifikt.
Som minimum skal du fortælle Google, hvilken type din AMP-side er – fx schema.org/NewsArticle eller schema.org/BlogPosting. Men du skal gerne opmærke mere end det – se Googles egen vejledning.
På GitHub finder du eksempler på semantisk opmærkning af AMP-sider (bl.a. Review, Article og Recipe) med både microdata og JSON-LD. Det er brugbare eksempler, som jeg vil anbefale dig at læse, uanset om du er begynder eller øvet inden for strukturerede data.
Hvordan validerer jeg AMP-sider?
Du kan validere dine AMP-sider på flere måder. Jeg foretrækker The AMP Validator, hvor du smækker din opmærkning ind, som du kan live-redigere undervejs.
The AMP Validator (kilde: https://www.ampproject.org/docs/guides/validate)
Ovenstående er ikke den eneste metode – måske du foretrækker en anden? Se de andre valideringsmetoder.
Hvad betyder AMP for konverteringer og SEO?
Følger du AMP-standarderne, kan du med rimeligehed forvente, at Google kaster sin kærlighed på dine AMP-optimerede sider på et tidspunkt. Vi er begyndt at se AMP-sider i de mobile søgeresultater i Danmark, hvor det lille lyn-ikon bliver vist.
Dog har vi endnu til gode at se de tilhørerende funktionaliteter i Danmark, og vi kan kun spå om, hvor lang tid der går.
Men i de få lande, hvor AMP og tilhørerende funktionaliteter som ”Search Carousel” for nyhedsartikler, er udrullet (fx USA og Storbritannien), figurerer de AMP-optimerede nyheder i en karrusel i toppen af SERP. Så vi har en idé om, hvad der er os i vente.
Search Carousel – her News Carousel
Men der er både fordele og ulemper ved AMP, og de har betydning for SEO og konverteringer.
Fordelene først:
- Mere synlighed = øget CTR (klikrate). Google giver AMP-sider mere synlighed i form af Search Carousel i toppen af SERP, som det lige nu er tilfældet med nyheder flere steder i udlandet. Google har annonceret, at næste skridt er at vise opskrifter i en carousel. Det vil sige, at opskrifter vist som rich cards får endnu flere fordele i AMP-format.
- Hurtigere sider giver højere rangeringer. Loadtid er en vigtig faktor for dine rangeringer, og dine AMP-sider får derfor formentlig et boost af Google – på et tidspunkt. Derudover elsker Google i det hele taget sider, der er mobiloptimeret.
- En god brugeroplevelse betyder lavere afvisningsprocent og øget konverteringsrate. Idet AMP-sider loader hurtigt, vil afvisningsprocenten i de fleste tilfælde falde. De mobilbrugere, man tidligere har mistet på grund af for langsom loadtid, vil – formentlig – ikke længere smutte med det samme. Faktisk kan AMP nu også bruges til at bygge dele af et e-commerce website, der giver en effektiv og overskuelig brugerrejse.
Ulemper:
- Link peger på en cached version hos Google. Hvis læseren deler et link til AMP-siden, som er fundet via en Google-søgning, peger linket på den cached version af siden hos Google og ikke på dit website. Det har de sociale medier svært ved at håndtere i visningen af URL’en, da der bliver henvist til Google og ikke dit site. Hvad det betyder for værdien af evt. linkjuice tør jeg ikke sige, men Google arbejder i øjeblikket på at lave en tydelig kobling mellem den originale AMP-side og den cachede version. Uanset må vi konstatere, at Google ikke længere kun peger på andre websites, men ligefrem samler indhold på deres egne servere og dermed ”beholder” brugeren hos dem.
- Begrænset framework. De begrænsede muligheder med AMP er netop en årsag til, at AMP-siderne er så hurtige, men samtidig betyder begrænsningerne i JavaScript, CSS m.m., at du arbejder inden for et snævert framework. Folkene bag arbejder dog konstant på at forbedre AMP, og du kan altid følge udviklingen ved at læse projektets roadmap.
Få hjælp af en programmør, hvis du ikke er teknisk kyndig
Jeg vil ikke lyve for dig: Det er ikke nemt at forstå AMP til fulde. Og det er ikke altid nemt at fejlfinde, når noget går galt. Du skal derfor have en vis teknisk ekspertise for at give dig i kast med AMP.
Hvis du ikke er teknisk anlagt, er mit råd, at du finder en programmør, der har sat sig ind i AMP-dokumentationen.
Er du teknisk kyndig, eller har du mod på at kaste dig ud i AMP, anbefaler jeg, at du læser dokumentationen på GitHub.
Hvordan ser fremtiden ud for AMP?
Fremtiden for AMP afhænger af, om standarden bliver adopteret af dem, der udgiver indhold. Selvom Google har held med mange af deres produkter og fremstød, er det ikke altid, at målgruppen adopterer de nye påfund. Fx har Google+ endnu til gode at nå den tiltænkte status som populært socialt medie.
Vi må konstatere, at det ikke kun er Google, der tror på AMP. Listen over samarbejdspartnere er efterhånden lang, og den inkluderer nogle af de tunge drenge i klassen. Samtidig har flere større nyhedsmedier deltaget i udviklingsprocessen, bl.a. The New York Times.
Første fase af AMP-projektet fokuserede på nyhedsmedier, og det fokus breder sig nu ud på bl.a. opskrifter og e-commerce. Ultimativt er målet, at alle sider skal kunne AMP-optimeres. Vi må se, om AMP når så langt.
Links til gode ressourcer om AMP
- AMP-projektet (officiel side): https://www.ampproject.org/
- Plugin til WordPress: https://wordpress.org/plugins/amp/
- AMP-projektet på GitHub: https://github.com/ampproject/
- AMP-validator: https://validator.ampproject.org/
