ARTICLE AD BOX
HTML <link> tags assistance specify relationships betwixt resources connected your website.
In this post, we’ll research what HTML nexus tags are, however to usage them, and communal mistakes to debar erstwhile adding them to your tract oregon webpage.
What Is an HTML Link Tag?
The HTML <link> tag is an HTML tag (a portion of code) that establishes connections betwixt the papers you’re connected and its outer resources (files oregon different assets).
You should spot HTML nexus tags successful an HTML document’s <head> section. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
Browsers that presently enactment HTML nexus tags include:
- Chrome
- Edge
- Safari
- Opera
- Firefox
Browsers that don’t enactment HTML nexus tags mightiness not render them properly. Meaning they mightiness disregard the tag altogether and show thing astatine all.
7 Uses of the HTML Link Tag
Let’s look astatine a fewer communal examples of nexus tags successful HTML.
1. Link an External Style Sheet
An outer benignant expanse is simply a record with Cascading Style Sheets (CSS) code. This codification defines the styles and layout of a webpage—like inheritance color.
For a benignant expanse to work, you indispensable nexus it to the leafage you’d similar to style. Otherwise, the browser won’t cognize astir it and won’t show arsenic you’ve intended.
Here’s however you tin usage the HTML nexus tag to nexus to the benignant sheet:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
2. Display a Favicon
A favicon is simply a tiny icon displayed successful the browser’s tab oregon bookmark.
Here’s one:
Use the HTML nexus tag similar successful the illustration beneath to show your favicon crossed assorted browsers:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="favicon.png">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
3. Set a Canonical URL
A canonical URL indicates the superior mentation of a webpage erstwhile duplicate content exists crossed the site. And tells hunt engines which leafage to prioritize and fertile successful integrated (unpaid) hunt results.
To specify a canonical page, usage the HTML nexus tag similar this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="canonical" href="https://www.example.com/canonical-page">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
4. Set the Language of a Page
The hreflang attribute specifies the connection and (optionally) intended portion of a document. Which is utile if you person contented successful antithetic languages.
Why?
Because with the hreflang attribute, hunt engines tin show the astir applicable hunt results to users successful antithetic countries.
For example, if you Google “semrush blog” successful the United States, you’ll spot this result:
But if you’re successful Spain, you’ll spot this:
You tin specify pages for antithetic countries and languages utilizing the HTML nexus tag arsenic shown beneath (this 1 has alternate Spanish and French versions):
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
5. Preload Specific Resources
Preloading instructs browsers to petition and store a assets successful its cache close erstwhile (or soon after) the leafage starts loading. Which tin amended a website’s performance, speed, and idiosyncratic experience.
A communal preload petition is for fonts. And you tin acceptable a font to preload with an HTML nexus tag similar this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Preload fonts -->
<link rel="preload" as="font" type="font/woff2" href="your-font.woff2">
<!-- Link to the external style sheet using the font -->
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
You tin acceptable resources to preload connected a page-by-page basis.
A Really Simple Syndication (RSS) provender is simply a mode for websites to stock contented and updates.
And users tin subscribe to antithetic websites done RSS provender readers similar this one:
This lets them spot erstwhile sites people caller content.
Use the HTML nexus tag to nexus to your RSS provender truthful a idiosyncratic tin subscribe to your feed.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="rss-feed.xml">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
7. Link to External Fonts
HTML nexus tags fto you nexus to outer fonts (like those successful Google Fonts) to usage connected your site.
Here’s the codification to use:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link to an external font from Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
<!-- The content of your webpage goes here -->
</body>
</html>
Additional HTML Link Tag Attributes and Values
Link tag attributes supply further accusation and spell betwixt the opening and closing tag.
And values bespeak the circumstantial contented assigned to an attribute.
Both attributes and their values usher the HTML nexus tag successful performing its designated tasks. In different words, they archer it however to behave.
Here are existent HTML nexus tag attributes and their communal values:
| Attribute | Values | Definition | Example |
| as | audio document embed fetch font image object script style track video worker | Specifies the benignant oregon relation of the linked resource. It’s required erstwhile utilizing the “preload” attribute. | <link rel="preload" as="audio" href="audio.mp3"> |
| crossorigin | anonymous use-credentials | Indicates whether the browser should fetch the crossorigin petition arsenic anonymous—i.e., without sending credentials (like cookies) | <link rel="stylesheet" href="https://example.com/styles.css" crossorigin="anonymous"> |
| fetchpriority | high low auto | Helps browsers prioritize however to fetch resources. Which tin amended your site’s show erstwhile handled correctly. | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" fetchpriority=”high”> |
| href | URL | Indicates the URL successful implicit oregon comparative presumption of the linked resource | <link rel="stylesheet" href="https://example.com/styles.css"> |
| hreflang | You whitethorn usage ISO 639-1 oregon the ISO 3166-1 alpha-2 state and connection codes | Indicates the connection (and perchance the intended country) of the linked resource | <link rel="alternate" hreflang="fr" href="https://example.com/fr/page"> |
| imagesizes | Height x width or Percent of viewport width (vw) | Helps preload responsive images. Used lone with rel="preload" and as="image." | <link rel="preload" as="image" href="example.jpg" imagesrcset="example_300px.jpg 300w, example_600px.jpg 600w, example_1200px.jpg 1200w" imagesizes="50vw"> |
| imagesrcset | URL | Specifies a database of images. The browser volition prime the astir due representation to display. Used lone with rel="preload" and as="image." | <link rel="preload" as="image" href="example.jpg" imagesrcset="example_300px.jpg 300w, example_600px.jpg 600w, example_1200px.jpg 1200w" imagesizes="50vw"> |
| integrity | cryptographic hash value | Provides a hash worth for verifying the integrity of the linked resource. Which tin springiness you an other furniture of information erstwhile loading resources. | <link rel="stylesheet" href="styles.css" integrity="sha256-BBq2K8ntPke0J1Xy2ftV07cHJZaMjRZEmmgvsq81IB4="> |
| media | all screen speech aspect-ratio color color-index grid height monochrome orientation resolution scan width | Specifies the benignant of instrumentality oregon surface size that the linked assets is designed for | <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 | Specifies however overmuch referrer accusation to see erstwhile fetching the resource | <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 | Specifies the narration betwixt the existent papers and the linked resource | <link rel="icon" href="favicon.png"> |
| sizes | Any tallness x width size | Used to bespeak sizes of icons. It tin lone beryllium utilized with rel=”icon.” | <link rel="icon" type="image/png" sizes="16x16" href="favicon.png"> |
| title | text | Defines the default oregon alternate benignant expanse to support way of linked benignant sheets. It does not impact however the browser applies them. | <link rel="stylesheet" href="styles.css" title="Main Style Sheet"> |
| type | Various media types like: text/css text/javascript image/svg+xml | Describes the media benignant for the linked resource | <link rel="stylesheet" href="styles.css" type="text/css"> |
Here are mistakes radical often marque erstwhile adding the <link> tag to their site. By avoiding them, you tin guarantee that your nexus tags enactment good and that browsers tin work them.
Adding the Tag to Page’s Body Section
The HTML nexus tag belongs successful the <head> conception of your HTML document.
Why?
Because according to semantic HTML, the <head> conception of an HTML papers is wherever metadata should go. (Metadata is accusation that describes data. And HTML nexus tags are considered metadata elements.)
An HTML nexus tag whitethorn not enactment arsenic expected if you adhd it to the <body>.
For instance, placing your benignant expanse HTML nexus tag successful the <body> conception could origin a hold successful loading the benignant of that web page.
You tin cheque wherever your nexus tag is by viewing your page’s root code. Right-click connected the leafage successful the browser and prime “View Page Source.”
Then, property Ctrl+F (Command+F connected Mac) and hunt <head>.
(You tin besides hunt </head> to find wherever the <head> conception ends.)
Look done the codification to guarantee the nexus tags successful your HTML are wrong the <head> and </head> tags. If they aren’t, either determination them oregon scope retired to your web developer for help.
Using Incorrect Attributes oregon Values
You tin lone usage circumstantial values associated with each attribute. And immoderate attributes tin lone enactment with different attributes.
For example, if you usage “rel=preload” successful your nexus tag, you must besides usage the arsenic attribute.
Refer to our database of HTML nexus tag attributes and their values supra to guarantee you’re utilizing the close ones.
Incorporating Deprecated Attributes
Deprecated—meaning outdated—attributes whitethorn not work. Because modern browsers typically signifier retired enactment for them.
Organizations similar the World Wide Web Consortium (W3C) whitethorn determine to deprecate attributes for assorted reasons. Like changing technology.
For example, the rev property was antecedently utilized to amusement the reverse narration betwixt the existent papers and the linked document. For example:
<link rev="made" href="related-document.html">
This HTML nexus tag indicated that the linked papers (related-document.html) was made by the existent document.
But due to the fact that the rev property lone accounts for reverse relationships, the W3C deprecated it. It present advises radical to usage the rel property instead, which is much flexible.
Here’s however you’d rework the illustration supra utilizing the existent rel attribute:
<link rel="author" href="related-document.html">
Other deprecated attributes for the HTML nexus tag include:
- charset: Defines the encoding of the linked resource
- methods: Provides accusation astir the functions oregon actions that could beryllium performed connected a linked object
- target: Specifies whether the linked papers should load successful a model oregon frame
Check your codification for immoderate of these attributes. And regenerate them with thing much suitable if needed.
Check for HTML Link Tag Issues connected Your Site
Use a diagnostic instrumentality similar Semrush’s Site Audit to way method issues connected your site. Including ones that originate from mistakes wrong your HTML nexus tags.
Here’s how.
Open Site Audit. Enter your domain URL and click “Start Audit.”
This opens a paper wherever you tin configure each your settings.
Next, click “Start Site Audit.”
Once your audit is complete, you’ll person a elaborate study of what you request to improve.
Click connected the “Issues” tab.
This displays a database of method issues with your site.
For example, pages with duplicate content—which would payment from an HTML nexus tag with a canonical attribute.
Site Audit besides spots hreflang errors, canonical tag errors, and dilatory pages. (Slow pages mightiness payment from utilizing the fetchpriority property wrong your HTML nexus tag.)
You tin click “Why and however to hole it” adjacent to each contented to amended recognize and code the problem.
Cleaning up these issues helps you make a large idiosyncratic acquisition connected your site. And optimize your pages truthful hunt engines tin easy crawl, index, and fertile them successful hunt results.
Try Site Audit for free.
English (US)