Upload
simon-kloostra
View
193
Download
0
Embed Size (px)
Citation preview
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
http://www.webperformancetoday.com/2014/04/09/web-page-speed-affect-conversions-infographic/
Wat is AMP
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
AMP in Google in het wild
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
AMP Carroussel: Tussen resultaten:
Swipe door de Let op icoontje
resultaten
AMP in Google in het wild
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Gewone pagina versus AMP equivalent
AMP in Google in het wild
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Gewone pagina versus AMP equivalent
AMP in Google in het wild
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Let op URL: Geserveerd vanaf Google.com
Wel een melding over het originele domein
Responsive versus AMP
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Gewone pagina versus AMP equivalent
Nu al weinig verschil, terwijl AMP
Veel sneller zal zijn
Mobiele site: vaak traag
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Nu.nl:
http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.html
AMP site: veel sneller:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Nu.nl:
http://www.nu.nl/politiek/4366942/klaver-werkt-met-campagnebureau-obama-hielp-.amp
Amp site geserveerd vanaf Google: supersnel
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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 >>
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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?
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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?
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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”
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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 )
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
wbAMP: welke pagina’s
Selecteer je statische pagina’s in Joomla (eventueel andere componenten):
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
wbAMP (metadata)
Configureer je AMP metadata:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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.
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
AMP valideren (2)
AMP validator website https://validator.ampproject.org/#
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Check je AMP pagina’s
Analytics (Google adviseert een aparte property)
Search Console
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017
Meer informatie?
Deze slides: http://www.slideshare.net/joomlaseo/amp-in-joomla
Joomla SEO: www.joomlaseo.com
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2017