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

Nackdelar med Google AMP

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.

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

Kämpar du med driftstopp och WordPress-problem? Kinsta är hosting-lösningen som är utformad för att spara tid! Kolla in våra funktioner

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, som vi också använder här på Kinsta, 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.


Om du tyckte om den här artikeln, då kommer du att älska Kinsta´s hosting-plattform. Effektivisera din hemsida och få support dygnet runt från vårt rutinerade team på WordPress. Vår Google Cloud-drivna infrastruktur fokuserar på auto-skalning, prestanda och säkerhet. Lås oss visa dig skillnaden med Kinsta! Kolla in våra paket