Amp in Joomla

Accelerated Mobile Pages (AMP)DOOR: SIMON KLOOSTRA

Simon Kloostra

Webdesign: SK-web.nl

SEO Projecten samen met o.a. Perfect Web Team

SEO Workshops

Blog: Joomlaseo.com

PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM

SEO boek(en)

PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017

Apress.com (Engels) Van Duuren (Nederlands)

Inhoud


Wat is AMP

AMP in Google

Moet je AMP implementeren?

Technische eisen

AMP validatie

AMP in Joomla: extensies

AMP statistieken case Joomlaseo.com

Oude sheet over Performance

Fijn voor jezelf

Betere user-experience, daardoor ook:

Hogere conversie, meer en langer paginabezoek:

Hogere plek in Google (soms)


http://www.webperformancetoday.com/2014/04/09/web-page-speed-affect-conversions-infographic/

Wat is AMP


AMP definitie volgens Google zelf op www. Ampproject.org:

AMP is a way to build web pages for static content that render fast. AMP in action consists of three different parts:

AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML. The AMP JS library ensures the fast rendering of AMP HTML pages. The Google AMP Cache can be used to serve cached AMP HTML pages.

Wat is AMP?

Accelerated Mobile Pages

Google’s (open source) antwoord op Facebook Instant Articles

Project site: https://www.ampproject.org/

Bedoeld om statische pagina’s zeer snel weer te geven

Alle opsmuk wordt zo veel mogelijk gestript

Basale opmaak

Kale HTML met beperkingen in gebruik van Javascript en CSS


https://www.ampproject.org/

AMP in Google in het wild


AMP Carroussel: Tussen resultaten:

Swipe door de Let op icoontje

resultaten



Gewone pagina versus AMP equivalent



Let op URL: Geserveerd vanaf Google.com

Wel een melding over het originele domein

Responsive versus AMP


Gewone pagina versus AMP equivalent

Nu al weinig verschil, terwijl AMP

Veel sneller zal zijn

Mobiele site: vaak traag


Nu.nl:

http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.html

http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.html

AMP site: veel sneller:


Nu.nl:

http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.amp

http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.amp

Amp site geserveerd vanaf Google: supersnel


Nu.nl:

https://www.google.nl/amp/www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.amp



AMP: veel kaler

Minder prominente advertenties (en mogelijk minder inkomsten als je adverteert….)

Veel minder afleiding met andere content-blokken (modules) die toch niemand ziet / leest

Veel minder resources

Geladen vanaf Google cache / CDN op www.google.nl/amp/www.example.com/…..

Uiteindelijk: Veel en veel sneller


SEO Overwegingen

Duplicate content: nee, canonical tag verwijst naar de non-AMP versie

Niet iedereen is voor AMP, sommigen adviseren om gewoon bij responsive te blijven: https://www.semrush.com/blog/to-amp-or-not-to-amp-what-is-best-for-your-website/

Geen alternatief voor mobiele website (http://www.thesempost.com/google-indexes-desktop-page-mobile-first-amp-mobile-friendly-version/ ): Google Indexes Desktop Page for Mobile First Index, When AMP Only Mobile Friendly Version

AMP is recent veel prominenter in search: AMP carroussel (vooral voor nieuws) staat boven de organische zoekresultaten.

Volgende sheet >>


https://www.semrush.com/blog/to-amp-or-not-to-amp-what-is-best-for-your-website/

http://www.thesempost.com/google-indexes-desktop-page-mobile-first-amp-mobile-friendly-version/

http://www.thesempost.com/google-indexes-desktop-page-mobile-first-amp-mobile-friendly-version/

SEO Overwegingen

Het hebben van een AMP versie is op zich (nog) geen SEO pre (tenzij je in de carroussel staat)

Beste tactiek: nog even afwachten?

Als je op desktop naar een AMP pagina op Google gaat wordt je met een 302 redirect geforward naar de desktop site

Linkbuilding: op mobiel zullen mensen vaak simpelweg de URL delen: de Google.com versie dus.

Beste tactiek: nog even afwachten?


Andere Overwegingen

Advertentie inkomsten vaak lager

Wat doe je met je site-navigatie: blijf je in AMP of gaan je interne links gewoon naar de responsive niet-AMP site


AMP: voor welke sites?

Nieuws-sites

Blog sites

Recepten sites

Binnenkort ook webshops? Zie Ebay ->

Meer?

Websites met relatief veel mobiel verkeer

Prominente nieuws-sites gebruiken nu al AMP: Nu.nl, NOS, Volkskrant, NRC, etc.

Joomla sites: Joomlaseo.com blog, Gavick blog, meer?


AMP: voor welke pagina’s?

AMP is bedoeld voor statische pagina’s, puur bedoeld om te lezen

Vooral voor op zichzelf staande nieuwsartikelen, blogs, recepten

Niet voor homepagina;s, blog overviews, webshops, etcetera


AMP: Nog wat overwegingen

Meer?


AMP: Implementatie

AMP op aparte URL plaatsen (meestal bron-URL met /amp er achter)

Basale HTML met speciale AMP-tags (amp-ad, amp-embed, amp-img, amp-pixel, amp-video)

Gestripte CSS, inline (dus geen los CSS bestand)

Zeer beperkt Javascript, altijd asynchroon geladen en hooguit voor zaken als lazy-loading en AMP specifieke zaken

Geen formulieren

Images geladen met lazy-loading (hoogte / breedte waarden moeten gespecificeerd zijn)

Zeer belangrijk: HTML versie verwijst naar AMP-versie met rel="amphtml"

AMP-versie verwijst naar HTML versie met rel=“canonical”


AMP: Implementatie


AMP:


Basale HTML:

AMP: Implementatie in Joomla

wbAMP van Weeblr.com (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp) 20% korting met coupon 5RXHD-NYJNF-GFJ7H

jAMP van SoreJextensions (https://storejextensions.org/extensions/jamp.html )


https://weeblr.com/joomla-accelerated-mobile-pages/wbamp

https://storejextensions.org/extensions/jamp.html

wbAMP: welke pagina’s

Selecteer je statische pagina’s in Joomla (eventueel andere componenten):


wbAMP (metadata)

Configureer je AMP metadata:


wbAMP (andere parameters)

Stel een menu in

Document type (BlogPosting of NewsArticle)

AMP Analytics

Social buttons

Custom CSS

Uitsluiten van content (bepaalde tags)

Eventueel is een alternatieve AMP-template in te stellen (apart aan te schaffen bij Weeblr)

Handig is om wbAMP eerst in testmodus te gebruiken. Pas na validatie productiemodus aanzetten


Overwegingen

AMP laadt het artikel (component). Geen probleem als dit gewoon tekst / plaatjes is:Pagebuilders zouden best eens problematisch kunnen zijn

Denk na over de navigatie: laat je bezoekers binnen de AMP versie navigeren of leid je ze weer naar de gewone mobiele site.


AMP valideren

In Chrome >> Developer tools >> Console. Voeg #development=1 toe aan URL en refresh:Resultaat: AMP validation succesvol of foutmeldingen

Handiger: Chrome extensie AMP validator

https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc




AMP valideren (2)

AMP validator website https://validator.ampproject.org/#


https://validator.ampproject.org/

Check je AMP pagina’s

Analytics (Google adviseert een aparte property)

Search Console


Analytics


Search Console


Search Console: filter instellen


Meer informatie?

Deze slides: http://www.slideshare.net/joomlaseo/amp-in-joomla

Joomla SEO: www.joomlaseo.com


http://www.slideshare.net/joomlaseo/amp-in-joomla

http://www.joomlaseo.com/

Amp in Joomla

Internet

Transcript of Amp in Joomla