Waarschuwing
Kan map niet verwijderen. Pad: /data/sites/web/joomlacommunitynl/data/test.joomlacommunity.nl/public_html/cache/com_content
Bericht sluiten

| Door: Patrick. | Categorie: Utrecht.

Verslag JUG Utrecht 11 april 2017

Vanavond een nieuwe bezoeker, Erik, die voor een theater de website beheert nadat die was gemigreerd van Joomla 1.5 naar 3.x.

Komende bijeenkomsten:

Volgende maand: hoe ga je om met gebruikers? Open avond

12 juni: Patrick Smits over zijn eigen template

Joomla Nieuws

De JoomlaDagen, daar zijn we bijna allemaal geweest. ’s Morgens was er examen, van de 29 kandidaten zijn er 17 geslaagd (onder wie Anja!). ’s Middags waren er zo’n 50 mensen aan het bugs fixen. Op zaterdag was het erg druk, op zondag wat minder.

Joomla is inmiddels 80 miljoen keer gedownload.

Tijdens de JoomlaDagen liet Sander wat zien van Joomla 4. Ziet er goed uit! En voor de Wordpress-gebruikers zal de overstap wat makkelijker zijn, want de interface heeft wel wat overeenkomsten.

 

Verder is het Joomla Educatie Programma kort gepresenteerd. Een groep van vier mensen is ermee bezig om Joomla meer bekendheid te geven op scholen.

Wie ideeën heeft om Joomla beter in de markt te zetten kan zich melden bij Sander Potjer.

Deze maand is Webdesigner Magazine uitgekomen met een katern van 12 pagina’s over Joomla. Daarin wordt Joomla een killer CMS genoemd. En dat is het natuurlijk ook.

Presentatie Accelerated Mobile Pages door Simon Kloostra

Slides van Simon: //www.slideshare.net/joomlaseo/amp-in-joomla (tip van de notulist: Simon ging supersnel, dus we hebben niet alles kunnen typen).

AMP hebben nogal wat beperkingen, maar werken wel heel snel. Het doel van alles is performance. Een snelle website geeft een betere user-experience dus hogere conversie, en soms een hogere plek in Google. Hoe langzamer de site hoe hoger de bounce rate.

Wat is het

AMP is een manier om statische websites te bouwen, waarop dus geen interactie plaatsvindt. Het is HTML, je mag maar beperkt Javascript gebruiken en alles wordt gecached op Google.com.

  • Accelerated Mobile Pages
  • Google’s antwoord op Facebook Instant Articles
  • Project site: ampproject.org
  • Bedoeld om statische pagina’s zeer snel weer te geven
  • Alle opsmuk zo veel mogelijk gestript
  • Basale opmaak
  • Kale HTML met beperkingen in gebruik van Javascript en CSS
  • Gecached vanaf Google.com

De AMP-variant lijkt op een read-only versie, want door advertenties worden pagina’s veel te traag. Voor de gebruiker is dat veel fijner.

In Google kun je de AMP-resultaten herkennen aan de afkoring AMP en een soort bliksemschicht-icoontje. Als je daarop klikt, laadt de pagina supersnel. Bij een zoekopdracht in Google komt er een nieuwscarrousel in beeld van AMP-pagina’s. Klik je op een van die pagina’s, dan kun je die lezen en naar de volgende pagina swipen.

Bij sommige sites is de responsive view al wat je op AMP te zien zou krijgen. Voor de gebruiker ziet het er hetzelfde uit, maar omdat er nog veel code in de responsive view zit, laadt die langzamer.

De AMP-URL wordt geserveerd vanaf Google.

SEO Overwegingen

Let op dat je het goed implementeert, anders zou je duplicate content kunnen genereren. Je moet de SEO waarde toekennen aan het origineel en duidelijk maken dat de AMP-versie een kopie is.

Niet iedereen is ervoor, sommigen adviseren om gewoon bij responsive te blijven.

Het is geen alternatief voor mobiele websites.

AMP is de laatste tijd wel prominenter aanwezig in de zoekresultaten, de AMP-carrousel staat boven de organische resultaten.

De beste tactiek lijkt nog even afwachten.

Ga je op desktop naar een AMP-pagina op Google dan word je met een 302 geforward naar de desktop site.

Linkbuilding: op mobiel zullen mensen vaak gewoon de URL delen; de google.com versie dus.

Een AMP-versie hebben is geen directe SEO pre. Maar indirect wel: posities in de carroussel, soms betere CTR, zeker als mensen door beginnen te krijgen dat het AMP-icoontje in Google echt heel snel de site serveert, lagere bounce-rate, enzovoorts.

Het is wel meer werk; naast je responsive site moet je een kopie gaan bijhouden. En wat doe je met je navigatie, laat je die terugvallen op je gewone site en gebruik je de AMP-pagina als binnenkomertje of maak je de navigatie ook in de AMP-versie?

Voor welke sites is het interessant?

  • Nieuwssites
  • Blogsites
  • Receptensites
  • Binnenkort ook shops? EBay heeft er al pagina’s van
  • Websites met relatief veel mobiel verkeer
  • Prominente nieuwssites gebruiken het al
  • Joomlasites die het gebruiken: joomlaseo.com, Gavick blog

Voor welke pagina’s is het interessant?

  • Statische pagina’s, vooral bedoeld om te lezen
  • Op zichzelf staande artikelen, blogs, recepten,
  • Niet voor homepagina’s, blog overviews, webshops etc.

Elke pagina met een formulier is geen statische pagina.

AMP implementeren

Je plaatst AMP op een aparte URL (meestal bron-URL met /amp er achter)

Je gebruikt basale HTML q met speciale AMP-tags (amp-ad, amp-embed, amp-img, amp-pixel, amp-video)

Je gebruikt gestripte CSS, inline (dus geen los CSS bestand). Dat scheelt dus een extern bestand downloaden.

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

Geen formulieren

Images geladen met lazy-loading, pas geladen als je er naartoe scrollt, en hoogte/breedte waarden gespecificeerd

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

AMP-versie verwijst naar HTML versie (de bronvariant) met rel=“canonical”

Alle niet-tekst componenten (plaatjes, iframe, video, enzovoorts) moeten op een specifieke manier geladen worden, zie https://www.ampproject.org/docs/reference/components

Hoe implementeer je het in Joomla?

Of je bent heel handig en je doet het zelf, of je gebruikt een plugin. Er zijn er twee: wbAMP van Weebler.com: https://weeblr.com/joomla-accelerated-mobile-pages/wbamp, en jAMP van StoreJextensions https://storejextensions.org/extensions/jamp.html. Simon gebruikt de eerste, maar heeft ook wel vertrouwen in de tweede. De extensie van Weebler pakt je bestaande content op, legt er wat naast en gooit er een basic template overheen. Je geeft aan welke content je in AMP wilt hebben, in een aantal formulierblokjes. Daarna voer je wat metadata in. Een aantal dingen zijn noodzakelijk om gevalideerd en geaccepteerd te worden door Google. In de andere parameters stel je een menu in, een document type, AMP Analytics, Social buttons, custom CSS, uitsluiten van content, een alternatieve template (kun je kopen bij Weebler).

Tip: gebruik het eerst in testmodus en zet pas na validatie de productiemodus aan.

Waarop te letten

AMP laadt het artikel. Hoe het met pagebuilders gaat, dat weet Simon nog niet.

Let ook op specifieke implementaties in het artikel, bijvoorbeeld een slider die met {} tags is toegevoegd (zoals bij Widgetkit, RegularLabs)

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

Implementeer eerst de testmodus (zonder rel=amp verwijzingen)

Hoe mooier of ingewikkelder je site in elkaar zit, hoe beter je erover na moet denken.

Hoe valideer je AMP

In Chrome -> Developer Tools -> Console. Voeg #development=1 toe aan de URL en refresh. Het resultaat is of dat het geslaagd is, of foutmeldingen.

Je kunt ook in Chrome de AMP validator extensie installeren: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc

Er is ook een AMP validator website van het AMP project: https://validator.ampproject.org/#

Je kunt je AMP pagina’s in Google Analytics en in de Search Console checken.

Tot nu toe zijn de meningen dus nog verdeeld. Je kunt er een heel mooie site van maken. Het staat of valt met het design, daarmee kun je een heel eind komen.

Volgend jaar zal Google waarschijnlijk volledig overgaan op de Mobile First index.

Dokter Joomla

Tip: tegenwoordig zie je vaak bovenaan de zoekresultaten zo’n blokje;

blokje.png

Je kunt dit zelf in beslag nemen. Je moet je content er een beetje op inrichten, maar het is niet heel moeilijk. Als je in de top 10 staat met een zoekterm, en soms in de top 20 ook al, werkt het heel goed met wat-is vragen. Pas je content aan: geef het antwoord op de vraag in een beknopte paragraaf (en de metabeschrijving natuurlijk ook). Neem ook de vraag mee (bijvoorbeeld in de kop) en beantwoord hem dan meteen. Geef je afbeeldingen goede namen en goede alt-teksten. Vraag in de kop, antwoord daaronder, plaatje daaronder.

De blokjes heten instant answers. Zie je dat een concurrent in zo’n vakje staat, analyseer dan die content om te zien hoe ze daar terecht gekomen zijn.

Iets om over na te denken: wordt het niveau van onze JUG niet wat te hoog? Voor mensen die nog niet zo lang met Joomla werken, of hobbymatig, zou het misschien wat te ingewikkeld kunnen zijn. Die mensen willen eerst leren hoe ze content en plaatjes kunnen bewerken. Misschien is het een idee om trainingen te geven voor beginners, dus de eindgebruiker? JUG Heerenveen doet dat al. We zouden eens kunnen vragen hoe dat gaat. En volgende maand besteden we een hele avond aan de eindgebruiker, dus kunnen we het daar ook eens over hebben.

Case: bij mijn website worden de plaatjes opgerekt, weet je hoe dat komt?

Antwoord: het plaatje wordt in een bepaalde verhouding gedrukt. Instelling in de extensie?

Case: Kun je Protostar ook over de hele breedte laten vallen?

Antwoord: ja, die heeft twee standen, eentje met een vaste indeling en eentje flexibel. Je kunt die andere weergave aanvinken.

1000 Resterende tekens


Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid en Servicevoorwaarden zijn van toepassing.