Intro till ”rel”-attributet i HTML: SEO-guide för professionella

”rel”-attributet i HTML är hjälper till att definiera förhållandet mellan det nuvarande dokumentet och en länk. ”rel”-attributet kan användas i <a>, <area>, <form>, och <link> element, värden varierar beroende på vilket element attributet finns på.

Attributet kan förbättra semantiken för både och människor och maskiner så som exempelvis sökrobotar.

Vad är ”rel”-attribut?

”rel”-attribut används i HTML för att specificera karaktären av förhållandet mellan det nuvarande dokumentet och den länkade resursen. De beskriver semantiken för det innehåll vi länkar till, vilket ger värdefullt sammanhang till både användare och sökmotorer.

På vilka element kan du använda ”rel”-attributet?

”rel”-attributet kan användas på följande element:

  • <a>
  • <area>
  • <form>
  • <link>

För <a>-elementet definierar ”rel”-attributet förhållandet mellan det länkade dokumentet och det nuvarande dokumentet, medan det för <link>-elementet betecknar hur det länkade objektet är relaterat till dokumentet, ofta används för att länka stilmallar, ikoner och förbelasta resurser.

Lista över många existerande rel attribut och när dom ska användas.

<a> ”rel”-attribut vanliga användningsfall i SEO

”rel”-attributet spelar en betydande roll i SEO. Det ger sökmotorer mer sammanhang om innehållet (bättre semantisk förståelse), vilket förbättrar kvaliteten på sökresultaten. Du får använda flera olika rel-värden.

Här är några vanliga användningsfall:

  • rel="nofollow": Berättar för sökmotorer att inte följa en länk, eller bidra till rankingen av den länkade sidan.
  • rel="noreferrer": Tar bort referer-headern. Detta gör så att din trafik visas som ”direkt” i Google Analytics. Läs mer på MDN web docs. Sätter även noopener om inget annat anges.
  • rel=”noopener”: Måste användas av säkerhetsskäl när du länkar ut med target=”_blank” (osäkra länkar enlight lighthouse). Skippa att använda target=”_blank” så slipper du detta.

Vanliga felaktiga rel-värden på <a>

  • rel=”dofollow”: Detta är inte ett korrekt värde och bör inte användas.
  • rel=”follow”: detta är inte ett korrekt värde och bör inte användas.

rel sponsored, ugc och nofollow

I blogginlägget från 2019 där Google presenterade nya grepp mot spam i kommentarsfält och vill med det uppmuntra till att använda ugc och sponsored istället för bara nofollow.

  • rel=”sponsored”: Använd attributet ”sponsored” för att identifiera länkar på din webbplats som skapades som en del av annonser, sponsorskap eller andra ersättningsöverenskommelser.
  • rel=”ugc”: UGC står för User Generated Content (Användargenererat innehåll), och attributvärdet ”ugc” rekommenderas för länkar inom användargenererat innehåll, såsom kommentarer och foruminlägg.
  • link rel=”about”: kan användas för att hänvisa till vad du skriver om, ämnet eller temat för länkens kontext. Flera ämnen kan indikeras genom användning av flera ”about”-länkrelationer.
  • link rel=”webmention”: Webmention är en öppen webb-standard för att tillgängliggöra konversationer över olika delar webben.

Detta är fortfarande rådande riktlinjer på Google Search Central Documentation (tidigare webmaster tools).

<link> ”rel”-attribut vanliga SEO användningsområden

  • rel="canonical": Anger den föredragna versionen av en sida om det finns flera liknande sidor. Du skickar alltså ditt SEO-värde till denna sida istället för att bli straffad för att ha kopierat innehållet. Bra för A/B-testning, multiple versioner av kampanjsidor, kopierat referensinnehåll. Bör alltid sättas till sig själv för att undvika missförstånd av din sidstruktur vid användning av exempelvis UTM-taggar.
  • rel="alternate": Hjälper till att specificera alternativa versioner av innehåll, till exempel mobilvänliga sidor eller innehåll på olika språk.

Marschera för din egen standard

IANA sköter om denna standard och tar emot förslag på nya rel värden.

Referenser till denna artikel:


Skrivet den

under

av