Wat is de alt tag of title tag bij foto's, afbeeldingen en plaatjes

Zodra je op een webpagina afbeeldingen gaat plaatsen moet je rekening houden met de zoekmachines. Technisch gezien bestaat een afbeelding of een foto uit een paar elementen:

naam van de afbeelding
naam van de map waar de afbeelding in staat
de alt tag van een afbeelding
eventueel een title tag

De naam van een afbeelding

In dit voorbeeld gaan we ervan uit dat je op je site een verhaal wilt schrijven over James Bond films. En om de pagina leuk aan te kleden plaats je een rechten-vrije foto. Die foto heb je gevonden en heet jb_dieanother_small_1234.jpeg

Daar begint je eerste stap in het optimaliseren van afbeeldingen voor de zoekmachines. De naam is te nietszeggend. Als eerste gaan we de afbeelding hernoemen: die_another_day.jpg
Iedere afbeelding moet dus een logische naam krijgen. Ook bij het optimaliseren van een webshop moet je gelijk alle afbeeldingen van alle artikelen de naam geven waar mensen op gaan zoeken. Gebruik geen tekens zoals $ % of #. Maak het leesbaar, dan snapt een zoekmachine het ook!

Omdat zoekmachines afbeeldingen indexeren plaats je dit bestand op je webserver in de map /images of /afbeeldingen . Het hele pad ziet er dan ook zo uit:

https://www.denaamvanjewebsite.nl/images/die_another_day.jpg of
/afbeeldingen/die_another_day.jpg

Plaats je deze afbeelding “kaal” in de broncode dan ziet dit er zo uit:

HTML Voorbeeld:

<img width="290" height="232" src="/images/die_another_day.jpg">

Zichtbaar resultaat:

( ga met je muis over de foto en je blijft het pijltje houden )

Afbeelding met de juiste alt tag

Dan volgt de volgende stap, het toevoegen van de Alt tag. In de HTML broncode van je website komt dan het volgende:

HTML Voorbeeld:

<img width="290" height="232" alt="James Bond 007 Die another day 2002" src="/images/die_another_day.jpg" />

Zichtbaar resultaat:

(ga met je muis over de foto en je blijft het pijltje houden bij Firefox
Explorer toont nu de alt tag)

Afbeelding met alt tag en title tag

Dan volgt de volgende stap, het toevoegen van de title-tag. In de HTML broncode van je website komt dan het volgende:

HTML Voorbeeld:

<img width="290" height="232" src="/images/die_another_day.jpg" alt="James Bond 007 Die another day 2002" title="Die another day met Pierce Brosnan en Halle Berry" />

Zichtbaar resultaat:

( ga met je muis over de foto en je ziet de inhoud van de title tag bij zowel
Firefox alsook Explorer)

Alt of title tag – welke moet je nu gebruiken ?

Zowel de alt tag als ook de title tag bij een afbeelding vallen in de categorie attributen. Een attribuut geeft een waarde aan een afbeelding mee die wordt gezien door een webbrowser maar ook door de zoekmachines. De definitie van de alt tag volgens het W3C is een attribuut voor user agents die afbeeldingen niet kunnen zien.

In het begin van internet (jaren 90) surfden mensen over het internet met een tekst browser. Plaatjes stonden nog niet op alle pagina’s. Toen later Netscape kwam met een browser die opgemaakte pagina’s kon weergeven bleven veel mensen met de optie “afbeeldingen laden UIT” over het internet surfen. Plaatjes en foto’s deden er gewoonweg te lang over om geladen te worden en inbellen met een 14k4 modem en een telefoonlijn hielp ook niet echt. We kunnen ons dit nu bijna niet meer voorstellen met ADSL, kabel en snel draadloos internet. Een alt-attribuut werd dan ook gebruikt je als een user agent, bijvoorbeeld een internet tekst browser, een afbeelding niet kon laten zien. In plaats daarvan wordt dan de alternatieve tekst getoond.

Het blijkt dat zoekmachines die Alt en title tag nog steeds uitlezen. Zoekmachines zoals Google, Bing en Yahoo hebben aparte indexeringen voor afbeeldingen en plaatjes. Andere zoekmachines zullen de tekst in de Alt Tags indexeren als additionele content van een webpagina. Als je de Alt Tags niet gebruikt laat je een ideale kans lopen om relevante trefwoorden nogmaals onder de aandacht te brengen. Het is dus belangrijk dat een zoekmachine snapt wat er staat.

En soms kan je een bezoeker ook wat duidelijk maken door de title tag te gebruiken als hint of advies. Vaak zie je dit terugkomen in een webshop waar een bestel-knop als title meekrijgt: “klik hier om te bestellen”

( ga met je muis over de knop en je de inhoud van de title tag )

Een compleet voorbeeld

Als je al het bovenstaande toepast zal je merken dat er bezoekers op jouw site terechtkomen omdat ze op zoek waren naar een afbeelding. Dus zorg ervoor dat ook dat stuk van je website op orde is! Hieronder een compleet voorbeeld waarin we alles proberen toe te passen:

HTML Voorbeeld

<a href="https://en.wikipedia.org/wiki/Daniel_Craig" target="_blank"><img width="250" height="183" border="0" src="/images/Daniel-Craig-as-James-Bond.jpg" alt="Daniel Craig in de rol van secret agent James Bond" id="007, gezicht, foto" title="Link naar Daniel Craig Wiki pagina" longdesc="Daniel Wroughton Craig - born 2 March 1968 - is an English actor and film producer"></a>

Zichtbaar resultaat:

(ga met je muis over de foto en je de inhoud van de title tag die
aangeeft wat je kan verwachten als je de foto aanklikt)

Metatags – Waar te plaatsen ?

Uiteraard moet je metatags op alle pagina’s plaatsen, dus niet alleen de eerste index. Zorg er wel voor dat iedere pagina zijn eigen relevante tags krijgt, met zoekwoorden en begrippen die betrekking hebben op de inhoud. Het lijkt misschien veel werk om voor iedere pagina aparte metatags te verzinnen maar je zult zien dat het werkt.

Gebruik de Metatags Generator om juiste metatags te maken.

Afbeeldingen optimaliseren – de belangrijkste zaken samengevat

Samengevat kun je dus stellen dat de naam van de foto al moet beschrijven wat er te zien is. De alt tag geeft voor de zoekmachines een korte beschrijving van wat er te zien is en de title tag kunnen we gebruiken om de bezoeker van een webpagina aan te zetten tot een actie, bijvoorbeeld een link aanklikken.