How to use a href – best practice

What about rel="nofollow", rel="noopener" and rel="noreferrer"?

// navigation

Blog


// content

Sep, 24. 2016

This is the way to do a href right

An important decision for every web project is the implementation of links. This is usually done by using the "a href" HTML-tag. But as always there are some insights you should be aware of to use this correctly.

Setting links is almost always done by linking to another page and not the one the user is currently looking at. There is also the possibility of creating overlays that will open on the same site in a sort of popup or light box so users will not get redirected away from your page.

Another way of linking is a connection to a download such as PDF documents. The combination of both would be to open a PDF in an overlay – which is done without problems when using the documentation of your desired framework (such as bootstrap, foundation or fancy box).

The third option is to link via IDs on the same page. This can be done with basic HTML as a sort of jump point to another content element:

<a href="#Linkname1">Go to Linkname1</a>
<a name="Linkname1">Here lies Linkname1</a>

This connection can be done without jQuery or other javascript frameworks. If you want to add a smooth scroll effect, most often the only thing necessarry is to add a framework via <script> tag to the head of the page or just above the closing </body> tag (usually jQuery is needed to be implemented above these frameworks)

An important factor when setting a link which is often used wrongly is: the target attribute. If you want to add a link to YouTube for example, this is the way to do it:

<a href="http://youtube.com" target="_blank">Link to YouTube in a new window or tab (depends on user’s browser setting)</a>

As a rule of thumb: Whenever your main navigation disappears after a user is clicking on a link, use target="_blank". This increases the user experience by a lot because they do not need to manually look for your page in their tab history and will also not unawarently close your website by closing the tab.

There are a lot of other ways to experiment with links. You can use links to wrap around images for example or link a DIV container that uses a background image with text on it. But be aware that Internet Explorer interprets a:hover elements as if the user would navigate their pointer over them. This can lead to unexpected behaviour like flashing texts. That is why we recommend to disable all hover effects on those containers:

.CSSClassOfContainers a:hover { color: inherit; } /*  or initial or just the same color as the text is */

A lot of web technologies allow to set links dynamically. This is always recommended over setting them manually because links will automatically update themselves when content is being changed. Typo3 for example offers a dynamic link rendering with SEO URLs if combined with the free realurl extension. So if a user decides to change the title of a page this will be updated in every link that is set globally on your page. This enhances the management of bigger websites with huge amount of content by a lot.

By using PHP it could look like this:

echo "<a href="index.php?id=$id">$title</a>";

Where $id and $title are variables that are read from your chosen database. And if you want to make that link SEO compatible you could change your server’s htaccess file (advanced users only!). An easy way of doing it is this:

echo "<a href="index.php?id=$id&title=$title">$title</a>";

The newly created SEO link would look like this:

/index.php?id=93&title=Hier%20ist%20ihr%20SEO%2titel

PHP experts could come to the conclusion that removing the empty spaces from the content’s title with str_replace would make it even prettier.

You got questions? Please, feel free to use our comments to ask them!

Jan, 21. 2018

How to use rel="nofollow", rel="noreferrer" and rel="noopener" correctly?

rel="nofollow"

The audit function of Google's Chrome browser now recommends the use of rel = "nofollow" in all links that are opened in a new window or tab, e.g. use the attribute target="_ blank". This makes sense, in order not to give the link power of one's page to external websites. So when indexing the Google Bot goes through all the pages of a web page and analyzes their a href tags and takes linked pages into the index. If you now have a lot of external links, it may be that the visibility index of your site goes down, but that of linked websites up.

More information from Google

rel="noreferrer"

This value indicates that the header information of the current page should not be passed to the linked page. This prevents linked pages from seeing where they were linked. In principle, the use here should be dependent on one's needs and is not always recommended. For example, if one hopes for backlinks of the linked pages - e.g. a webmaster calling analysis tools - you should not set that value. In principle: Use only if you want to hide a page for linked pages.

rel="noopener"

This is the most important of the three values, as it prevents Javascript injection from the linked page. So far, most web developers have assumed that pages linked by _blank open up in a new process and can not manipulate their own page. According to Google, this is not the case, so that, for example, a header manipulation of the newly opened page can manipulate the window or the tab with its own page. Thus, a linked page could divert away from the original site having the link or take even more dangerous actions. Therefore, it is highly recommended to set this value on all external links!

More information regarding noopener from Google

Combine rel="noopener nofollow noreferrer"

The link would look like this:

Rating: 4.0. 2 vote(s).
2 anonymous votes
No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
Click the rating bar to rate this item Please log on to do ratings

Comments

comments powered by Disqus