Dit bericht maakt deel uit van Made @ HubSpot, een interne gedachteserie waarmee we lessen trekken uit uitgevoerde experimenten door onze eigen hubspotters.
in de begindagen van het web waren design en SEO niet echt vrienden-websites met goede SEO hadden vaak een zwak ontwerp, terwijl websites met indrukwekkend ontwerp vaak niet geweldig waren voor SEO. In die tijd was er een aantal gekke dingen gaande met betrekking tot het vullen van zoekwoorden in inhoud, slechte website navigatie, en gewoon ol’ verouderd ontwerp.
toen ik bij HubSpot kwam, werkte ik samen met ons SEO-team om online ervaringen te ontwerpen die organisch verkeer naar onze website op grote schaal konden laten groeien. Omdat ik de reputatie kende die SEO heeft onder ontwerpers, was ik sceptisch over het kunnen produceren van boeiende ontwerpen terwijl ik het verkeer en de lead counts leverde waarvoor ik verantwoordelijk was. Ik ben blij met de uitdaging!
gelukkig stond ik voor een verrassing. Door het afgelopen jaar met het SEO-team van ons bedrijf te werken, realiseerde ik me dat de doelen van SEO en design niet op gespannen voet met elkaar hoeven te staan-in feite zijn ze verweven met het anticiperen op en leveren van waarde aan uw klanten.
ontwerpen met SEO in het achterhoofd zorgt uiteindelijk voor een uitstekende klantervaring.
Hier ga ik onderzoeken hoe je SEO-minded design kunt gebruiken om het verkeer te verhogen terwijl je toch een boeiende gebruikerservaring behoudt-maar eerst, waarom is het zelfs belangrijk?
Contents
de Impact van SEO-Minded Design
in de kern is ons team op zoek naar verkeer naar onze website, wat van invloed is op ons vermogen om leads en productaanmeldingen te verwerven.
Ik zie design als een integraal onderdeel van het kunnen leveren van deze KPI ‘ s, omdat we direct invloed hebben op wat bezoekers-en zoekmachines-op een bepaalde pagina zien.
uiteindelijk beïnvloedt het ontwerpen van pagina ‘ s om een doordachte en waardevolle ervaring voor bezoekers te bieden of onze Inhoud wordt weergegeven in een SERP (Search Engine Results Page) of niet.
als gebruikers bijvoorbeeld onze navigatie verwarrend vinden, kunnen ze onze pagina snel verlaten-wat de SERP ’s aangeeft dat onze pagina’ s verouderd zijn of niet overeenkomen met de zoekwoorden bij de hand.
Er zijn tal van andere ontwerpgerelateerde factoren die SEO kunnen beïnvloeden-Bekijk onze Ultieme Gids Voor Google Ranking Factors in 2019 voor meer informatie.
laten we vervolgens onderzoeken hoe uw team SEO-minded design kan oefenen.
hoe SEO-Minded Design te oefenen
Er zijn een paar concepten die SEO en design samenbinden die nuttig zijn bij het balanceren van de beste praktijken van beide gebieden, en Ik wil er vandaag vier in het bijzonder behandelen. Laten we erin duiken.
1. Vergeet de mobiele ervaring niet.
Google is overgestapt op mobile-first indexing, wat betekent dat het de mobiele versie van uw website gebruikt voor indexering en ranking.
de gekke realiteit is dat Google misschien nooit een desktopversie van uw website te zien krijgt.
Deze wijziging maakt het noodzakelijk om ervoor te zorgen dat de kwaliteit van de inhoud niet wordt aangetast bij het ontwerpen voor kleinere schermformaten. Inhoud verbergen op mobiel, maar weergeven op desktop is als het knippen van de vleugels van een vogel-crawlers (de bots die het web doorzoeken naar nieuwe inhoud) zullen niet in staat zijn om de breedte van uw website te verkennen en voldoende context te krijgen met betrekking tot de waarde die uw inhoud biedt.
in de praktijk betekent dit dat uw sitenavigatie volledig beschikbaar moet zijn voor mobiele gebruikers.
bovendien wilt u ervoor zorgen dat de linkstructuur op mobiel niet dramatisch verschilt van de navigatieopties die op desktop worden aangeboden. Bovendien moeten tekstinhoud en afbeeldingen beschikbaar blijven om ervoor te zorgen dat crawlers voldoende context hebben om te begrijpen waar uw website over gaat.
Ik zal de eerste zijn om toe te geven dat het verminderen van inhoud voor mobiel een slechte gewoonte is die ik eerder in mijn carrière heb ontwikkeld, en het is echt moeilijk om te doorbreken.
om responsive design beter te omarmen, heb ik mijn mindset verlegd van het proberen om de ervaring over alle touchpoints te repliceren, naar het leveren van de best mogelijke ervaring op elk platform.
Dit geeft u de vrijheid om conversiestromen per platform te optimaliseren, waarbij u gebruik maakt van wat u weet over de behoeften van uw gebruikers wanneer ze uw site bezoeken via verschillende apparaten.
ter ondersteuning van mobile-first indexering praktijken, zoekmachines ook zwaar wegen de mobiele vriendelijkheid van uw website. Als gevolg hiervan moet u goed op de volgende dingen letten bij het ontwerpen van uw site voor mobiele apparaten:
- Grootte van de tappable areas: zorg ervoor dat er genoeg ruimte is voor een persoon om met zijn vingers op een link te tikken. Tikdoelen van ten minste 48 pixels worden door zoekmachines zoals Google als standaard beschouwd.
- leesbare lettergroottes gebruiken: tekstgroottes moeten worden geschaald om de leesbaarheid op elk apparaat te garanderen. Het gebruik van lettertypen die te klein zijn, zal resulteren inboetes van zoekmachines.
- Afbeeldingsbestandsgrootte: probeer bij het exporteren van afbeeldingen en andere media-inhoud de bestandsgrootte voor web te optimaliseren, zodat het niet eeuwig duurt om te laden. De aandachtsspanne van de gebruiker is kort en als pagina ‘ s te lang duren om te laden, zullen potentiële bezoekers uw site verlaten.
We gebruikten deze aanpak bij het bouwen van HubSpot ‘ s business Templates directory, die in Maart 2019 werd gelanceerd. De inhoud die we aanbieden is in de vorm van bewerkbare documentsjablonen, die gebruikers kunnen downloaden en gebruiken. Aangezien de sjablonen worden aangeboden voor Microsoft Word, Excel en PDF-meestal desktoptoepassingen-realiseerden we ons dat gebruikers waarschijnlijk niet veel waarde zouden vinden in het downloaden van de sjablonen naar hun mobiele apparaten.
op mobiel besloot ik prioriteit te geven aan de optie om een link naar zichzelf te e-mailen om de sjabloon later te downloaden, zodat gebruikers hun doelen kunnen bereiken, ongeacht het platform waarop ze zich bevonden.
de Geringe wijzigingen in de te downloaden ervaring tussen desktop en mobiel maken van een geoptimaliseerde ervaring voor elk platform. Deze schermen laten zien hoe e-mail naar self de primaire optie is op mobiel, terwijl downloaden prioriteit heeft op desktop.
Ik heb ook een zeer eenvoudige wijziging aangebracht in mijn workflow om ervoor te zorgen dat ik in elke fase van het ontwerpproces een responsief ontwerp overweeg. Wanneer ik een nieuw bestand instel in Sketch (de hoofdsoftware die ons team gebruikt voor interfaceontwerp), maak ik altijd twee “artboards” naast elkaar-een voor desktop en een voor mobiel.
terwijl ik een scherm voor desktop ontwerp, schik ik tegelijkertijd dezelfde inhoud naar de grootte van het mobiele scherm zonder iets te verwijderen, en maak vervolgens aanpassingen die nodig zijn op basis van de mobiele context. Het is niet echt een mobile-first aanpak, maar het is een stap in de goede richting.
Een voorbeeld van een bestand instellen voor een responsive design aanpak
hoe beter uw navigatie de manier waarop uw website is gestructureerd weergeeft, hoe beter crawlers in staat zullen zijn om inhoud te ontdekken en te begrijpen waar uw website over gaat.
Maar duidelijke navigatie is niet alleen voor bots-het helpt bezoekers ook om door uw website te navigeren en interessante, relevante inhoud te vinden. Denk na over je eigen ervaring met het voor het eerst bezoeken van een website. Misschien heb je een artikel op Google gevonden dat je leuk vond om te lezen en wil je meer artikelen van die Auteur zien. Een goed georganiseerde website maakt die inhoud direct beschikbaar voor u.
u bent waarschijnlijk bekend met verschillende modules die vaak worden gebruikt om inhoud te organiseren: “gerelateerde” feeds, “mensen zoeken ook naar”, “mensen hebben ook gekocht …” – deze functies worden vaak gebruikt op e-commerce en directory websites. Hoewel ze gimmicky lijken, kunnen ze waardevol zijn voor klanten om de volgende redenen:
- versterkt de categorisering van inhoud. Bezoekers leren hoe u categorieën op uw website definieert en het type inhoud dat bij elk hoort. Dit stelt hen in staat om specifieke inhoud te vinden zonder hulp.
- bevordert de ontdekking van relevante inhoud. Dit stelt websites in staat om waarde te leveren voor klanten die verder gaan dan hun oorspronkelijke vraag, en moedigt klanten aan om ons te zien als goed geïnformeerde, nuttige informatie. Wanneer ze in de toekomst inhoud van ons zien, zullen ze ons waarschijnlijk meer vertrouwen.
- helpt bij de besluitvorming. Deze componenten verminderen de cognitieve belasting van het moeten herkennen versus terugroepen van gegevens, en klanten voelen zich gerustgesteld dat ze niet alleen zijn. Het is echter belangrijk om deze gegevens verstandig te gebruiken om nuttig te zijn-en om er geen misbruik van te maken.
andere UI-componenten zoals broodkruimelnavigatie en inhoudsopgave hebben misschien een slechte reputatie in de ontwerpwereld, maar ze zijn nuttig voor het gebruik van complexe informatiearchitecturen.
Deze onderdelen helpen manifest hoe uw website is georganiseerd — en laat crawlers en bezoekers gemakkelijker hun weg te vinden in uw website.
vanuit een gebruikersperspectief werkt duidelijke navigatie als verkeersborden, die je meer vertellen over waar je bent, waar je bent geweest en waar je naartoe gaat. Er is niets erger dan je toevlucht te moeten nemen tot de knop terug in je browser omdat je niet weet waar je anders moet klikken.
3. Geef mensen wat ze willen.
hoe vaak heb je Google gezocht naar antwoorden en op een link geklikt die je andere inhoud gaf dan je verwachtte? We kunnen het er waarschijnlijk over eens zijn dat het krijgen van inhoud die onze vraag niet beantwoordt een frustrerende ervaring is en kan resulteren in een verlies van vertrouwen.
zoekmachines willen kwaliteitsinhoud aanbieden die de vragen beantwoordt die ze ontvangen-waardoor het ontwerpen van pagina ‘ s met relevante inhoud een van de belangrijkste onderdelen is om sterke SEO mogelijk te maken. Immers, wanneer zoekmachines geen kwaliteitsinhoud leveren, verliezen ze klanten en inkomsten als gevolg.
begrijpen wat waardevol zal zijn voor bezoekers komt van het begrijpen van hun intentie achter een query. Vertrouwd zijn met gebruikersdoelen legt de basis voor u om inhoud te creëren die waarde zal leveren.
er zijn een paar eenvoudige manieren om meer te leren over gebruikersdoelen (behalve dat ik hun gedachten kan lezen) die ik graag regelmatig oefen:
1) Keyword Research
Keyword research onderzoekt de termen die mensen typen in zoekmachines, het aantal keren dat het wordt gezocht in een bepaalde periode (meestal maandelijks) en een paar andere statistieken die u helpen de waarde en moeilijkheid te bepalen van het nastreven van een zoekmachine ranking voor die term.door de volledige zoekopdrachten te onderzoeken die mensen zoeken, kunt u meer te weten komen over de kennis van de gebruiker van het zoekwoord en de intentie achter hun zoekopdracht. Het afstemmen van de specificiteit van uw inhoud op de verwachtingen van de gebruiker is van cruciaal belang om ervoor te zorgen dat u waarde levert.
bijvoorbeeld, hier is een voorbeeld om te overwegen:
In het eerste voorbeeld, iemand zoekt naar “business plan voorstel sjabloon downloaden” zou verwachten van een pagina die stelt hen in staat om direct te downloaden van een business plan template, en impliceert een hoge mate van specificiteit en de intentie — deze klant is waarschijnlijk in de overweging fase van hun zoektocht, en waarschijnlijk al weet wat een business plan voorstel is en hoe het te gebruiken.
aan de andere kant weet iemand die een query typt zoals “business plan proposal template examples” misschien niet wat er in een goed businessplan past en misschien geïnteresseerd is in een artikel op hoog niveau dat hen meer context geeft, evenals een paar verschillende opties.
Keyword onderzoek dient ook als een goede lakmoestest voor hoe goed uw exemplaar resoneert met klanten. U kunt statistieken zoals maandelijks zoekvolume (MSV) gebruiken om te zien welke zoekwoorden gewoonlijk in zoekmachines worden getypt. Dit kanu helpen begrijpen hoe klanten verwijzen naar relevante concepten in de echte wereld. Je zou dit kunnen overwegen bij het afwegen van de kosten en voordelen van het gebruik van een algemeen bekende term versus het onderwijzen van een nieuwe.
Het is echter belangrijk om de beperkingen van het gebruik van zoekwoordonderzoek te begrijpen wanneer u het in uw proces opneemt. Zoekwoordonderzoek laat zien waar gebruikers Naar zoeken, maar vertelt je niet waar ze eigenlijk naar op zoek zijn.
mensen die naar dezelfde term zoeken, kunnen op zoek zijn naar heel verschillende dingen, en dat hangt sterk af van de context die hen ertoe heeft aangezet een query in te voeren. U kunt zoekwoordonderzoek gebruiken om u te helpen een hypothese te vormen over de intentie van de gebruiker, maar u kunt er GEEN conclusies uit trekken over causaliteit. Het gebruik van zoekwoordonderzoek kan een krachtig hulpmiddel zijn, maar alleen als u de bevindingen voor de hand neemt en het goed gebruikt.
2) Empathieoefening
zodra ik de woorden heb bekeken waarnaar mensen op zoek zijn, begin ik de mogelijke bedoeling achter hun zoekopdracht te analyseren. Voor elke pagina of asset die ik maak, maak ik een korte lijst met zoekwoorden, doelen en inhoud die een bezoeker waardevol kan vinden om zijn doelen te bereiken.
Deze eenvoudige empathieoefening helpt me de context te overwegen waarin mensen op bezoek zijn en de modules in kaart te brengen die waarde zouden creëren voor gebruikers.
Hier is een sjabloon om u te helpen de slag te gaan met je eigen inlevingsvermogen oefening:
Voor de Business Template heb ik een lijst gemaakt dat er iets zoals dit:
De context achter de zoekopdracht van de gebruiker kan een enorme impact op hun verwachtingen voor uw content — dus tijdens het uitvoeren van de empathie oefening, het is belangrijk om te weten dat je niet zou vastleggen om de use case scenario.
Ik gebruik deze empathieoefening om een hypothese te vormen over de doelen van een gebruiker en vervolgens te bepalen welke inhoud het meest waardevol kan zijn op die pagina. Dit stelt een benchmark van de inhoud die moet worden opgenomen, waardoor ik wireframe modules die essentiële inhoud zal presenteren.
We kunnen op deze basis bouwen en inhoud toevoegen die oru marketingteam of belanghebbenden mogelijk nodig hebben, zolang het klanten niet verhindert de meeste waarde te oogsten.
3) gebruikersonderzoek en-testen
gebruikersonderzoek of-onderzoek is een ander nuttig hulpmiddel bij het evalueren van de veronderstellingen die u in een project opneemt. Het is ongelooflijk hoe vaak uw aannames afwijken van de werkelijke waarden die uw klanten hebben, dus het is van cruciaal belang om waar mogelijk hun directe inzichten te krijgen.
in ons team hebben we zowel gemodereerde als niet-gemodereerde gebruikerstests in ons arsenaal opgenomen met behulp van programma ‘ s zoals Validately en Respondent, die je beide in staat stellen gebruikers te werven en te screenen om je ontwerpen te testen.
wanneer deze drie methoden samen worden gebruikt, kunnen ze u een beter begrip geven van de context achter de zoektermen van mensen, evenals de doelen waarvan ze verwachten dat uw inhoud hen helpt te bereiken.
4. Best practices voor toegankelijkheid toepassen.
het toegankelijk maken van je content voor alle bezoekers is een belangrijke maar vaak over het hoofd gezien stap in het ontwerpproces. Er zijn veel algemene verklaringen waarom toegankelijkheid geen prioriteit heeft gekregen-helaas klinken sommige van deze misschien bekend:
“toegankelijk ontwerp is niet zo visueel interessant en ziet er saai uit.”
” het kost tijd om iets voor iedereen toegankelijk te maken.”
” Het heeft slechts invloed op een kleine groep van onze klanten.”
de waarheid is dat toegankelijkheid niet zo moeilijk is, en het is onaanvaardbaar om excuses te maken waarom we het niet kunnen doen. Het toegankelijk maken van inhoud heeft invloed op SEO omdat het een betere gebruikerservaring creëert en zoekmachines helpt te begrijpen waar uw inhoud over gaat.
als het ontmoedigend klinkt, zijn dit een paar eenvoudige dingen die u kunt doen om de algehele klantervaring te verbeteren en uw SEO positief te beïnvloeden:
1) Voeg beschrijvende alternatieve tekst toe.
Alt-tekst helpt mensen met een visuele beperking te begrijpen waar niet-tekstuele inhoud op uw website over gaat. Technologie zoals schermlezers worden gebruikt om mensen met een visuele beperking te helpen communiceren met websites, en deze tools lezen de alternatieve tekst die u opgeeft wanneer deze een afbeelding, video of andere niet-tekstuele inhoud tegenkomt.
bovendien wordt in gevallen waarin afbeeldingen niet kunnen worden geladen (zoals trage of onstabiele internetverbindingen) alternatieve tekst weergegeven in plaats van de afbeelding, zodat gebruikers nog steeds de inhoud kunnen begrijpen die ze niet kunnen zien.
mensen zijn niet de enigen die alt-tekst gebruiken-zoekmachines doen dat ook. Crawlers gebruiken alt-tekst voor twee dingen:
- begrijp waar een afbeelding over gaat. Het vastleggen van het onderwerp en het doel van uw afbeelding in de alternatieve tekstbeschrijving helpt zoekmachines uw afbeelding te rangschikken in afbeeldingszoekopdrachten en extra verkeer naar uw website te genereren.
- begrijp waar je website over gaat. Dit helpt zoekmachines beter te begrijpen waar uw website over gaat en de waarde die deze biedt aan gebruikers, wat van invloed is op de SERPs waarop uw pagina wordt weergegeven.
ontwerpers, ontwikkelaars en marketeers kunnen samenwerken om ervoor te zorgen dat beschrijvende alternatieve tekst op alle inhoud wordt geïmplementeerd. Samenwerken en elkaar verantwoordelijk houden voor deze praktijk kan verkeer naar uw site leiden en ons helpen een inclusieve ervaring voor iedereen te creëren.
2) Maak een duidelijke inhoudelijke hiërarchie.
het gebruik van headers om een consistente visuele hiërarchie tot stand te brengen, maakt inhoud beter verteerbaar voor zowel mensen als crawlers. Het is moeilijk voor mensen om lange stukken tekst te lezen, dus headers spelen een belangrijke rol bij het bieden van gebruikers een manier om snel te scannen en hun weg te vinden door lange stukken inhoud.
Headers moeten visueel onderscheiden, duidelijk en beschrijvend zijn en lezers (en crawlers) precies vertellen wat er voor ons ligt.
3) schrijf beschrijvende anchor tekst.
het is relatief gebruikelijk om knoppen en CTA ‘ s te zien die zeggen “Lees meer” of “meer leren”. Helaas is dit niet erg nuttig voor bezoekers of bots om te begrijpen wat ze moeten verwachten te zien.
wanneer CTA ‘ s en hyperlink copy effectief worden gebruikt, moeten ze helpen bij het instellen van de verwachting van de bezoeker over waar een gekoppelde pagina over gaat, waardoor ze kunnen evalueren of het voor hen waardevol zou zijn om de pagina te bezoeken.
ankertekst wordt ook gelezen door schermlezers voor bezoekers met een visuele beperking, en het gebruik van links die niet beschrijvend zijn, kan vooral verwarrend zijn voor gebruikers die niet de visuele context hebben van waar uw CTA zich bevindt.
ontwerpen met SEO in gedachten zal u helpen een sterkere, betere klantervaring te creëren. Uiteindelijk is het beste wat je in elke situatie kunt doen, de klant op de eerste plaats zetten.
door een gezamenlijke, opzettelijke benadering van ontwerp en SEO te gebruiken, kunnen we een meetbare impact voor onze bedrijven genereren en meer inclusieve ervaringen voor iedereen creëren.