SEO-tekster kan være svære at få til at se pæne ud på et website. Teksten kan virke forstyrrende for vigtige elementer på websitet og dermed ødelægge brugeroplevelsen og konverteringsraten.
Mange webmasters er begyndt at bruge diverse funktioner til at skjule teksten ved indlæsningen af en underside.
Traditionelt set er dette direkte imod Google guidelines, eftersom dette kunne ses som et ”cloaking” forsøg. Efter mobilvenlighed er blevet et fokus, er det blevet mere acceptabelt at skjule tekst ved indlæsningen, for at øge UX på siderne. Før i tiden, kunne man godt regne med, at skjult indhold blev devalueret af Google såfremt det var skjult for brugeren. Eftersom Google snart går ind i et mobile first index, er det blev fuldt acceptabelt at skjule tekst for at øge brugervenligheden på en mobil enhed.
Bruger- og Googlevenlig kunne eksempelvis se sådan ud:
Crawlability af teksten
Nu hvor Google ikke devaluerer skjult tekst, så er den eneste faldgruppe at Google ikke kan læse teksten. Google har historisk set også haft store problemer med at crawle og indeksere indhold i JavaScript, og det kan stadig give problemer for Google-Bot, den dag i dag.
Det er dog en meget populær løsning at benytte JavaScript til at skifte mellem at skjule og vise tekst på en underside. Leveres teksten client-sided, kan der ske en masse forskellige fejl, som gør at Google kan have problemer med at crawle og indeksere siden. Hvis teksten bliver leveret server-side er der ingen problemer. Teksten vil nemlig blive læst af Google i første request, og kan derfor hurtig blive indekseret. Dette er dog ikke altid helt gnidningsfrit, hvorfor det anbefales at gøre brug af CSS-toggle.
Implementering af CSS-toggle
Til at opbygge skjul/vis-mere funktionen via CSS, kræves 3 divs: en wrapper, en visningen af teksten og en en div til teksten som skjules ved load.
Det kunne eksempelvis se sådan ud i HTML-koden:
<div class=”text-wrapper”>
Denne wrapper holder hele vores tekst felt og kan styles som man ønsker.
<div class=”text-container”>
Denne container holder på teksten som vises til brugeren ved load. Dette er altså denne tekst, som fungerer som en teaser for resten af teksten. Her bør du starte med det absolut vigtigste af teksten.
<div class=”show-text”>
Denne container skjuler teksten ved load. Her indsætter du resten af teksten, som ikke vises ved load. Når brugeren trykker på ”læs mere”, vil denne container blive vist og skubbe resten af sidens indhold ned til fordel for at vise teksten, som brugeren nu har valgt at vil dykke længere ned i.
Til at skifte mellem ”Vis mere” og ”Skjul” benytter vi en stylet input felt af typen checkbox og et label, hvori vi indsætter tekst indhold baseret på hvilken status vores checkboxen er i.
Det kunne se sådan ud i HTML koden:
<input=”cb” type=”checkbox”>
<label for=”cb”></label>
Ovenstående kode bør indsætte lige inden <div class=”show-text”>, eftersom dette element hele tiden bør være synligt.
Styling af CSS-toggle
Ved at indsætte nedenstående styles i din css fil.
Vil CSS-toggle funktionen være færdig.
Herefter kan der alt efter din egen style indstillinger være tilrettelser som skal indsættes for at få det til at se ordentligt ud.
Det gode ved denne løsning er, at det ikke blive benyttet JavaScript overhovedet. Det er derfor en 100% sikker løsning i forhold til Google.