Billed-SEO: 9 vigtige elementer

1. Generelt om billed-SEO

Vi lægger tit alle kræfter i at få vores SEO-vigtige URL'er op i SERP'en. Men som nævnt er det vigtigt at optimere billederne for at ranke højere i søgeresultaterne i Google Billeder og øge chancen for at trække organisk trafik den vej.

Googles bots kan ikke »læse« billeder. De er bygget til at læse kode på et website, ikke en bestemt animation eller et bestemt billede. Derfor skal vi give dem den information ved at følge et enkelt sæt SEO-retningslinjer. Det afgør, om botsene kan tolke den information, vi prøver at vise, vurdere billederne og ranke dem højere i Google Billeder.

2. Billedstørrelse og filstørrelse

To af de vigtigste faktorer, når du optimerer billeder, er filstørrelse og billedstørrelse.

Filstørrelse:

Tunge billeder på dit website kan øge indlæsningstiden for den URL, de ligger på, og dermed for hele sitet. Indlæsningstid er en af de faktorer, der påvirker de organiske placeringer på desktop og mobil, og derfor er billedoptimering helt afgørende.

Værktøjer til at skære ned på filstørrelsen:

Der findes mange værktøjer til at gøre billeder lettere. Selv uden professionelt billedsoftware som Photoshop eller Illustrator kan vi bruge online platforme som:

• ›

  ImageOptim eller TinyJPG, der skærer ned på filstørrelsen uden at gå på kompromis med kvaliteten.

• ›

  Website Speed Test Image Analysis Tool gør det let at hente nye billedformater.

Størrelse:

Derudover er det vigtigt at lægge flere billedstørrelser op på hvert site, så den mest passende bliver vist alt efter enheden. Der findes plugins, der tilpasser billedstørrelsen, men i praksis er den løsning ikke altid den bedste. Grunden er, at et billede på 1000 px for eksempel kan skaleres til 400 px, så det fylder mindre visuelt, men filen vejer stadig det samme som et billede på 1000 px og går ud over sitets performance og hastighed.

Værktøjer:

Det vigtigste, når du vælger billeder, er at kende den platform, du arbejder på. Arbejder vi for eksempel i WordPress, kan vi bruge SmushIt, et plugin, hvor vi kan sætte en maksimal bredde og højde for billederne, før de bliver skaleret, komprimeret og lagt op på serveren.

Arbejder vi derimod på en platform med vores egen kode, skal vi bygge en manuel eller automatisk proces, der optimerer billederne, før de ryger op på serveren.

3. Et SEO-venligt billedformat

Lige nu er den bedste måde at gemme billeder til nettet på at bruge et af de næste fire formater:

• ›

  WebP: Det kan skære 25-35% af et billedes oprindelige vægt. Det er et af de mest anbefalede formater i øjeblikket, og selvom nogle browserversioner stadig ikke kan læse det, er det et af de formater, der giver mest komprimering uden at gå ud over billedkvaliteten.

• ›

  PNG: Det bedste valg til billeder med få farver og gennemsigtig baggrund. Det bliver brugt meget til logoer.

• ›

  JPG: Formatet, du skal bruge til fotografier og billeder i det hele taget. Der går lidt kvalitet tabt ved komprimering, men farver og toner bliver, som de er.

• ›

  GIF: Bruges til animationer og billeder i bevægelse.

Anbefalinger:

• ›

  Brug altid det billedformat, der passer bedst på filstørrelse og kompatibilitet.

• ›

  Komprimer altid billeder, enten manuelt eller med et automatisk værktøj.

• ›

  Har sitet mange ikoner, så saml dem i ét billede med CSS Sprites, så antallet af serverkald falder og sitets performance bliver bedre.

4. SEO-felter på billeder

Hvert billede kommer med et sæt felter, der giver søgemaskinernes robotter (og brugerne, selvfølgelig) bedre tilgængelighed.

Billednavn

Billednavnet er filens navn. Det er billedets titel, og den bruger bindestreger og underscores mellem ordene. Det er en god idé at have søgeordet med, som vi gerne vil ranke billedet på, og undgå usædvanlige tegn (som "ñ", "?" eller bogstaver med accent, "á", og så videre)

Det er også en god idé at droppe forholdsord og andre uvæsentlige tegn i billednavnet, så URL'en bliver kortere og så SEO-venlig som muligt.

Title

Det er den tekst, der dukker op, når du holder markøren over billedet. Vi anbefaler at udfylde den for at give billedet en semantisk titel med det søgeord, vi gerne vil ranke på.

Den kan være den samme som alt-teksten, men det tager ikke lang tid at skrive attributten om med små ændringer.

»Alt«-attributten

Det er det vigtigste element, for det er det, Google læser. Den skal indeholde det hovedsøgeord, vi gerne vil ranke vores URL på, og den skal holdes i korte beskrivelser.

Syntaksen ser sådan ud:

<img src=”BILLEDLINK” alt=”ALT-BESKRIVELSE AF BILLEDET” />

Eksempel på et optimeret billede:

Lad os se, hvordan hvert felt kunne optimeres til dette billede ud fra søgeordet "ciberseguridad pymes", der har et månedligt søgegennemsnit på 90 (i Spanien):

Filnavn:

• ›

  Forkert: 04745892595295.jpg

• ›

  Rigtigt: ciberseguridad-pymes.jpg

Title: Consejos de ciberseguridad para empresarios y pymes. (Råd om cybersikkerhed til erhvervsfolk og små virksomheder.)

Alt-tekst: Ciberseguridad para pymes y empresarios: consejos. (Cybersikkerhed til små virksomheder og erhvervsfolk: råd.)

Sådan optimerer vi alle felter og får et billede, der er klar til at slås om de øverste pladser. Optimerede billeder er selvfølgelig ingen garanti for, at de kommer først, men det er første skridt på vejen :)

5. Semantisk kontekst

Google regner de billeder for mest relevante, som passer til indholdet omkring dem. Derfor er det en god idé at have relateret tekst med. Sådan udvider vi den samlede semantiske kontekst på URL'en.

6. Et sitemap kun til billeder

For at hjælpe Googles bots med at crawle vores billeder mere effektivt er det nødvendigt at lave en sitemap.xml kun til den slags filer. I WordPress kan den laves automatisk med værktøjer (plugins) som Yoast eller RankMath.  Arbejder du ikke i WordPress, kan du bruge andre værktøjer eller manuel programmering (crawl af URL'er).

Herunder ser du et eksempel på et sitemap med to billeder i artiklen:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>

Nogle af de tags, der bliver brugt mest, når man laver et billedsitemap, er:

→ Billedets titel

→ URL'en eller stien, hvor filen ligger

→ Billedteksten

→ Licenstype

→ Oplysninger om geolokalisering

• ›Dokumentation: Der ligger en stor mængde information på Googles blog om billedsitemaps med eksempler, vejledninger til implementering og mere.

Når implementeringen er på plads, kan vi tjekke status for indekseringsdækningen i Search Console.

7. Lazy loading af billeder (indlæsning efter behov)

Billeder er nogle af de mest brugte ressourcer på websites, for »et billede siger mere end tusind ord«, som man siger. Derfor bliver det visuelle på ethvert website bygget omhyggeligt op med de multimedieelementer. Men optimerer man dem ikke, kan det gå ud over brugeroplevelsen og sitets indlæsningstid. Derfor er lazy loading en god idé.

Med lazy loading bliver billeder først indlæst, når de kommer frem på skærmen. Ligger de for eksempel langt nede på siden, hvor de endnu ikke er synlige på enhedens skærm, bliver de ikke hentet, før brugeren scroller ned. Det skærer kraftigt ned på antallet af HTTPS-kald og på indlæsningstiden, og det kan Google godt lide.

Plugins til lazy loading i WordPress

Styrer du websites på den platform, er der en række plugins, der er værd at kigge på, hvis du vil optimere billeder med lazy loading. Husk at tjekke, om det tema, du har installeret, har funktionen med. Er det ikke tilfældet, er her et par interessante:

• ›

  BJ Lazy Load: let at installere og sætte op, og et af de mest populære værktøjer med mere end 90.000 installationer. Med det kan du skalere billeder, så de passer til forskellige skærmstørrelser.

• ›

  Lazy Load by WP Rocket: enkelt og let at sætte op (mest fordi det ikke giver mange valgmuligheder), og fordelen ved det plugin er, at det ikke bruger et JavaScript-bibliotek som jQuery.

8. Brug et CDN til billeder

Et CDN (Content Delivery Network) er en række servere fordelt over hele verden, der leverer et websites indhold fra cache alt efter, hvor den, der beder om det, befinder sig. Takket være det netværk af hosting er det den server, der ligger tættest på, som leverer en kopi af det website, der bliver bedt om.

Et CDN hjælper altså vores URL'er med at blive hentet hurtigere, skærer ned på sitets indlæsningstid og løfter de organiske placeringer.

Bruger vi et CDN (for eksempel Cloudflare) til at vise billeder, bliver de hentet og vist hurtigere. Det enkle flow forbedrer vores SEO direkte.

9. Andre ting at være opmærksom på

Billeder med SEO-værdi, altså dem vi gerne vil ranke højere, skal ligge i URL'ens kildekode. Dem, der er lagt ind som background i CSS, kan Google ikke se, for den kan ikke afkode den slags stylesheets.

Derudover er der andre detaljer, du ikke må springe over, når du optimerer billeder:

• ›

  Exif: Med hvert billede bliver der gemt en række attributter, blandt andet hvornår billedet er taget, og andre data, der er relevante for fagfolk. Men de oplysninger har ingen SEO-værdi og fylder bare. Sletter du dem, kan det hjælpe med at optimere billederne og gøre dem lettere.

• ›

  »longdesc«: Den attribut bliver ofte glemt, men den kan være interessant at bruge på vores billeder. Det er en lang beskrivelse af billedet.

• ›

  Links: Linkbuilding spiller en helt central rolle for den organiske vækst på vores sider, men også på vores billeder. De kan nemlig også linkes og dermed få større genkendelse i søgemaskinerne.

Mangler der et vigtigt råd? Vi vil meget gerne høre fra dig. Skriv en kommentar nedenfor, og del endelig din viden!