fbpx

HTML Link Tags Forklaret (+ Alle Attributes og Values)

Af Tomas Graversen
Læse tid: 5 min.

Introduktion

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...

Hovedpointer

• Hvad er et HTML Link Tag?
• 7 anvendelser af HTML Link Tag
• Yderligere HTML Link Tag Attributes og Values
• Almindelige fejl at undgå, når man implementerer Link Tags
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?

Hvad er et HTML Link Tag?

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:
Et HTML link tag
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.

Vil Du Have Mere Organisk Trafik?

Se hvordan vi kan drive mere organisk trafik
til din hjemmeside med SEO.

7 anvendelser af HTML Link Tag

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

1. Link et eksternt stylesheet

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:
Et HTML link tag

Google ignorerer changefreq- og priority-tags, så de er måske ikke værd at tilføje. Og du bør kun bruge lastmod-værdien, hvis du kan sikre dig, at den altid er nøjagtig

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.

2. Vis et favicon

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

Her er et:
Messenger Favi icon på søgemaskiner
Brug HTML link tagget som i eksemplet nedenfor for at vise dit favicon på tværs af forskellige browsere:
Favi icon link tag html kode

Klar På Et SEO Kursus?

Besvar 5 spørgsmål også sender vi dig et gratis kursus i SEO!

3. Angiv en kanonisk URL

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:
kanonisk URL eksempel

4. Angiv en sides sprog

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):
hreflang attributtet kan søgemaskiner vise de mest relevante søgeresultater for brugere i forskellige lande.

5. Forudindlæs Specifikke Ressourcer

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:
Forudindlæsning kode
Du kan indstille ressourcer til at forudindlæse på en page-by-page basis.

6. Link til eksterne skrifttyper

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:
Koden til at linke eksterne skrifttyper fra google til ens professionelle hjemmesider

Boost Din Organiske Trafik

Hey, vi er Skillbuddy! Vi hjælper firmaer med at få mere
organisk trafik. Det eneste spørgsmål er, bliver din den næste?

Yderligere HTML Link Tag Attributes og Values

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

Og values angiver det specifikke indhold tildelt til et attribut.
HTML Link Tag Attributes og Values
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:
Attribute
Values
Definition
Eksempel
as
audio
document
embed
fetch
font
image
object
script
style
track
video
worker
Angiver typen eller rollen for den linkede ressource. Det er påkrævet, når man bruger "preload"-attributten.
< link rel="preload" as="audio" href="audio.mp3" >
crossorigin
anonymous
use-credentials
Indikerer om browseren skal hente crossorigin-request som anonym—dvs. uden at sende legitimationsoplysninger (som cookies)
l< link rel="stylesheet" href="https://ex
ample.com/style
s.css" crossorigin="
anonymous" >
fetchpriority
high
low
auto
Hjælper browsere med at prioritere, hvordan ressourcer hentes. Dette kan forbedre din hjemmesides ydeevne, når det håndteres korrekt.
< link rel="stylesheet" href="https://fon
ts.googleapis.co
m/css?family=Open+Sa
ns" fetchpriority=”hi
gh” >
href
URL
Angiver URL'en i absolutte eller relative termer for den linkede ressource.
< link rel="stylesheet" href="https://ex
ample.com/style
s.css" >
hreflang
You may use ISO 639-1 or the ISO 3166-1 alpha-2 country and language codes
Angiver sproget (og eventuelt det tiltænkte land) for den linkede ressource.
< link rel="alternate" hreflang="fr" href="https://exam
ple.io/fr/page" >
imagesizes
Height x width
or
Percent of viewport width (vw)
Hjælper med at forudindlæse responsive billeder. Anvendes kun med rel="preload" og as="image."
< link rel="preload" as="image" href="example.jpg" imagesrcset="exam
ple_300px.jpg 300w, example_600px.
jpg 600w, example_1200px.
jpg 1200w" imagesizes="50v
w" >
imagesrcset
URL
Angiver en liste over billeder. Browseren vil vælge det mest passende billede at vise. Anvendes kun med rel="preload" og as="image."
< link rel="preload" as="image" href="example.jpg" imagesrcset="exam
ple_300px.jpg 300w, example_600px.jpg 600w, example_1200px.jpg 1200w" imagesizes="50vw" >
integrity
cryptographic hash value
Giver en hashværdi til verificering af integriteten af den linkede ressource. Dette kan give dig et ekstra lag af sikkerhed, når du indlæser ressourcer.
< link rel="stylesheet" href="styles.css" integrity="sha256-BBq2K8ntPke0J1X
y2ftV07cHJZaMj
RZEmmgvsq81IB4=" >
media
all
print
screen
speech
aspect-ratio
color
color-index
grid
height
monochrome
orientation
resolution
scan
width
Angiver typen af enhed eller skærmstørrelse, som den linkede ressource er designet til
< link rel="stylesheet" href="styles-mobile.css" media="screen and (max-width: 600px)" >
referrerpolicy
no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Angiver, hvor meget henvisningsinformation der skal inkluderes, når ressourcen hentes
< link rel="stylesheet" href="styles.css" referrerpolicy="no-referrer" >
rel
alternate
author
canonical
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
Angiver forholdet mellem det nuværende dokument og den linkede ressource.
< link rel="icon" href="favicon.png" >
sizes
Any height x width size
Bruges til at angive størrelser af ikoner. Det kan kun anvendes med rel="icon."
< link rel="icon" type="image/png" sizes="16x16" href="favicon.png" >
title
text
Definerer standard- eller alternativt stylesheet for at holde styr på linkede stylesheets. Det påvirker ikke, hvordan browseren anvender dem.
< link rel="stylesheet" href="styles.css" title="Main Style Sheet" >
type
Various media types like:
text/css
text/javascript
image/svg+xml
Beskriver medietypen for den linkede ressource.
< link rel="stylesheet" href="styles.css" type="text/css" >

Klar På Et SEO Kursus?

Besvar 5 spørgsmål også sender vi dig et gratis kursus i SEO!

Almindelige fejl at Undgå, når Man Implementerer Link Tags

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.

Tilføjelse af tagget til sidens Body-sektion

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."
Inspect page source google og safari
Derefter trykker du på Ctrl+F (Command+F på Mac) og søger efter .
Hjemmesidens page source på google
(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.

Brug af Forkerte Attributes eller Values

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.

Incorporating Forældede Attributes

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.

Vil Du Have Mere Organisk Trafik?

Se hvordan vi kan drive mere organisk trafik til din hjemmeside med SEO.
© 2024 Skillbuddy ApS. All rights reserved.

Vil du have mere organisk trafik?

Firmaer, som stoler på os

Kontakt os

Ethvert godt samarbejde starter med en samtale. Lad os tage uforpligtende en af slagsen.
Mobil: +45 21 18 78 77
Mail: Kontakt@skillbuddy.dk

This is a heading.

src="https://api.leadconnectorhq.com/widget/form/wmo5dT89Xx6vHyCG1X18"
style="width:100%;height:100%;border:none;border-radius:4px"
id="inline-wmo5dT89Xx6vHyCG1X18"
data-layout="{'id':'INLINE'}"
data-trigger-type="alwaysShow"
data-trigger-value=""
data-activation-type="alwaysActivated"
data-activation-value=""
data-deactivation-type="neverDeactivate"
data-deactivation-value=""
data-form-name="Form Opt-In (VSS)"
data-height="713"
data-layout-iframe-id="inline-wmo5dT89Xx6vHyCG1X18"
data-form-id="wmo5dT89Xx6vHyCG1X18"
title="Form Opt-In (VSS)"


Invalid shortcode

Lad os øge din trafik!

Oversigt for 5 ugers SEO plan:

Uge 1:  Find profitable keywords - Brug din første uge på at skabe et sæt af nøgleord, som du vil målrette mod SEO. Målret de rigtige nøgleord, hvor der er masser af trafik, hvor nøgleordene konverterer til kunder, og hvor du kan slå konkurrencen.
Uge 2:  Optimer din hjemmesides SEO - Brug din anden uge på at rette alle on-page SEO-fejlene på din hjemmeside. At rette disse fejl vil gøre din hjemmeside mere søgemaskinevenlig og gør det lettere for dig at rangere på dine søgeord.
Uge 3:  Content marketing - Her vil du få et indblik i, hvordan du skriver indhold, som resonerer med dine potentielle købere.
Uge 4:  Tracking - Du kan ikke skalere din marketing, før du ved, hvad der virker, og hvad der ikke gør. Ved at få din tracking sat op, vil du kunne se trafikkilder, indhold og nøgleord, der genererer DKK.
Uge 5:  Linkbuilding - Links viser Google, at din hjemmeside er en "autoritativ og pålidelig informationskilde." <-- Googles ord. Det betyder nu bare, at Google kan se jeres side ikke er til fare for nogen.

Firmaer, som stoler på os

100+ digitale projekter, 5-stjerner på trustpilot.

Vi har hjulpet firmaer internationalt.
Skillbuddy kunde testimonial smiling
Jeg kan allerede se flere bookings i min salon. Selvom jeg kun har fortaget nogle få ændringer har det stadig været super effektivt.
Hanne Eriksen

Kontakt os

Ethvert godt samarbejde starter med en samtale. Lad os tage uforpligtende en af slagsen.
Mobil: +45 21 18 78 77
Mail: Kontakt@skillbuddy.dk

Alt du skal bruge til dit website for 159 kr. 🚀

Vi er drevet af at skabe resultater for dig.