De recepten van Bits+Bites verhuizen naar Plantproef. Waarom? Lees hier meer over de toekomst van Bits+Bites.
Bits+Bites: 4 weken online review

Bits+Bites is inmiddels 4 weken online. De startfase is altijd spannend: werkt alles goed? Heb ik niets over het hoofd gezien? Tijd voor een terugblik. Naast de wekelijkse blogpost zijn er een aantal visuele en technische zaken die in de afgelopen 4 weken aangepakt zijn. Een aantal verbeteringen hiervan kwam al snel naar voren. Andere verbetermogelijkheden zaten (en zitten) wat verder onder de motorkap. Om deze makkelijker te kunnen vinden heb ik twee tools gebruikt: Google Lighthouse en Google Search Console.

Deze tools helpen je bij het optimaliseren van je website en zo hoger in de Google-ranking te kunnen komen. Hoewel deze blog een hobbyproject is en er nog niet zoveel content op staat, is het toch leuk als je gevonden wordt. Door middel van Search Engine Optimization, of SEO, kun je de kans om op Google gevonden te worden vergroten. Dit kan onder andere door het gebruiken van bepaalde woorden in de tekst en door een aantal technische maatregelen. Ik heb me de afgelopen tijd vooral beziggehouden met het laatste.

Kleine verbeteringen

Naast issues die voortkwamen uit Google Lighthouse en Search Console, waar ik straks verder op in zal gaan, zijn er in de afgelopen 4 weken ook wat algemenere verbeterpunten aangepakt. Dit zijn met name visuele aanpassingen geweest, die ook maar blijven komen ;) Een van de eerste dingen die opviel was dat de ingrediëntenlijst niet goed was uitgelijnd. Wanneer een ingrediënt meer dan één regel besloeg, ging de tweede regel verder onder de bullet, in plaats van onder de bovenstaande tekst. Maar ik was bijvoorbeeld ook ontevreden met de footer en heb de elementen daarbinnen meer ruimte gegeven. Na een paar weken heb ik links naar Bits+Bites op social media toegevoegd, voor kleine schermen in de footer en voor grote schermen in de header. Door deze toevoeging was het logo in de header niet meer netjes uitgelijnd, waardoor daar ook weer een verbeterpunt ontstond. Zo blijf je bezig, maar dat maakt het ook leuk. Elke keer leer ik weer iets nieuws, en de website wordt zo steeds een klein beetje beter.

Google Lighthouse

Ondanks dat deze website ook vooral een heel leuk leerproces voor mezelf is, wil ik uiteindelijk ook graag dat mensen mijn blog komen bezoeken. Een manier om bezoekers te trekken is door gevonden te worden op een zoekmachine als Google. Hiervoor is het wel nodig dat de website op een zo hoog mogelijke positie in de Google-rankings komt. Die positie kun je onder andere bevorderen door je website zoveel mogelijk te optimaliseren. Simpel gezegd wordt Google blij van snelle, goedwerkende en gebruiksvriendelijke websites.

Een tool die je daarbij kan helpen is Google Lighthouse. Dit is een plugin voor Google Chrome die verschillende tests uitvoert om de gebruiksvriendelijkheid van je website te bepalen. In een Lighthouse-rapport vind je vier scores terug: Performance, Accessibility, Best Practices en SEO. Voor elk van de scores wordt een toelichting gegeven, die erg behulpzaam is voor het verder optimaliseren van je website. Zonder het Google Lighthouse-rapport was het een stuk lastiger geweest verbeterpunten te detecteren en prioriteren.

Bits+Bites ontvangt op dit moment de volgende scores:

Lighthouse Performance Score

Op het gebied van Performance, Best Practices en SEO zijn de scores vrij hoog, alleen Accessibility blijft wat achter.

Een voorbeeld is de volgende melding:

Eliminate render blocking resources

De melding render-blocking resources geeft aan dat er een script wordt geladen waardoor het langer duurt om de website zelf weer te geven. In mijn geval komt dit doordat ik het script voor Insights, de tool die ik gebruik om het aantal bezoekers te tellen, binnen de <head>-tag van mijn website had geplaatst. Het script buiten de <head>-tag plaatsen zorgt er meteen voor dat de Lighthouse-score voor Performance van 98 naar 100 gaat.

Naast Performance geeft Google Lighthouse ook een score voor de gebruiksvriendelijkheid, of zoals Google het noemt Accessibility. Momenteel is de score voor Accessibility 81. Deze blijft nog steeds wat achter ten opzichte van de andere scores, maar een vorige versie van Bits+Bites scoorde slechts 65. Dit kwam onder andere doordat afbeeldingen een alt-tag misten en links een toelichting. Door deze punten aan te passen is niet alleen de score omhoog gegaan, maar ook de gebruiksvriendelijkheid van de website verbeterd.

Het belangrijkste verbeterpunt dat nu nog open staat om de gebruiksvriendelijkheid van mijn website nog verder te verhogen is door het toevoegen van zogenaamde aria-tags. Dit zijn tags die het gemakkelijker maken voor mensen met een visuele beperking om de website te bezoeken. Deze tags zullen in de toekomst worden toegevoegd.

Vanuit Best Practices kwam naar voren dat de resolutie van mijn afbeeldingen niet proportioneel waren ten opzichte van de weergave. Neem ter verduidelijking de volgende cijfers:

  • Weergegeven resolutie: 384 x 288
  • Resolutie afbeelding: 480 x 360
  • Aanbevolen resolutie: 768 x 576

De afbeeldingen worden op de pagina weergegeven met een resolutie van 384 x 288. Om de beeldkwaliteit te waarborgen, raadt Google aan om de daadwerkelijke resolutie van de afbeelding een vermenigvuldiging te laten zijn van de weergegeven resolutie. Dit aanpassen zorgt niet alleen voor een hogere score, maar ook voor scherpere afbeeldingen op mijn website.

Het gebruik van Google Lighthouse zorgt niet alleen voor optimalisaties die helpen om hoger in de Google-rankings te komen, maar juist ook voor optimalisatieslagen die je anders misschien niet zo snel zelf had gezien. Na elke aanpassing aan de layout draai ik Google Lighthouse opnieuw, om te zien of er eventueel negatieve neveneffecten zijn ontstaan bij de verandering.

Google Search Console

Terwijl Google Lighthouse vooral focust op de gebruiksvriendelijkheid van je website, geeft Google Search Console inzicht in hoeverre je website goed geïndexeerd wordt.

Een manier om je website gemakkelijker indexeerbaar te maken is door gebruik te maken van Google Structured Data. Hiermee voeg je metadata, of Markup, toe aan een pagina, die het makkelijker maakt voor Google om de inhoud van de pagina te bepalen. Een type Markup wat specifiek voor Bits+Bites interessant is, is de Recipe Schema Markup. Voor Bits+Bites heb ik een Hugo Partial Template gemaakt om zowel de metadata als de bereidingswijze van een recept automatisch om te zetten naar Google Structured Data. Dat ziet er als volgt uit:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "{{ .Title | safeJS }}",
  "author": {
    "@type": "Person",
    "name": "{{ $author }}"
  },
  "image": {{ $images }},
  "datePublished": {{ .Params.date }},
  "keywords": {{ delimit ( union .Params.tags .Params.seasons ) ", " }},
  "description": {{ .Params.description }},
  "prepTime": {{ printf "PT%s" .Params.metadata.prep_time | upper }},
  "cookTime": {{ printf "PT%s" .Params.metadata.cook_time | upper }},
  "totalTime": {{ printf "PT%s" .Params.metadata.total_time | upper }},
  "recipeCategory": {{ delimit .Params.categories ", " }},
  "recipeYield": {{ .Params.metadata.serves }},
  "recipeIngredient": [
  {{- range .Params.ingredients }}
    {{ .display }},
  {{- end }}
  ],
  "recipeInstructions": [
  {{- with .Resources.Get "directions.md" -}}
    {{- with .RawContent -}}
      {{- $replaced := replaceRE "#.*\n" "" . -}}
      {{- $replaced := replaceRE "(\\[\\^.*)(\\n|\\z)(\\s+.*\\n)*" "$2" $replaced -}}
      {{- range split $replaced "\n" -}}
        {{- if not (eq . "") -}}
          {
            "@type": "HowToStep",
            "text": {{ . | replaceRE "\\d\\. "  "" }}
          },
        {{- end }}
      {{ end }}
    {{- end -}}
  {{- end -}}
  ]
}
</script>

Deze partial wordt automatisch aan elke post van het type bite toegevoegd. Google Search Console geeft voor pagina’s die Structured Data bevatten aan of er eventuele problemen mee zijn. In het begin gaf Search Console de melding dat een pagina met Recipe-Markup het veld image miste. Dit ging niet over een pagina met een enkel recept, maar over de overzichtspagina. Door alleen de Markup toe te voegen aan individuele recepten, is dat probleem opgelost. In plaats daarvan heb ik voor de overzichtspagina Markup toegevoegd van het type Carousel zodat duidelijk is dat het om een lijst van items gaat.

Search Console geeft met name aan of er problemen zijn met de Structured Data van een pagina, en niet zozeer tips welke Structured Data toe te voegen. Omdat mijn logo ontbrak in de zoekresultaten en ik wel graag wilde dat deze getoond zou worden, heb ik aan de About-pagina Organization-Markup toegevoegd. Hierin kun je aangeven wat het logo van je website is, zodat deze ook getoond wordt.

Vervolgstappen

De afgelopen weken heb ik het doorvoeren van technische aanpassingen gecombineerd met het ontwikkelen van content. Nu de functionele basis staat wil ik de aandacht meer gaan verschuiven naar de inhoud. Een geoptimaliseerde website is natuurlijk heel mooi, maar met 11 posts verdeeld over 4 Bits en 7 Bites is er niet zoveel te bezoeken. Ook was het niet altijd even haalbaar om genoeg aandacht aan een recept te geven. De recepten die ik tot nu toe heb gepost zijn zeker wel lekker, maar er is natuurlijk altijd ruimte voor verbetering. Door minder tijd te besteden aan de website zelf blijft er meer ruimte over om recepten écht goed voor te bereiden, uit te proberen en eventueel ook aan te passen. Daarnaast kunnen, zoals ik eerder al schreef, ook de foto’s nog wel wat meer extra gebruiken.

Nu vind ik de technische kant van een blog wel gewoon echt heel leuk, dus dat helemaal links laten liggen zie ik ook niet zo zitten. Er blijven oneindig veel aanpassingen, verbeteringen en toevoegingen mogelijk, maar vooralsnog heb ik twee dingen geprioriteerd. De ingrediëntenlijst is nog niet helemaal hoe ik het wil. Ik heb het zo proberen op te zetten om in de toekomst ook de functionaliteit aan te kunnen bieden om de hoeveelheden te kunnen delen of vermenigvuldigen afhankelijk van het aantal eters, maar ik heb het idee dat de huidige implementatie de doorzoekbaarheid niet ten goede komt. Daarnaast wil ik de lijst kunnen opsplitsen. In het recept voor de Hummusschotel was het handig geweest om de lijst in tweeën te kunnen splitsen: een deel voor de schotel en een deel voor de dressing. De komende tijd kan ik er nog even op broeden hoe ik dit precies wil gaan implementeren.

Iets anders om de komende tijd te implementeren vergt wat minder nadenkwerk. Momenteel is het alleen mogelijk om contact te zoeken via Facebook of Instagram. Omdat dit vrij omslachtig is, wil ik een contactpagina met een contactformulier gaan toevoegen.

Terug naar overzicht