Geen verrassingen meer achteraf!

Met ervaring in zowel ontwikkeling als SEO consultancy, ben ik een verscheidenheid aan SEO uitdagingen tegengekomen - sommige lonend, andere minder. Mijn doel is om deze minder gunstige verrassingen in mijn werk te minimaliseren. Door mijn expertise in SEO en ontwikkeling te combineren, wil ik inzicht bieden in de oplossingen die ik heb bedacht, variërend van zeer effectief tot matig succesvol, om de kloof tussen SEO en ontwikkeling te helpen overbruggen

Waar het allemaal begon

Er was eens, in de snelle wereld van e-commerce, een belangrijke verbetering van mijn website. Maanden van nauwgezet werk, inclusief aanpassingen aan de betalingsprovider, culmineerden in een schijnbaar vlekkeloze implementatie. De acceptatieomgeving sprankelde van perfectie en we lagen ruim voor op onze deadline. De langverwachte live-dag brak aan en terwijl het gejubel de lucht vulde, onthulde een snelle website crawl een huiveringwekkende waarheid - de hele site was ingesteld op 'no-index'. Te midden van de feestvreugde kon ik het niet helpen mezelf te berispen omdat ik zo'n belangrijk detail over het hoofd had gezien.

In de nasleep van deze onverwachte tegenslag werd ik achtervolgd door een prangende vraag. Hoe konden we ervoor zorgen dat verrassingen als deze in de toekomst werden voorkomen, zelfs voordat er ook maar één regel code live was gegaan? Het landschap van SEO tools, hoewel formidabel, bleek meer reactief dan proactief. Tools als ScreamingFrog en Contentking, hoewel uitstekend in het opsporen van fouten na implementatie, lieten een gat in de beveiliging tegen onvoorziene problemen voordat ze live gingen. Tijd is geld, zoals we allemaal weten, en elke seconde dat een pagina onzichtbaar is, is een potentieel verlies.

Toen ik me op het terrein van Continuous Integration and Continuous Deployment (CICD) begaf, ontdekte ik de uitdagingen waar SEO-specialisten mee te maken hebben. Het bijhouden van de ontelbare veranderingen in code binnen zo'n omgeving leek op het najagen van een constant verschuivend doelwit. Het gevolg? Ongeziene wijzigingen die een grote impact kunnen hebben op de zichtbaarheid van een website. Stel je een scenario voor waarbij een pagina, zonder dat iemand het weet, een 'no-index' houding aanneemt of een plotselinge verandering in de titel ondergaat. Deze ogenschijnlijk kleine wijzigingen kunnen een ravage aanrichten op de paginaranking en vervolgens het organische verkeer beïnvloeden.

In mijn geval was de boosdoener een gewijzigd robots.txt-bestand tijdens de implementatie in de productieomgeving, waardoor het hele domein werd aangemerkt als 'no-index'. Gevoed door deze ervaring bleef er lange tijd een brandende vraag in mijn hoofd rondspoken: Wat als we verrassingen helemaal konden elimineren? Wat als we deze potentiële SEO-valkuilen zouden kunnen opvangen voordat de code op de live-servers terechtkomt?

Betreed het rijk van geautomatiseerde end-to-end tests

Deze tests, ontworpen om te simuleren hoe een gebruiker of zoekmachine zou reageren op specifieke pagina's op de live site, kunnen onze proactieve redders zijn. Door deze tests te integreren in de CICD-pijplijn, wordt het implementatieproces een lakmoesproef voor potentiële SEO-problemen. Als een test faalt, wat een afwijking van de verwachte uitkomst aangeeft, wordt de hele implementatie gepauzeerd. Er mag pas verder worden gegaan als de onderliggende code is gerepareerd en de test met succes is doorstaan. Geen verrassingen meer achteraf - een revolutie in de manier waarop u de SEO-integriteit van uw website kunt waarborgen.

SEO, zoals we weten, gedijt op details. Elementen zoals canonieke linkelementen, robots meta-informatie, paginatitels, beschrijvingen en href-taal tags spelen een cruciale rol in het indexeringstraject van een website. Als je dit herkent, kun je specifieke tests maken voor elk van deze elementen. Deze tests, die een integraal onderdeel worden van het implementatieproces, onderzoeken automatisch de (live) omgeving bij elke code-update. Een naadloze implementatie betekent dat alle SEO-gerichte tests slagen, wat de zekerheid geeft dat er geen onbedoelde wijzigingen de vitale onderdelen van onze website in gevaar hebben gebracht.

End-to-end tests opzetten voor SEO

Laten we nu onze aandacht verleggen naar het nauwgezette proces van SEO-testen, een essentieel onderdeel van de ontwikkelingsstroom. In het volgende Cypress-codeblok zijn verschillende tests opgenomen die zorgvuldig zijn gemaakt voor SEO-validatie. Met behulp van Cypress, een JavaScript end-to-end test framework, onderzoeken we onze homepage om ervoor te zorgen dat deze voldoet aan cruciale SEO-elementen.

describe('SEO tests for the homepage', () => {
 beforeEach(() => {
  cy.visit('/')
 })


it('should have the robots metatag set to index follow', () => {
 cy.get('head meta[name=robots]').should(
  'have.attr',
  'content',
  'index,follow',
 );
})


it('should have a meta description', () => {
 cy.get('head meta[name=description]').should(
  'have.attr',
  'content').and('contain', 'trust me I`m a bot - beep boop');
})


it('should have a page title', () => {
 cy.get('head title').should(
  'include.text', 'Creating tests for the purpose of SEO')
})


 it('should have links to the same page in a different languages', () => {
  cy.get('head link[rel=alternate]').should('have.attr','href','/fr')
 })
})

1. Beschrijving van de testsuite:

describe('SEO tests for the homepage', () => {

Dit beschrijft een testsuite getiteld “SEO tests voor de homepage” met behulp van de functie beschrijven. Binnen deze suite zijn er meerdere individuele tests gespecificeerd met de it-functie.

1. Voor elke test:

beforeEach(() => {
cy.visit('/')
})

De beforeEach hook wordt voor elke test in de suite uitgevoerd. In dit geval zorgt het ervoor dat de webpagina wordt bezocht cy.visit('/') voordat elke test wordt uitgevoerd. De '/' staat voor de homepage URL.

1. Test 1 - Robots meta tag controleren:

it('should have the robots metatag set to index follow', () => {
cy.get('head meta[name=robots]').should(
'have.attr',
'content',
'index,follow',
)})

Deze test controleert of de metatag met de naam 'robots' in de <head>-sectie van de pagina zijn 'content'-attribuut heeft ingesteld op 'index,follow'.

1. Test 2 - Metabeschrijving controleren:

it('should have a meta description', () => {
cy.get('head meta[name=description]').should(
'have.attr',
'content').and('contain', 'trust me I`m a bot - beep boop')
})

Deze test controleert de aanwezigheid van een metatag met de naam 'description' in de <head>-sectie. Er wordt ook gecontroleerd of het attribuut 'content' de opgegeven tekst bevat.

1. Test 3 - Paginatitel controleren:

it('should have a page title', () => {
cy.get('head title').should(
'include.text', 'Creating tests for the purpose of SEO')
})

Deze test zorgt ervoor dat de <head>-sectie een title-tag bevat en dat de tekst van de titel de opgegeven string bevat.

1. Test 4 - Links naar verschillende talen controleren:

it('should have links to the same page in a different languages', () => {
 cy.get('head link[rel=alternate]').should('have.attr','href','/fr')
 })
})

Deze test controleert op de aanwezigheid van link tags met het attribuut 'rel' ingesteld op 'alternate' in de <head> sectie. Er wordt ook gecontroleerd of het 'href' attribuut is ingesteld op '/fr', wat een link naar de Franse versie van de pagina suggereert.

Bovenstaande tests geven je een idee van hoe je ze kunt instellen en welke onderdelen je kunt testen. Je kunt ze uitbreiden met bijvoorbeeld een test voor een canoniek linkelement, of de <h1>-header die maar één keer aanwezig is.

Tijd en bronnen besparen

Maar het gaat niet alleen om het uitvoeren van tests; het gaat ook om het maken van een systeem van waarschuwingen die zijn afgestemd op specifieke scenario's. In de premium versie van Cypress kunnen waarschuwingen worden aangepast op basis van tags. Deze tags kunnen versienummers of implementatieomgevingen bevatten, die direct linken naar aangewezen Slack-kanalen. Als bijvoorbeeld tests die zijn getagd als “productie” mislukken, kan een melding worden verzonden naar een kanaal waar de ontwikkelaars die op afroep beschikbaar zijn zich bevinden.

Deze proactieve benadering gaat verder dan alleen het uitvoeren van code en strekt zich uit tot de integratie van de ontwikkelworkflow. Als voorstander van betrokkenheid van SEO bij het ontwikkelproces stel ik een paradigmaverschuiving voor. SEO-specialisten zouden, net als Quality Assurance (QA) collega's, tickets toegewezen kunnen krijgen wanneer het vermoeden bestaat dat een taak van invloed kan zijn op de SEO van de website. Gezien de nauwe samenhang tussen websitetechnologie en SEO is bijna elk ticket een grondige SEO-check waard. Deze aanpak biedt SEO-specialisten niet alleen een beter begrip van ontwikkelprocessen, maar opent ook wegen voor gezamenlijke verfijningsprocessen.

Deze holistische benadering van SEO introduceert echter wel extra stappen in het proces, waardoor de time-to-market mogelijk langer wordt. Maar als we de kosten van tijd afwegen tegen de gevolgen van onzichtbaarheid in Google, blijkt de investering de moeite waard. Een zorgvuldige aanpak van SEO tijdens de ontwikkeling beschermt niet alleen tegen problemen na de implementatie, maar vormt ook de basis voor efficiënte, foutloze codering. Uiteindelijk bespaart het tijd en middelen om te voorkomen dat taken opnieuw moeten worden uitgevoerd omdat SEO niet goed is afgestemd.

Tot slot moeten we bepaalde overwegingen onderkennen bij het maken van end-to-end tests. Deze tests, ontworpen om een specifieke pagina te evalueren, vormen een uitdaging bij het handhaven van consistentie in lokale, acceptatie- en productieomgevingen. Hoewel een test idealiter content agnostisch zou moeten zijn, zodat hij toepasbaar is in verschillende omgevingen, zorgt de dynamische aard van content voor complexiteiten. Daarom geven we de voorkeur aan tests die zich richten op structurele en logische elementen in plaats van op specifieke inhoud. Terwijl technische vereisten, zoals ervoor zorgen dat de homepage niet is ingesteld op 'no-index', eenvoudig kunnen zijn, kan het valideren van contentspecifieke details een uitdaging vormen. In dergelijke gevallen ligt de verantwoordelijkheid van de test bij het verifiëren van technische randvoorwaarden en worden inhoudelijke nuances overgelaten aan het oordeel van SEO-specialisten.

En zo,

eindigt het verhaal met een veranderde benadering van website implementaties. We zijn niet langer overgeleverd aan verrassingen na de implementatie, maar architecten van een proces dat zorgt voor een naadloze integratie van nieuwe functies zonder afbreuk te doen aan ons SEO-fundament. Met geautomatiseerde tests die de wacht houden, wordt onze reis door het steeds veranderende landschap van SEO gekenmerkt door vertrouwen, vooruitziendheid en de mogelijkheid om ons eigen verhaal te schrijven.