Ik ben bezig met het opzetten van een receptenpagina. Gister zag tijdens het webinar over Marketheme een mooi voorbeeld voorbij komen van ReceptPlek.nl met klikbare blokken. Ik ben al een heel eind: ik heb kolommen aangemaakt en een omslagfoto toegevoegd, maar ik krijg het niet voor elkaar om over de foto nog een knop toe te voegen. Iemand een idee hoe ik dat doe? Ik zie vast iets over het hoofd.

Per toeval kwam ik er achter....:) Voor iedereen die het ook zoekt:

Het blok met de tekst in de omslagfoto verwijderen en dan kan je een nieuw blok met de knop toevoegen.

Het is dus gelukt zo? Toevallig ook gisteren in het webinar gevonden :) ?

Je kunt het met een omweg maken via paint (standaard in windows)

Je opent paint, plakt een foto erin

Vervolgens kun je de tekst in een kader maken zoals op de foto's en deze over de afbeelding plakken en saven als jpg.

Vervolgens open je het blok 'kolommen' in MT2,0

En kiest voor 1, 2 of 3 kolommen.

Dan zet je in elke kolom het block 'afbeelding'.

Zo kun je de drie afbeeldingen, zoals je ze hierboven toont, in deze kolommen verwerken.

Centreer de afbeeldingen (is netter naar mijn idee)

Je hoeft dan alleen nog maar de url achter elke afbeelding te plakken en klaar

Ik hoop dat je wat aan deze snel geknutselde weergave hebt ?

Een afbeelding als klikelement zou ik niet aanraden. Google ziet een afbeelding niet als knop. Een button/anchor wel. Voordeel is ook dat dit makkelijker tekstueel aan te passen is.

John, heel erg bedankt voor je uitgebreide antwoord! Ik heb alleen geen paint (Apple), maar daar zal het op die manier ook wel lukken denk ik. Al vind ik het gebruiken van de blokken van Marketheme makkelijker denk ik. Het is inmiddels gelukt! 

Ja, helemaal gelukt! Ziet er super uit! 

@leongotje​ 

Wat is het nadeel dat Google het niet ziet als knop?

Google ziet toch de interne link (URL) die achter deze afbeelding zit . . .

Met een knop en tekst is het iets beter te lezen voor Google, maar een afbeelding met een goede alt-tekst + omschrijving werkt net zo goed. Google ziet een afbeelding die gelinkt is gewoon als een link.

Jullie hebben beide dus gelijk ?

Wel heb ik zelf de methode met de button als voorkeur. Ook meer van deze tijd. En afbeeldingen bewerken in Photoshop of Canva, niet in paint ?

Deels met je eens @youriklijn​, maar ben toch redelijk verbaasd dat je het voeren van een afbeelding met een gefotoshopte knop er in als een valide oplossing ziet. Google geeft zelf ook aan dat waar je kan, je tekst gebruikt voor links. Zie daarvoor ook https://varvy.com/textversusimages.html welke refereert naar de Google Webmaster Guidelines.

Een afbeelding kan inderdaad een ALT tag hebben, maar deze refereert naar wat er te zien is. "Klik hier voor het bekijken van recepten" slaat dus eigenlijk nergens op als ALT tag.

@johnvanaalst​ Google ziet inderdaad wel de interne link, maar het zal me niks verbazen als zij deze link op een andere manier indexeren (categoriseren) voor jouw website. Het nadeel zit hem voornamelijk in de title/tekst die je op een button mee kan geven en niet meer kan beheren.

Ook responsiveness is een probleem. Wanneer je een lange tekst op een knop hebt staan is deze vanwege het terugschalen op mobiel al misschien niet meer leesbaar.

Voor de duidelijkheid; ik zeg dus niet dat een link achter een afbeelding slecht is, tuurlijk kan dit goed werken. Bijvoorbeeld in de vorm van een banner.

In dit voorbeeld wordt er echter een klikelement (knop) omgezet naar een afbeelding. Ik kan me niet voorstellen waar een moeilijkere oplossing, die externe tools vereist en niet meer beheerbaar is een even goede oplossing is als default-behaviour.

Het werkt beide. De methode die jij beschrijft is de beste keus zoals ik al zei maar uiteindelijk is het niet erg als je het met een afbeelding doet. Ik heb het op sommige sites ook nog zo gedaan en merk er geen nadelen van. Sterker nog: Ik heb regelmatig pagina's beter zien presteren na het linken van een afbeelding.

Uiteindelijk gaat het erom dat je bezoekers goed kunnen navigeren en daar zit geen verschil tussen beide methoden.

'make pages primarily for users, not for search engines' - Hier geldt dat als een afbeelding natuurlijker/gepaster is dit doorgaans beter is dan een link.

Ik ben wel met Leon eens dat responsiveness een issue kan zijn op kleinere mobiele devices.

Als je een grotere afbeelding hebt met een visuele (niet echte) knop in het midden, dan gaat die er op een klein device heel klein uit zien. Dat komt de usability niet ten goede.

Aangezien mobiel verkeer vaak > 50% is, dan het daar wel impact hebben.