There are many opinions about how you should visually style your anchor links from a design perspective. Today we’ll focus on something even more important: how to name your link anchor text and why. A shocking amount of websites
get this wrong, I’m guilty of this too.
To create a clickable link on a website, we wrap our link path with the HTML anchor tag: <a></a>. Anchor tags can contain many attributes: URL (the link path) classes, an id, a title, and anchor text.
Anchor text refers to the clickable part of a link. It’s the text (not the link URL) that we wrap our anchor tag around.
Here’s a link to the TechStacker front page. Here’s how the HTML looks:
The URL inside href=" " is the link target
The >TechStacker< is the clickable anchor text that leads to the target.
Take a look at the two following different ways of writing anchor text for links. In this case, the link target is a page about performance optimization. The first anchor text is bad, the second one is good:
Why is the first anchor text bad? The first one is non-descriptive, the second one is descriptive and relevant to the URL destination it leads to.
Some anchor text pointers:
Keep your anchor text short. Anything above 5 words will often clutter your layout, especially if your anchor tags are heavily emphasized design wise. It depends on the context though.
Use meaningful and descriptive anchor text. “Click here” is not descriptive, neither for people using screen readers or people with normal eyesight.
Do you see what I just did? The anchor text above is descriptive and relevant to both the context of this article and the Google SEO Start Guide that it links to. That’s how you should name your anchor text
Anchor text should set up an expectation. It’s similar to how UI Cards work as a preview for more detailed content (articles, product pages etc.). Examples: Medium’s front page or here on TechStacker.
I actually wrote this article to remind myself how important it is to use meaningful descriptions for content in general, whether it’s blogging, coding, or even a grocery list. Don’t be vague, be descriptive.