Webben utvecklas ständigt och för många företagare innebär detta ett konstant behov av att hålla koll på alla förändringar som Google gör. Om du inte anpassar kan dig kan du lätt hamna på efterkälken. Google AMP, det mobila initiativet för att snabba på webben, närmar sig nu sitt 1-års-jubileum. Eftersom det är mycket stabilare nu än det var för sex månader sedan, tänkte vi att det skulle vara på sin plats att dela med oss av några steg du kan ta för att komma igång med Google AMP i WordPress, liksom några av för- och nackdelarna med denna nya plattform.

Vad är Google AMP?

Google AMP (Accelerated Mobile Pages Project) lanserades ursprungligen i oktober år 2015. Projektet bygger på AMP HTML, ett nytt öppet ramverk som helt byggdes av befintlig webbteknik, vilket gör det möjligt för webbplatser att bygga lättviktiga webbsidor. För att uttrycka det enkelt erbjuder det ett sätt att visa en avskalad version av din nuvarande webbsida.

Från dag ett har ett viktigt fokus för AMP varit hastighet.  Det är utan tvekan en av de mest frustrerande aspekterna av den mobila webben – bekräftat av den senaste Google-forskningen som visar att 53% av webbplatsbesökarna kommer att lämna en webbplats som inte laddar på tre sekunder eller mindre. Det är det värsta av alla världar för användare, företag, utgivare, webbplatser och den mobila webben som helhet. — David Besbris, AMP-projektledare på Google

Enligt den senaste State of Online Retail Performance-rapporten från Akamai, spelar varje tiondels sekund en stor roll. Även en liten ökning av sidladdningstiden till 2,8 sekunder såg en 2,4% minskning av konverteringsfrekvensen.

konverteringsfrekvens på mobil
Korrelation mellan hastighet och konverteringsfrekvens på mobil

Många stora företag har börjat använda Google AMP under det senaste året, inklusive WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo, etc. Enligt Google såg Slate en 44% ökning av månatliga unika besökare och en 73% ökning av besök per månatlig unik besökare.

När en sida laddas via AMP i Google kommer den att ha AMP-symbolen bredvid sig, som du kan se nedan i New York Times-demon. OBS! Du måste vara på en mobil enhet för att testa detta. Du kan också använda enhetssimulatorn i Chrome devtools. Strukturerad datamarkering gör det möjligt för Google att presentera ditt innehåll på ett mer framträdande sätt i sökresultaten. Till exempel kan AMP-artiklar som innehåller lämplig markering få den eftertraktade karusellplatsen i SERP som visas nedan.

Google AMP karusell
Google AMP karusell

Och här är ett exempel på hur en AMP-sida ser ut på New York Times hemsida. Som du kan se är den väldigt grundläggande och förenklad, vilket är själva poängen med AMP. Detta gör att den laddas snabbt och ger bättre användarupplevelse.

Google AMP sidexempel
Google AMP sidexempel

As with any new platform you should weigh the pros and cons and decide if it is the right move for your business and or website.

Fördelar med Google AMP

  • AMP är gratis och gjort med öppen källkod.
  • AMP kan definitivt förbättra laddningstiderna på din WordPress-webbplats. Och kom ihåg att hastighet är en rankningsfaktor.
  • Bättre placeringar i SERP med karusellmöjlighet för bättre CTR. I en implementering hos en populär utgivare resulterade Google AMP i en ökning av CTR på 600%!
  • Google AMP kommer framtvinga många rekommenderade praktiker för webbprestanda, såsom att förhindra stora CSS-och JS-ramverk.
  • Detta kan påverka dina konverteringar på ett positivt sätt.
  • En hel del förbättringar har gjorts under det senaste året och annonseringsalternativ är nu lätt tillgängliga i Google AMP. Det innebär att tidningar och nya publikationer kan hålla sina AdSense-intäkter på samma nivå, eller till och med öka dem.
  • Automatisk bildoptimering (även konvertering till WebP-format!)
  • AMP Lite introducerar ytterligare optimering för långsamma nätverksanslutningar. Google såg en kombinerad minskning av byte på 45%.

Nackdelar med Google AMP

  • AMP är för närvarande inte en rankningsfaktor, men det kan bli det i framtiden. Detta skulle kunna vara både en för- och en nackdel.
  • AMP kan vara svårt att implementera och testa om du inte är en utvecklare. Men tack och lov är WordPress-plattformen lite enklare än många andra.
  • Det introducerar en helt ny separat plattform och funktionalitet som du behöver oroa dig över. Vad hände med att helt enkelt optimera våra mobila webbplatser?
  • AMP kan skada eller påverka dina konverteringar på ett negativt sätt.
  • Det har förekommit rapporter om att Google AMP rör till det i statistiken hos Google Analytics.
  • Vissa har upplevt lägre engagemang och högre avvisningsfrekvenser.
  • Det är fortfarande många tredjepartsskript och program som inte stöds.
  • Inget stöd från vissa äldre webbläsare som Internet Explorer 11. De har sagt att de i allmänhet kommer att stödja de två senaste versionerna av alla stora webbläsare som Chrome, Firefox, Edge, Safari och Opera. Och de stöder dator-, telefon-, surfplatta-, och webbvisnings-versioner av respektive webbläsare.
  • Läs Jan Dawsons åsikt om varför Google AMP gör det svårare, och inte lättare, att publicera på webben.
  • Läs Alex Kras artikel om några av problemen med Google AMP, tillsammans med ett svar från AMP-projektets teknikchef på Google.
  • Tim Kadlec delar sin åsikt om Google AMP och behovet av ett bättre alternativ: prestandapolicier för innehåll.

I februari 2017 började Google AMP visa utgivarens direkta webbadress. Tidigare visades enbart Googles version, som levereras från cache. Detta gjorde många människor oroliga över sina varumärken. Tack och lov insåg Google detta också och gjorde en förändring. Nu kommer adressfältet i en webbläsare fortsätta att visa en Google-adress. AMPs rubrikområde kommer dock att visa en länk- eller kedjeikon, som den kallar ”ankarknappen”. Genom att klicka på länken visas utgivarens direktadress, så att den enkelt kan kopieras och klistras in. Det här är fortfarande inte en perfekt lösning, men det är dock bättre än ingenting.

google amp publisher URL
Bildkälla: Google Developer Blog

Här är ett till exempel på att förlora sin varumärkning.

Det är också viktigt att notera att om den enda mobila versionen av en webbplats är en AMP-version, kommer Google fortfarande att använda datorversionen för indexering, även när Google gör bytet till sitt mobile first index

Så konfigurerar du Google AMP för WordPress

Tack och lov är det mycket lättare att implementera Google AMP i WordPress nu än det var för sex  månader sedan. Många framsteg har gjorts när det gäller WordPress-plugins och plattformen som helhet. Kom dock ihåg att din kod måste valideras hos Google för att visa AMP-versionen av din webbplats i SERP. Ett plugin kommer att förvandla ditt inlägg till en AMP-version, men det är Google som bestämmer om de ska visa AMP-versionen eller ej.

Det fungerar i princip så att ditt WordPress-inlägg tilldelas en annan webbadress. Allt detta kommer hanteras av WordPress-pluginet automatiskt. Oftast läggs  /amp eller /?amp till i ditt inläggs nuvarande webbadress. Här är ett exempel:

Ursprunglig blogginläggsadress: https://domain.com/blog-post
AMP-blogginläggsadress: https://domain.com/blog-post/amp/

Google AMP och WordPress-plugin

There are currently 2 popular WordPress plugins in the repository that can help you get setup with Google AMP. The first one is the free official AMP plugin, which is actually developed by the team over at Automattic.

 Google AMP-pluginet från Automattic
Det officiella Google AMP-pluginet från Automattic

I skrivande stund har det för närvarande över 200 000 aktiva installationer med ett betyg på 3,5 av 5 stjärnor. Du kan ladda ner det från WordPress-arkivet eller genom att söka efter det i din WordPress-panel under ”Lägg till nytt plugin”.  Du kan anpassa utseendet lite under ”Appearance AMP”-redigeraren (se nedan). Dina alternativ är dock ganska begränsade med detta plugin och det bygger på att du vet hur du implementerar ytterligare filter för funktioner som AdSense eller Analytics.

WordPress AMP-stilar
WordPress AMP-stilar

Det är också viktigt att notera att det bara har stöd för inlägg, inte sidor. Utvecklarna har dock meddelat att de arbetar med att lägga till den här funktionen. Nedan är ett exempel på hur vårt WordPress-inlägg ser ut efter att vi installerade pluginet.

wordpress amp förhandsgranskning
WordPress AMP, förhandsgranskning

Om du vill ha ett enkelt sätt att lägga till ytterligare funktioner så är det här det kostnadsfria pluginet AMP for WP kommer in i bilden. Detta är i princip en mer avancerad version av det officiella AMP-pluginet som ger dig ytterligare funktioner och stöd. Det är utvecklat av Ahmed Kaludi och Mohammed Kaludi som också driver en framgångsrik WordPresstemabutik.

amp for wp plugin
AMP for WP, WordPress-plugin

I skrivande stund har det för närvarande över 70 000 aktiva installationer med 4,6 av 5 stjärnor i betyg. Du kan ladda ner det från WordPress-arkivet eller genom att söka efter det i din WordPress-panel under ”Lägg till nytt plugin”. Detta plugin låter dig anpassa din Google AMP-konfiguration mycket mer. Det har också stöd för sidor. Nedan kommer vi ta en titt på de anpassningar och funktioner som är tillgängliga genom pluginets inställningar från din instrumentpanel.

Vi använder faktiskt detta plugin här på Kinsta! Du kan att se AMP körs på det här inlägget om du går till . (Uppdatering: Sedan början av September använder vi inte längre AMP på vår webbplats. Kolla in vår fallstudie om varför vi valde att inaktivera Google AMP). Du kan också se ett exempel från SERP för ett Kinsta-blogginlägg nedan. Du kan se AMP-logotypen.

kinsta AMP i SERPs
Exempel på Kinsta AMP i SERPs

Allmänt

Under skärmen Allmänt, kan du lägga till en logotyp, anpassa storleken, och även välja om du vill ha AMP aktiverat på sidor eller inte. Beroende på din webbplats och din trafik kanske du bara behöver aktivera AMP på din blogg (inläggstyper).

AMP Allmänna alternativ
AMP Allmänna alternativ

Startsida

Under Startsida kan du aktivera eller inaktivera stöd för startsidan, åsidosätta startsidans miniatyrstorlek, och välja vad som ska hända när en användare klickar på logotypen (gå till AMP-versionen eller icke-AMP-versionen).

AMP Startsida
AMP Startsida

Sidbyggare

Under Sidbyggare kan du aktivera deras sidbyggare för att tillåta användning av AMP-widgets.

AMP Sidbyggare
AMP Sidbyggare

Design

Under Design kan du starta inläggsbyggaren eller välja från en fördesignad mall. Du kan sätta på HTTPS för sökning och även lägga till en Ring nu-knapp. Det finns också ett alternativ för anpassad CSS. På vår webbplats lägger vi till exempel till följande kod för att anpassa färgen på rubriken:

.amp-wp-header {background-color:#5CC0C0;}
AMP design
AMP design

Single

Under Single kan du aktivera sociala ikoner, inaktivera länkar, visa författarinformation, och även ändra alternativ för relaterade inlägg.

AMP single
AMP single

Annonser

Under Annonser kan du aktivera AdSense och välja var annonserna ska visas. Detta plugin är ett av de enklaste sätten att lägga till AdSense med Google AMP. För er som är beroende av reklam för att driva era webbplatser kan detta vara en mycket användbar funktion (föreslagen läsning: Så här lägger du till Google AdSense till WordPress).

AMP Annonser
AMP Annonser

AMP-menyn

Under Meny kan du välja om du vill lägga till /amp/ i slutet av webbadresserna i menyn eller inte. Du kanske vill att dina besökare ska stanna på din AMP-aktiverade webbplats, och i det fallet behöver du aktivera detta.

AMP-menyn
AMP-menyn

Social

Under menyn Social kan du lägga till vilka sociala nätverk du vill ska visas på mobilen för delningsändamål. För Facebook måste du registrera ett gratis App-ID.

AMP social
AMP social

SEO

SEO-skärmen är förmodligen en av de viktigaste, eftersom det handlar om hur Google kommer att se och ranka ditt AMP-innehåll. Vi rekommenderar att du aktiverar alternativet ”Metabeskrivning”. Om du använder pluginet Yoast SEO, rekommenderar vi också att du aktiverar alternativen ”metataggar från Yoast” och ”Yoast-beskrivning i ld+jason”.

AMP SEO-alternativ
AMP SEO-alternativ

Analytics

Med Analytics-skärmen kan du lägga till dina spårningsskript för Google Analytics samt Google Tag Manager. Det är viktigt att göra detta för att dina data ska vara konstant uppdaterade.

AMP analytics
AMP analytics

Det stöder också Segment Analytics, Piwik Analytics, Quantcast Measurement, comScore, Effective Measure, StatCounter, HitStats Analytics, Yandex Metrika, och Chartbeat Analytics.

Strukturerade Data

Med skärmen Strukturerade data kan du anpassa standardlogotypen för strukturerade data och standardbilden för inlägg.

AMP Strukturerade data
AMP Strukturerade data

Contact Form

Skärmen Contact Form låter dig helt enkelt aktivera stöd för Contact Form 7.

AMP contact form
AMP contact form

Aviseringar

Under skärmen Aviseringar kan du aktivera en cookie-varning. Detta kan vara användbart för dig om du bor i ett land med restriktiva sekretesslagar – som t.ex. Sverige.

AMP Aviseringar
AMP Aviseringar

Kommentarer

Under skärmen Kommentarer kan du aktivera stöd för tredjeparts kommentarsystem som Disqus och Facebook-kommentarer.

AMP Kommentarer
AMP Kommentarer

Avancerade Inställningar

Under Avancerade inställningar kan du aktivera mobil omdirigering. Kom ihåg att AMP som standard endast aktiveras för mobila användare som klickar på den från SERP. Om en mobil användare direkt bläddrar till din webbplats kommer de inte att visas den AMP-aktiverade sidan om du inte först aktiverar omdirigering. Du kan också ange anpassad HTML på den här skärmen och ändra länkarna i sidfoten.

AMP Avancerade inställningar
AMP Avancerade inställningar

Tillägg

Utvecklarna har också premiumtillägg som du kan köpa för att ytterligare utöka AMP-pluginets funktioner. Några populära tillägg som du kan överväga är epostalternativ, CTA-knappar och stöd för anpassade inläggstyper.

AMP-tillägg
AMP-tillägg

Och så här ser vårt inlägg ut med AMP for WP-pluginet aktiverat på Kinsta-bloggen.

AMP for WP, exempel
AMP for WP, exempel

Utvecklarna till AMP for WP har också nyligen släppt ett nytt plugin, AMP WooCommerce, som låter dig aktivera AMP på din e-handelsbutik.

amp woocommerce
AMP WooCommerce-plugin

Validera din Google AMP-kod

När du har konfigurerat Google AMP på din WordPress-webbplats behöver du se till att koden valideras. Om den inte gör det kommer inte Google visa AMP-versionen i SERP. Du kan köra din WordPress-webbplats genom verktyget Google AMP Validator. Verktyget kommer att visa dig längst ner om du får godkänt eller underkänt.

google amp validator
Google AMP Validator

Du kan också ladda ner gratistillägget Chrome AMP som kommer att validera varje sida. Om resultatet är rött kan du klicka på det och snabbt se de fel eller varningar som finns på sidan.

Fel med Google AMP
Fel med Google AMP

Om koden inte valideras korrekt kan du se ett fel som detta: ”Inte en giltig AMP-sida.” I exemplet nedan berodde detta på användningen av de gamla och inte längre stödda HTML-taggarna, <deltime> och <instime>. Du kan se en fullständig lista över AMP-stödda HTML-taggar här. Ogiltiga AMP-sidor har inte AMP-specifika funktioner i Googles sökresultat.

Inte en giltig AMP-sida
Inte en giltig AMP-sida

Du kan också kontrollera om du har problem med AMP i Google Search Console under avsnittet ”Sökutseende”. Det är viktigt att notera att många användare har rapporterat stora fördröjningar med AMP-rapportering i Google Search Console. Detta beror troligen på att det fortfarande är en ganska ny plattform och genomsökningen sker inte lika frekvent.

google search console amp
Accelerated Mobile Pages, Rapport i GSC

Om fel har uppstått kommer Google att meddela dig via e-post att du måste lägga till nödvändiga strukturerade data på dina AMP-sidor.

amp Fel google search console
AMP Fel – GSC

Google AMP SEO

En annan aspekt du kanske funderar över är hur din SEO påverkas när du har två exemplar av samma sida eller inlägg. Du behöver inte oroa dig för dubbletter eftersom båda pluginsen ovan använder kanoniska taggar med AMP. Kanoniska taggar talar om för Google att det ursprungliga innehållet är din datorversion. Google upptäcker automatiskt AMP-sidor på din webbplats eftersom din ursprungliga sida levereras med en rubriktagg som leder Googlebot till din AMP-sida.

Exempel på din ursprungliga sida:

<link rel="amphtml" href="https://domain.com/amp/">

Exempel på AMP-sidan:

<link rel="canonical" href="https://domain.com/">

Pluginet AMP for WP som vi pratar om ovan fungerar också bra med pluginet Yoast SEO för att lägga till dina meta- och OG-taggar för sociala och SEO-syften. Se exempel nedan.

Metataggar för Google AMP
Metataggar för Google AMP

New Relic-övervakning med Google AMP

Det är också viktigt att notera för kunder som använder New Relic-övervakning (licens krävs), att Google AMP-valideringen kan misslyckas på grund av ett skriptfel från tredje part:

Taggen "script" är inte tillåten förutom i specifika former.

Detta beror på att HTML-sidor som är formaterade för Google AMP inte får innehålla JavaScript från tredje part. AMP for WP har fullständigt stöd för New Relic. Men om du behöver inaktivera New Relic Browser på AMP-sidor, följ instruktionerna i Inaktivera Browser-övervakning för specifika sidor. Det finns också ett gratis WordPress-plugin, Disabled NewRelic For AMP, som du kan installera.

Aktivera AMP för externa länkar med Cloudflare

Cloudflare lanserade nyligen en ny funktion som låter dig aktivera accelererade mobillänkar för externa länkar som använder AMP. En av fördelarna med det för din webbplats är att AMP-innehåll laddas i ett visningsfönster direkt på webbplatsen som länkade till innehållet. Det innebär att när läsaren är klar med att konsumera innehållet, stänger de visningsfönstret och de förs sedan tillbaka till din webbplats. På så sätt kan det öka den totala tiden en besökare spenderat på din webbplats. Du kan aktivera detta i Cloudflares prestandapanel.

Cloudflare Accelererade Mobillänkar
Cloudflare Accelererade Mobillänkar

Sammanfattning

Som du kan se finns det ett par enkla sätt att få igång Google AMP på din WordPress-webbplats. Ska du sätta igång med Google AMP direkt? Det beror egentligen på vilken typ av WordPress-webbplats du driver. Om du har en tidning eller nyhetssajt kan det vara smart att implementera detta direkt och börja testa AdSense-placeringar. Om du har ett SaaS-företag kan det skada dina konverteringar om du inte är försiktig. Google AMP har definitivt fört med sig en stor förändring, speciellt om du redan får mycket mobil trafik. Vårt råd är att börja testa eftersom det är det enda sättet att ta reda på om ditt företag kommer att se positiva eller negativa resultat.

Har du några andra tips om hur man kan använda Google AMP med WordPress? Om så är fallet vill vi gärna höra om dem nedan i kommentarerna! Se också till att kolla in den officiella AMP-planen.

Brian Jackson

Brian har stor passion för WordPress och har använt det i över ett årtionde, han har till och med utvecklat ett par premium-plugins. Brian gillar att blogga, kolla filmer och hiking. Ta kontakt med Brian via Twitter.