It's safe to assume that anyone who's used the web have seen them. They take users from one page to another either within the same application or to an external website. There were really hot when they were introduced back in 1966 by a team led by Douglas Engelbart.
In the early 1980s Ben Shneiderman, a computer scientist at the University of Maryland, with his graduate student Dan Ostroff were preparing a videodisk exhibit for a museum. It was then where they used a caption that had all the information and users could click on it to see the photo associated with it.
At first, this discovery was called
embedded menu but that term was quickly replaced by
hyperlink. Tim Berners-Lee cited Shneiderman’s hyperlink work in his spring 1989 manifesto for what would become the World Wide Web.
Back then, this feature was super hot and it still is. People use it without even thinking about it and it's become a natural part of the web.
Let's review what they do:
- As mentioned before they allow users to navigate between pages within a site or to an external one.
- And more importantly they help search engines and bots to find resources and going from one page to another by following the links. Think of this as a giant maze where they need to blindly follow the links to discover stuff.
- And last, the crawlers use them to understand the architecture of a site and the type of content they have. It's a critical part of their decision making when assigning a page to a specific topic.
Turns out it's not as straightforward as one might think. The simplest way to put a link on your site is to use a good old
<a> tag with a
URL which it points to in the
<a href="/elsewhere">A good link, YES ╰(*°▽°*)╯</a>
<a href="/elsewhere" onclick="goTo('elsewhere')">Okay ¯\_(ツ)_/¯</a>
But some people decide to remove the
href attribute. This is not a good idea because you now prevented crawlers to find out where this link goes to:
<a onclick="goTo('elsewhere')">Please don't ╯︿╰</a>
In other occasions, people use the
href attribute without a URL or with a pseudo URL:
This is even worse than the previous case as it just confuses the hell out of every crawler out there.
You might think it's a good idea to use a button to navigate the user, but let me tell you, that's not a good idea either. The rule of thumb is that if the purpose is to do something on the current page, it could be a button. But if it's takes users to another page or to an external site, it should be a link.
<button onclick="goTo('elsewhere')">But why? <( _ _ )> </button>
<div onclick="goTo('elsewhere')">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>
This not only wrong for crawlers, but also messes up the screen readers and causes a lot of trouble for people with any vision impairment. So please just use a link with a proper URL.
You saw we ruled out the pseudo URLs like
A URL contains these elements:
- A protocol (optional), which defines the protocol to be used for navigation such as
- It also has a host,
yashints.dev. A host is a name that one or some computers respond to. Usually it points to an IP address.
- Some URLs might contain another part such the second example above. That part which comes after the
#sign, is called a fragment identifier. By itself a fragment identifier is not a piece of content. It just points to a specific part in the content such as a header.
💡 Because fragments are not suppose to point to different content, crawlers ignore them altogether. This means for single page applications where they use fragment like routing, crawlers don't follow them and that's why people use techniques such as server side rendering or SSR to allow crawlers become aware of the page's content.
To sum it all up:
- Use proper link markup,
- Do not use other HTML elements to navigate users.
- Do not omit the
hrefattribute on an anchor tag.
- And last but not least, do not use fragment identifiers to load different content in SPAs if you can.
Hope you've enjoyed reading this and thanks for drooping by. Until next article, Ta.