Af Tomas Graversen

HTML < link > tags hjælper med at definere relationer mellem ressourcer på din hjemmeside.

I denne blog vil vi se på, hvad HTML link tags er, hvordan man bruger dem, og almindelige fejl at undgå, når man tilføjer dem til dit site eller hjemmeside.

Vil du have en gratis SEO analyse?

Tilmeld dig vores gratis nyhedsbrev - Få indblik i nyeste markedstrends, SEO tips, hjemmeside tricks og meget mere...

Tid til at vækste din online forretning?

Hey mit navn er Tomas! Jeg hjælper iværksættere, som dig, med at vækste deres online forretning. Mit eneste spørgsmål er, bliver det din?

HTML < link > tagget er et HTML-tag (et stykke kode), der etablerer forbindelser mellem det dokument, du befinder dig på, og dets eksterne ressourcer (filer eller andre aktiver).

Du bør placere HTML link tags i en HTML-dokuments < head >-sektion. Sådan her:

Browsere, der i øjeblikket understøtter HTML link tags, inkluderer:

• Chrome
• Edge
• Safari
• Opera
• Firefox

Browsere, der ikke understøtter HTML link tags, viser dem muligvis ikke korrekt. Det betyder, at de helt kan ignorere tagget og ikke vise noget som helst.

Lad os kigge på nogle eksempler af HTML link Tags!

Et eksternt stylesheet er en fil med Cascading Style Sheets (CSS) kode. Denne kode definerer stilarter og layout af en hjemmeside såsom baggrundsfarve.

For at et stylesheet skal fungere, skal du linke det til den side, du gerne vil style. Ellers vil browseren ikke vide om det og ikke vise det, som du har tænkt.

Sådan kan du bruge HTML link tagget til at linke til stylesheetet:

Man kan også oprette dedikerede billede-, video- og nyheds-sitemaps. For at hjælpe søgemaskiner med at forstå disse specifikke typer indhold.

Hvis du har brug for at oprette mere end ét sitemap, har du brug for et sitemap-index. Som i bund og grund fungerer som et sitemap for dine sitemaps.

Et favicon er et lille ikon, der vises i browserens fane eller bogmærke.

Her er et:

Brug HTML link tagget som i eksemplet nedenfor for at vise dit favicon på tværs af forskellige browsere:

En kanonisk URL angiver den primære version af en webside, når der findes duplikeret indhold på siden. Og fortæller søgemaskiner, hvilken side der skal prioriteres og ranke i organiske (ubetalte) søgeresultater.

For at specificere en kanonisk side, brug HTML link tagget således:

Hreflang-attributtet specificerer sproget og (valgfrit) den tiltænkte region for et dokument. Dette er nyttigt, hvis du har indhold på forskellige sprog.

Hvorfor?

Fordi med hreflang-attributtet kan søgemaskiner vise de mest relevante søgeresultater for brugere i forskellige lande.

Du kan definere sider for forskellige lande og sprog ved hjælp af HTML link tagget, som vist nedenfor (dette har alternative spanske og franske versioner):

Forudindlæsning instruerer browsere til at anmode om og gemme en ressource i dens cache lige når (eller kort efter) siden begynder at indlæse. Dette kan forbedre en hjemmesides ydeevne, hastighed og brugeroplevelse.

En almindelig forudindlæsningsanmodning er for skrifttyper. Og du kan sætte en skrifttype til at forudindlæse med et HTML link tag således:

Du kan indstille ressourcer til at forudindlæse på en page-by-page basis.

HTML link tags lader dig linke til eksterne skrifttyper (som dem i Google Fonts) til brug på din hjemmeside.

Her er koden, du skal bruge:

Link tag attributes giver yderligere information og placeres mellem den åbne og lukkende tag.

Og values angiver det specifikke indhold tildelt til et attribut.

Både attributes og deres values vejleder HTML link tagget i at udføre sine tildelte opgaver. Med andre ord, de fortæller det, hvordan det skal opføre sig.

Her er nuværende HTML link tag attributes og deres almindelige values:

Her er fejl, folk ofte begår, når de tilføjer tagget til deres hjemmeside. Ved at undgå dem, kan du sikre dig, at dine link tags fungerer godt, og at browsere kan læse dem.

HTML link tagget hører til i < head>-sektionen af dit HTML-dokument.

Hvorfor?

Fordi ifølge semantisk HTML, er -sektionen af et HTML-dokument, hvor metadata bør gå. (Metadata er information, der beskriver data. Og HTML link tags betragtes som metadataelementer.)

Et HTML link tag fungerer måske ikke som forventet, hvis du tilføjer det til .

For eksempel kan det at placere dit stylesheet HTML link tag i < body>-sektionen forårsage en forsinkelse i indlæsningen af stilen på den webside.

Du kan tjekke, hvor dit link tag er, ved at se din sides kildekode. Højreklik på siden i browseren og vælg "View Page Source."

Derefter trykker du på Ctrl+F (Command+F på Mac) og søger efter .

(Du kan også søge efter < /head> for at finde ud af, hvor < head>-sektionen slutter.)

Gennemgå koden for at sikre, at link tags i dit HTML er indenfor < head>- og < /head>-tags. Hvis de ikke er det, så flyt dem eller kontakt din webudvikler for hjælp.

Du kan kun bruge specifikke værdier, der er tilknyttet hver attribute. Og nogle attributes kan kun fungere med andre attributes.

For eksempel, hvis du bruger "rel=preload" i dit link tag, skal du også bruge attribute as.

Henvis til vores liste over HTML link tag attributes og deres værdier ovenfor for at sikre, at du bruger de rigtige.

Forældede—det vil sige outdated—attributes fungerer måske ikke, fordi moderne browsere typisk udfaser understøttelsen af dem.

Organisationer som World Wide Web Consortium (W3C) kan beslutte at udfase attributes af forskellige årsager. Som skiftende teknologi.

For eksempel blev rev attribute tidligere brugt til at vise det omvendte forhold mellem det aktuelle dokument og det linkede dokument. For eksempel:

< link rev="made" href="related-document.html">

Dette HTML link tag indikerede, at det linkede dokument (related-document.html) blev lavet af det aktuelle dokument.

Men fordi rev-attributten kun tager højde for omvendte relationer, har W3C udfaset den. De råder nu folk til at bruge rel-attributten i stedet, som er mere fleksibel.

Sådan ville du omforme eksemplet ovenfor ved at bruge den aktuelle rel-attribut:

< link rel="author" href="related-document.html">

Andre forældede attributes for HTML link tagget inkluderer:

Charset: Definerer kodningen af den linkede ressource
Methods: Giver information om funktionerne eller handlingerne, der kunne udføres på et linket objekt
Target: Angiver, om det linkede dokument skal indlæses i et vindue eller en ramme

Tjek din kode for nogen af disse attributter. Og erstat dem med noget mere passende, hvis det er nødvendigt.

Kontakt

Løsninger

Cases