De nieuwe iconen in Google-zoekresultaten: zo doe je het goed

Google heeft recent een nieuw ontwerp van de mobiele zoekresultaten wereldwijd uitgerold. De twee meest opvallende verschillen zijn dat de betaalde resultaten nu nog moeilijker te onderscheiden zijn van organische zoekresultaten, en dat de organische resultaten nu een icoon tonen naast de website-url. Er is nog niet veel bekend over de kansen die de nieuwe iconen bieden. Hoe kun je de iconen het beste inzetten, zowel technisch als ook als manier om op te vallen?

Met het verminderen van het onderscheid tussen betaalde resultaten en organische resultaten wordt het nog belangrijker om energie te steken in een aantrekkelijk zoekresultaat. Naast de titel en beschrijving, is nu ook het icoon van je website een kans om op te vallen.

Wat voor icoon moet ik kiezen?

Het icoon heeft niet veel ruimte van Google gekregen: in een vierkantje van maar 16 bij 16 pixels wordt het website-icoon getoond. Daarbij valt het op – vooral op retina-schermen zoals een iPhone –dat het icoon niet heel scherp is. Om dat op te lossen zou Google eigenlijk een icoon van 32×32 pixels moeten inladen om zo ook op iPhones scherp te verschijnen. Omdat het icoon niet scherp wordt getoond, beperkt dit de creatieve opties.

“Het icoon wordt onscherp vertoond en dat beperkt de creatieve opties”

De belangrijkste tip is om te zorgen dat je website-icoon herkenbaar is. Goed voorbeeld van aantrekkelijke en herkenbare iconen zijn Instagram, Zalando en Microsoft. Deze komen goed overeen met hun eigen beeldmerk.

Voorkom het tonen van een woord of een complexe afbeelding. De Telegraaf plaatst zijn complexe logo in het icoon, waardoor het er heel priegelig uit gaat zien. Ook NPO doet het zo.

Probeer niet enkel je bestaande bedrijfslogo te verkleinen en vierkant te maken, zoals Bol.com nu heeft gedaan. Dit ziet er rommelig uit. Ook het icoon van Coolblue is onduidelijk doordat de letters niet leesbaar zijn. Uber lost dit op door het icoon als geheel zwart vierkant weer te geven, en Uber Eats heeft als oplossing gekozen voor een pizzaslice als icoon in plaats van het beeldmerk.

Probeer bij het maken van het icoon te werken met de beperkte ruimte die je hebt. Probeer gradients, schaduwen en donkere kleuren te vermijden. Maak ook gebruik van alle ruimte. Nu.nl laat veel lege ruimte om het icoon heen, waardoor het beeld onnodig klein in de zoekresultaten verschijnt.

Mijn ervaring is dat de meest opvallende iconen in de zoekresultaten een opvallende kleur hebben, met daarin een klein herkenbaar symbool. Dat werkt het best.

Hoe wordt het icoon gekozen door Google?

Google maakt een 16×16-icoon van de opties die je website zelf aanbiedt. Hetzelfde icoon geldt voor alle pagina’s op je (volledige) domein, en is niet in te stellen voor afzonderlijke pagina’s. Je kunt het icoon op meerdere manieren aanbieden. Helaas kan je niet specifiek voor de Google-resultaten een icoon aanbieden, maar moet je gebruik maken van bestaande standaarden.

Naar veelvuldig te testen kwam ik op de volgende volgorde uit:

• Google kijkt naar de volledige domeinnaam van de pagina die in de zoekresultaten staat.
• Als eerste voorkeur kiest Google de <link rel=”shortcut icon”> als deze is opgegeven.
• Als tweede keuze kiest Google het grootste formaat uit de <link rel=”apple-touch-icon”> en <link rel=”icon”> opties.
• Wanneer in de html geen icoon-elementen zijn opgegeven, probeert Google de afbeelding op domein.nl/favicon.ico in te laden.
• Als er ook geen favicon.ico afbeelding bestaat, zal Google een generieke paarse wereldbol tonen.

Let dus op, ook het element met ‘apple-touch-icon’ wordt – vaak onverwachts – opgepikt door Google. Deze is bedoelt als homescreen-icoon op iOS en is in veel gevallen niet geoptimaliseerd om tot 16×16 pixels te worden verkleind.

Om te testen hoe Google jouw icoon oppikt, kun je een testtool gebruiken: https://build.amsterdam/icon-test

Als je een verandering doorvoert, kan het soms wel een week duren voordat dit ook zichtbaar is in de zoekresultaten. Houdt hier rekening mee voordat je een nieuw ontwerp live zet zonder goed te testen.

“Hopelijk gaat met een uitrol naar desktop ook de kwaliteit van de iconen omhoog”

Voor nu verschijnen de iconen alleen nog in de mobiele zoekresultaten. Maar het zou me niet verbazen als dit ook naar desktop uitgerold gaat worden. Hopelijk gaat dan ook de kwaliteit van de iconen omhoog, zodat ook daadwerkelijk een representatief icoon geplaatst kan worden in plaats van wat nu mogelijk is.