Display: none;

Derfor bør du aldrig bruge display: none;!

display: none;

Det er en dårlig idé at bruge display: none; når du skal fjerne indhold på din side - i hvert fald når snakken falder på SEO/søgemaskineoptimering.

"Hvorfor det?", spørger du så, og tak for spørgsmålet. Hæng på, så skal jeg fortælle dig det.

Først vil jeg dog lige fortælle hvorfor jeg har lavet denne side.

Du skal bare bruge display: none;

Forestil dig du læser med på et forum, eller en facebook gruppe som omhandler WordPress, hjemmesider, kode eller lignende.

Du ser nogen har stillet et spørgsmål om hvordan du fjerner dit eller dat, fordi de ikke vil have det vist.

Så går der ikke længe inden mangt en amatørudvikler, som har fået lidt forstand på CSS, foreslår: "Du skal bare bruge display: none;".

Men det er sjældent en god løsning!

Derfor vil jeg gøre op med alle disse udsagn, og forklare hvad du i stedet skal gøre.

Hvad gør display: none;?

CSS kode fortæller din browser hvordan alt skal se ud. Hvad farve teksten har, om der skal være en baggrundsfarve osv.

Hver element på din side, f.eks. billeder, tekst(afsnit), overskrifter osv., har nogle attributter, som kan kodes. En af disse attributter, hedder "display".

Display kan angives til flere forskellige ting, f.eks.

  • Inline (fortæller elementet skal behandles som om det indskydes i en linje)
  • Block (fortæller at elementet skal have sin egen boks rundt om indholdet)
  • Table (fortæller at elementet skal behandles som en tabel)
  • Osv.

Men display kan også angives til "none". Det betyder at elementet ikke vises på siden, og brugeren derfor ikke kan se indholdet.

Derfor er det dumt at bruge til at fjerne indhold

Display: none; fjerner rigtigt nok indholdet, så brugeren ikke kan se det, men alt indholdet ligger stadig i kildekoden. Det betyder at f.eks. bots fra søgemaskiner, stadig kan læse indholdet fuldt ud som om det var der normalt.

Er det ikke lige meget?

Mjaoh, måske. Hvis det er ligegyldigt indhold i mindre mængder, så kan det måske gå an.

Hvad er risikoen?

Bruger du display: none; til f.eks. at fjerne links til kategorier, forfatterarkiver eller lignende, så fjerner du dem kun visuelt, og Google m.fl. kan stadig finde dette indhold, selvom du prøver at skjule det.

Det er både misvisende, og sender et dårligt signal overfor søgemaskinerne.

Gøres det i stor stil, eller f.eks. på billeder og lignende indhold, så vil det heller ikke virke efter hensigten, da billederne stadig skal loades, for ikke at blive vist.

Er der andre lignende faldgruber?

Hvor er det godt du spørger... Der findes flere "hacks" og lignende attributter, som fysisk skjuler noget indhold, f.eks.:

  • visibility: hidden;
  • position: absolute; z-index: -1;
  • fysisk flytte indholdet udenfor skærmen med position: absolute; eller margin: -9999999; eller lignende

Fællesnævneren for disse er stadig, at indholdet findes i koden, og dermed ikke fjernes, men blot skjules visuelt.

Det bør du gøre i stedet

Ønsker du at fjerne noget fra dit site, bør det oftest fjernes helt fra koden. Det gøres typisk ved at redigere i filer med kode, så det kan godt være du skal snakke med din udvikler, eller henvise ham/hende hertil.

Da det gøres meget forskelligt fra system til system, så er det svært lige at forklare hvordan. Mange kender dog systemet WordPress som er noget af det mest brugte. I dette system gøres det oftest via temaet.

Arbejder du med WordPress temaer, vil jeg anbefale du laver et Child Theme, og redigerer i dette, så dine rettelser ikke overskrives ved opdatering. Så er det ellers blot at fjerne det kodestykke, som generer det du vil have fjernet.

Hvornår er det OK at bruge display: none;?

I mange tilfælde er det OK at skjule noget med display: none; F.eks. fordi du vil animere en fade-in effekt, vise en menu når der peges på den eller når du har et specifikt print CSS som viser siden i en udskriftsvenlig version (hvor grafik o.l. er valgt fra).

Det kan også bruges til f.eks. at informere brugere med gamle browsere, som ikke renderer moderne CSS rigtigt, om at de bruger en gammel browser. Denne besked er så "none" for alle andre.

Tak for du læste med

Tusind tak for du holdt ud så længe, og pløjede dig gennem teksten. Jeg håber du vil tage del i min mission, og henvise til siden her, hver gang nogen opfordrer til at bruge display: none;.

Og hey, du kan jo lige se hvordan det visuelt ser ud med display: none; med knappen i bunden. Men husk nu koden stadig indeholder alt ;)







/Slut
Udgivet af: WPtutorials.dk

Display: none;?