Alt-text (alternativ text), även känd som ”alt-attribut”, ”alt-beskrivningar” eller tekniskt felaktigt som ”alt-taggar”, används i en HTML-kod för att beskriva utseendet och funktionen hos en bild på en sida.
Alt-text används:
1. Att lägga till alternativ text till foton är först och främst en princip för webbtillgänglighet. Synskadade användare som använder skärmläsare kommer att läsas ett alt-attribut för att bättre förstå en bild på sidan.
2., Alt-text visas i stället för en bild om en bildfil inte kan laddas.
3. Alt-text ger bättre bildkontext / beskrivningar för sökrobotar, vilket hjälper dem att indexera en bild korrekt.
den markerade texten visar alt-texten (alt-attributet) på bilden till vänster.
det bästa formatet för alt-text är tillräckligt beskrivande men innehåller inga skräppostförsök på sökordsfyllning., Om du kan blunda, har någon läsa alt text till dig, och föreställa sig en någorlunda korrekt version av bilden, du är på rätt spår.
låt oss titta på några exempel på alt-text för den här bilden av en utsökt stack med blåbärspannkakor:
denna alt-text är bara ”okej” eftersom den är inte särskilt beskrivande. Ja, det här är en bild av en stapel pannkakor. Men det finns mer att säga om den här bilden.,
bra:
<img src="https://moz.com/learn/seo/pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
den här alt-texten är ett bättre alternativ eftersom den är mycket mer beskrivande för vad som finns i bilden. Detta är inte bara en stapel av ”pannkakor” (som det första alt-texttexemplet visade); det är en stapel blåbärspannkakor med dammning av pulveriserat socker!
<img src="https://moz.com/learn/seo/pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">
inget av dessa exempel rekommenderas., Den första raden av kod faktiskt inte innehåller någon alt-text alls (märker citaten är tomma), medan det andra exemplet visar sökord fyllning i alt-text.
Varför är Alt-Text viktigt?
tillgänglighet
Alt text är en grundsats för tillgänglig webbdesign. Dess ursprungliga (och fortfarande primära) syfte är att beskriva bilder till besökare som inte kan se dem. Detta inkluderar skärmläsare och webbläsare som blockerar bilder, men det inkluderar även användare som är synskadade eller på annat sätt inte kan identifiera en bild visuellt., Inklusive alt text med dina bilder garanterar alla användare, oavsett visuell förmåga, kan uppskatta innehållet på din webbplats.
bild SEO
använda alt-text på dina bilder kan göra för en bättre användarupplevelse, men det kan också hjälpa dig att tjäna både explicita och implicita SEO fördelar. Tillsammans med att implementera bildtitel och filnamn bästa praxis, inklusive alt text kan också bidra till bild SEO.,
medan sökmotorns bildigenkänningsteknik har förbättrats avsevärt under åren, kan sökrobotarna fortfarande inte ” se ” bilderna på en webbplatssida som vi kan, så det är inte klokt att lämna tolkningen enbart i sina händer. Om de inte förstår, eller få det fel, är det möjligt att du antingen kan rangordna för oavsiktliga sökord eller miste om ranking helt och hållet.
här är ett exempel: Google kan se följande bild och kunna dechiffrera att det är en man som bär slips och glasögon, sitter vid ett skrivbord.,
Jim Halpert från Office (US version)
om du försöker rangordna efter” Jim Halperts imitation av Dwight Schrute”, måste du dock låna sökmotorn en hjälpande hand.
i den meningen erbjuder alt text dig en annan möjlighet att inkludera ditt mål sökord., Med användning på sidan Sökord fortfarande dra vikt som en sökmotor ranking faktor, det är i ditt bästa intresse att skapa alt text som både beskriver bilden och, om möjligt, innehåller ett sökord eller sökord fras du riktar.
Hur skriver jag bra alt-text?
beskriv bilden så specifikt som möjligt. Alt-text är först och främst utformad för att ge textförklaringar av bilder för användare som inte kan se dem. om en bild verkligen inte förmedlar någon mening / värde och är bara där för designändamål, bör den leva inom CSS, inte HTML.,
håll det (relativt) kort. De mest populära skärmläsarna avbröt alt-text på cirka 125 tecken, så det är lämpligt att hålla det till det teckentalet eller mindre.
Använd dina sökord Alt text ger dig en annan möjlighet att inkludera ditt mål sökord på en sida, och därmed en annan möjlighet att signalera till sökmotorer att din sida är mycket relevant för en viss sökfråga., Medan din första prioritet bör beskriva och ge sammanhang till bilden, om det är vettigt att göra det, inkludera ditt sökord i alt-texten på minst en bild på sidan.
Undvik fyllning av sökord. Google kommer inte att docka dig poäng för dåligt skriven alt-text, men du kommer att vara i trubbel om du använder din alt-text som en möjlighet att fylla så många relevanta sökord som du kan tänka dig i det. Fokusera på att skriva beskrivande alt-text som ger kontext till bilden och om möjligt innehåller ditt mål sökord och lämna det där.
använd inte bilder som text., Detta är mindre av en alt textspecifika bästa praxis och mer av en allmän SEO-vänlig webbutveckling grundsats. Eftersom sökmotorer inte kan läsa text i dina bilder, bör du undvika att använda bilder i stället för ord. Om du måste göra det, förklara vad ditt foto säger i din alt-text.
inkludera inte ”bild av”, ”bild av” etc. i din alt-text. Det antas redan att din alt-text hänvisar till en bild, så det finns ingen anledning att ange den.
glöm inte longdesc=””. Utforska med taggen longdesc=”” för mer komplexa bilder som kräver en längre beskrivning.,
försumma inte formulärknapparna. Om ett formulär på din webbplats använder en bild som det är ”skicka” – knappen, ge det ett alt-attribut. Bildknappar ska ha ETT alt-attribut som beskriver funktionen på knappen som ”Sök”, ”Använd nu”, ”registrera dig” etc.
hur ser bra alt-text ut?,3″>
okej alt text: <img src="https://moz.com/learn/seo/kwe.png" alt="kw explorer">
bättre alt text: <img src="https://moz.com/learn/seo/kwe.png" alt="keyword research in Keyword Explorer">
bästa alt text: <img src="https://moz.com/learn/seo/kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">
fortsätt lära
Googles riktlinjer för bildpublicering
rankingfaktorer på sidan
metabeskrivning
sätt dina färdigheter att fungera
avsnittet sidoptimering i Moz Pro belyser sidor som inte lever upp till full söksynlighet potential (och innehåller saker som om en sida saknas alt text).-herr talman!, Prova >>
