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:
<a href="https://techstacker.com">TechStacker </a> - 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.
- Anchor text affects SEO. Search engines want links that are descriptive and relevant to the content they link to.
- Anchor text affects Accessibility. Think about how a screen reader will read your anchor text to the visually impaired. Let that guide your anchor text description.
To Conclude
Anchor text affects both SEO and UX. By putting some thought into how you name your anchor text, you will make both your readers and search engines happy.
I read Google’s SEO Starter Guide as part of my research for this article.
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.
Like the digital product designer, Luke Wroblewski says:
Obvious always wins.
