Mar. 07, 2024
Mechanical Parts & Fabrication Services
There are so many websites out there that have not considered the overall usability of their visually impaired users. When it comes to designing better links and sending better emails, Slava Shestopalov has a few tips on how to improve your website’s experience while accessibility in mind.
Why are “click here” and “by this link” poor choices? And is it acceptable to use “read more”? All these phrases have become so common that many people don’t see any problems with them.
How many times have you encountered or composed the following on websites, in emails, or intranets?
- Fill in this form by the end of the day.
- Check the equipment policy by the link.
- You can find more information here, here, and here.
In this article, I’ll explain popular wording and formatting mistakes and will show more accessible and informative alternatives. Let’s go!
So what exactly is a hyperlink? It’s a combination of a web address (URL) and a clickable element (oftentimes a word or phrase, sometimes an image). While this is a vast topic, we’ll focus on text links, namely their usability and accessibility.
Thoughtfully composed links express respect to readers, whereas jumbled-up ones cause confusion and suspicion. When a link is presented as “here” or “this,” it’s harder to aim it with a cursor or finger. Also, it lacks transparency. What is hidden behind it: a page or file, an article or web form? One should re-read the whole sentence or paragraph to guess.
Links embedded into meaningful phrases are more comprehensible. (Large preview)On the contrary, URLs attached to concise self-explanatory phrases inform people about the destination and are more convenient targets for clicking or tapping. Moreover, a well-composed link makes sense out of context and typically combines a topic (e.g. security, brand, marketing) and format (questionnaire, request form, guideline, policy, and so on).
A well-composed link text usually makes sense out of context. (Large preview)If a web address is short and doesn’t look like M$c0P88%X4LHr&dxQ1A, then exposing it right away will work quite well, too, especially if the audience is supposed to copy it and paste it somewhere else.
And if you’ve got a long indecipherable chain of symbols, exposing it isn’t a great idea in most situations. In this case, consider embedding a URL into a succinct phrase or shortening the address in tools like Bitly or Cuttly.
However, these tools aren’t silver bullets: you do get a shorter link, but its meaningful parts will be replaced with random symbols, which are suspicious and not informative. Customizing shortened URLs is possible, but it’s typically a paid feature.
Compare the following examples:
bit.ly/30SjUa4y (suspicious and unreadable);bit.ly/smashing-books (readable topic);smash.ing/30SjUa4y (recognizable domain);smash.ing/books (fully transparent).A link that guides to some downloadable resource needs a slightly different treatment. Besides embedding it into a meaningful phrase, you should also inform users about the file format and size:
When you share a bunch of files (let’s say in different formats or versions), it’s not enough to design each link correctly. The whole series should be well-scannable and easy to use.
More with less: try to edit out repeated words and keep the list compact. (Large preview)Not all links on a page or in an email are equally important. Authors often want their audience to click on the primary link, whereas other links can be skipped. If you’re going to draw people’s attention to the main action, think of presenting it as a button:
If you cannot create a button because of technical or time constraints, go for a quick-and-dirty solution: put that link in a separate line, make it bold, add spacing above and below, and so on.
The main link can also be located on a separate line with spacing from the rest of the text. (Large preview)Of course, button text should follow corresponding patterns so that you don’t cross the line between motivating readers and manipulating them:
Compare “Download the report,” which assumes that downloading starts immediately after clicking, and “Get the report,” when a user downloads the file in exchange for their name and contact details.
Prominent buttons are suitable until they turn into aggressive banners or are overused. (Large preview)Links enable the functioning of the Internet, however, vigorously pumping URLs into each sentence isn’t a good practice (of course, unless you contribute to a Wikipedia-like knowledge base that is cross-connected by nature).
Step zero is to make sure you really—really—need all the links. If you can edit something out, there won’t be a problem to solve. Otherwise, try to group the links: as a bulleted list, on the side of related paragraphs, or under a suitable title (e.g. “Recommended materials” or “Resources”).
Link-crowded texts overwhelm the audience with too many options. Moreover, it’s challenging to formulate links when as part of a sentence. (Large preview)Grouping the links helps a lot, but if the goal is to trigger action, the primary link should stand out. So, why not make it a button, then?
The more eye-catching a link is, the more it encourages clicking/tapping on it. (Large preview)In the previous sections, we figured out how descriptive links increase usability and accessibility. At the same time, such links are longer, and consequently, can appear divided in a paragraph, when the first part of a link remains at the end of the previous line, and the second part jumps to the next line. It seems trivial compared to bigger flaws, but distorted links are a bit annoying in link-crowded texts.
Split links are a bit harder to perceive than the ones that fit into corresponding lines. (Large preview)If a paragraph width is fixed, compose text the way all links fit into lines, for example, try to start a paragraph with a link. However, browsers and devices render content differently, and links will still shift for some users. That’s why lists are a safer option for a set of links.
Accessible links are not only the ones that look tidy and clear; they should also be properly working. Web Content Accessibility Guidelines (WCAG), the world’s most famous digital accessibility standard, includes recommendations about hyperlinks, including some non-visual features.
One of the WCAG requirements is not to rely on color only when you want to distinguish a button or link from the rest of the text. Painting links in blue or another color doesn’t suffice since it still might not be visible for people with color blindness. The most typical method is underlining links; they can also appear in bold font.
Links should differ from the rest of the text by at least one more characteristic, except the color. (Large preview)Links are essential interactive elements and have to comply with contrast recommendations. WCAG has two levels of contrast compliance:
For example, the AA level requires maintaining a contrast between a link and background of at least 4.5:1 for normal font size and 3:1 for large text.
Note: You can always check your colors with the help of the online Contrast Checker or Figma’s Contrast plugin.
Measuring contrast by the eye doesn’t always work. For example, green should be darker and more saturated than blue to pass the requirement. (Large preview)Like all interactive components, links should have a visible keyboard focus. All popular browsers have an embedded accessible focus by default (you might have seen this bold blue frame around input fields, dropdowns, buttons, and links in Google Chrome). Unfortunately, on some sites, focus gets manually removed or visually customized so that a focused link can look even less noticeable (e.g. faded out).
If you don’t have inspiration for creating a custom focus state, at least keep the standard one. (Large preview)Blind users don’t see the web — they listen to it by means of “screen readers,” assistive programs that transform a written text into fast robotic speech. They navigate with a keyboard and remember dozens of handy shortcuts to jump between headings, buttons, or links instead of obediently listening to the entire content on a page.
So, when you remove wordiness for sighted people (for example, in the lists of different language versions or formats), it’s important to keep links clear for screen reader users, too. Otherwise, blind visitors will hear the following:
“Ukrainian — link, English — link, German — link”
The self-explanatory should be heard instead:
“Download project plan template in Ukrainian — link, download project plan template in English — link…”
And probably the most annoying thing on a news website is to hear this:
“Read more — link, read more — link, read more — link”There are two main ways to put a link on a news page: make each title a link or add auxiliary phrases like ‘Read more…’. (Large preview)
Sighted people can guess that “Read more…” relates to the nearest title, and blind people need individualized read-mores. Fortunately, the HTML attribute aria-label comes in handy here; it enables attaching explanatory text for screen reader users.
It’s often a designer’s responsibility to compose accessibility-related text and collaborate with a developer around optimal implementation, so here is a simplified code example:
<h4>News</h4>
<p>Eleks Design Team will participate in the Space Hackathon.
<a href="aerospace-hackathon.html" aria-label="Read more about Eleks participation in the Space Hackathon">Read more...</a>
</p>
<p>Projector Tech and Creative Institute launches five courses on web accessibility this year.
<a href="new-courses.html" aria-label="Read more about new courses on accessibility by Projector Institute">Read more...</a>
</p>As you can see, each “Read more” has an extended explanation for screen readers. However, you won’t need to take care of article links with aria-label if each title is a link itself.
<h4>News</h4>
<h5><a href="aerospace-hackathon.html">Eleks Design Team will participate in the Space Hackathon</a>
</h5>
<h5><a href="new-courses.html">Projector Tech and Creative Institute launches five courses on web accessibility this year</a>
</h5>Multiple identical links are yet another widespread controversial practice. For example, on a web page, it means that the same web address is attached to an article title, hero image, and intro sentence. At first glance, nothing’s wrong: wherever you click — you get to the article. But for blind users, it means repeating the same information thrice, which extends the time they need to sift through content to what they are interested in.
It’s better to make the whole block a link rather than create multiple links that guide to the same destination. (Large preview)An important note: We are now talking about identical destinations, but a card can include different ones, for instance, a link to the article, author’s profile, and tags. In this case, minor links can appear “wrapped” in the main one.
The click area of the primary link ‘wraps’ the auxiliary ones (author’s profile and tags). (Large preview)Now, emails. Let’s say we have an invitation to some online event, where a Zoom link repeats several times. In the event description, “what/when/where” section, and closing part. Not only will it create an impression of mess for sighted users, but also visually impaired users will be troubled with jumping between duplicated links.
One prominent link speaks louder than a bunch of scattered ones. (Large preview)In this article, I wanted to suggest options instead of showing the topic in black and white. There are multiple shades of good design, and you can find yours on the overlap of best practices and your particular case. Meanwhile, some additional reading on this topic:
(vf, yk, il)
Explore more on
Drive more traffic to your site. Use AI to save time doing SEO tasks. Make SEO easier. And get 24/7 support.
$
»
Before your content can rank, it needs links. Google finds your posts and pages best when linked to from somewhere on the web. Internal links also connect your content and give Google an idea of the structure of your website. They can establish a hierarchy on your site, allowing you to provide the most important pages and posts with more link value than other, less valuable pages. So using the right internal linking strategy can boost your SEO! In this article, we’ll discuss the importance of internal linking, how to approach it, and how Yoast SEO can help you with internal linking.
Did you get a red bullet for internal links in Yoast SEO? Jump straight ahead and read how this assessment works in Yoast SEO and how to improve your internal linking.
An internal link is any link from one page on your website to another page on your website. Your users and search engines use links to find content on your website. Your users use links to navigate through your site and to find the content they want to find. Search engines also use links to navigate your site. They won’t see a page if there are no links to it.
There are several types of internal links. In addition to links on your homepage, menu, post feed, etc., you can also add links within your content. We call those contextual links. Contextual links point your users to interesting and related content. Moreover, they allow search engines to determine what content on your site is related and its value. The more links a significant page receives, the more important it will seem to search engines. Therefore, good internal links are crucial to your SEO.
Every website — even online stores — consists of internal and external links. Internal links connect pages and posts on your website, and external links connect your pages to other websites. This post focuses on internal links and what they mean for SEO. See our posts on link building if you want to get more external links pointing to your site.
Internal linking is an essential factor for Google and other search engines. But why? Google follows links to discover content on websites and to rank this content in the search results. If a post or page gets many links, this signals to Google that it’s an essential or high-value article. This counts for internal as well as external links.
Internal linking is something you control as a site owner. You’ll guide visitors and Google to your most important pages with the correct internal links. Our internal linking tool (not available yet in Yoast SEO for Shopify) can help you suggest related posts to link to!
Google crawls websites by following internal and external links using a bot called Googlebot. This bot arrives at the website’s homepage, renders the page, and follows the first link. By following the links, Google can work out the relationship between the various pages, posts, and other content. This way, Google finds out which pages on your site cover a similar subject matter.
For example, this post will have links to the ‘Content SEO’, ‘Internal linking’, and ‘Site structure’ tags. We make sure Google understands that the content on those pages is related to the content of this post by adding these links.
As websites grow in size and complexity, orphaned content becomes an issue for many. Orphaned content refers to pages on your website that have no internal links pointing to them. This issue is because search engines can’t find and index them without any internal link to lead the Googlebot to these pages.
Even though websites nowadays have sitemaps that list the URL of — most — pages on your site, search engines may take a long time to reach these pages eventually. This is especially true for very big websites that take a lot of resources to crawl or newly created sites that don’t get visited often by Google. Adding internal links to your newly published pages provides search engines with more ways to reach those content.
In addition to understanding the relationship between content, Google divides link value between all links on a web page. Often, the homepage of a website has the most significant link value because it has the most backlinks. That link value will be shared between all the links on that homepage. The link value passed to the following page will be divided between the links on that page and so on.
Therefore, your newest blog posts will get more link value if you link to them from the homepage instead of only on the category page. And Google will find recent posts quicker if they’re linked to from the homepage.
When you understand that links pass their link value on, you’ll understand that more links to a post mean more value. That’s because Google deems a page with lots of valuable links more important; you’ll increase the chance of that page ranking.
It’s crucial for your SEO to evaluate and improve your internal linking strategy regularly. It’s one of the ways to improve the fitness of your website. By adding the right internal links, you make sure Google understands the following:
There are several things to consider to set up your internal linking strategy. How you go about it depends on your site and goals, but the following steps are a good rule of thumb.
We always advise website owners to imagine their website as a pyramid. On top of it is your homepage; below are some sections or categories, and further down are individual posts and pages — possibly with subcategories in between.
Your website’s menu should reflect this structure if you do it well. In our Ultimate guide to site structure, you can read how to create the best site structure for your site.
It would help if you determined what your most important content is. If you’re not sure, please read our article on cornerstone content. In short, it’s your best and most complete content about the core of your business. It’s the content you want people to find when searching for topics or products you specialize in.
You must add many links to inform Google that this is your most important content. There are various spots from where you can link to your cornerstone content. Here, we’ll give the most common options, from your post’s copy to your navigation.
When you’ve written various articles about a certain topic, you should contextually link them. This will show Google – and your users – that those articles are topically related. You can link directly from sentences in your copy or add links at the end of your post.
Moreover, you want to show Google which articles are your cornerstone: your most complete article on this topic. To do so, you must add a link to the cornerstone in all articles on this topic. And don’t forget to link back from the cornerstone to the individual posts.
Our blog has a cornerstone content article called ‘The ultimate guide to keyword research’. This post will rank for all related search queries about [keyword research] in Google search results.
So we’ve added links from other relevant articles, such as ‘7 keyword research mistakes to avoid‘, ‘ What is keyword research‘, or ‘Focus on long tail keywords‘ to the main article. And we link back from the main article to these posts. In doing so, Google will understand that the ultimate guide contains the most information about [keyword research]. So, in the end, Google will rank the ultimate guide above the other shorter posts about keyword research.
If you have hierarchical pages on your website, link parent pages to their child pages and vice versa. Also, don’t forget to link sibling pages to each other. These pages should be related to each other on a well-organized site, and connecting them like this make perfect sense.
Read all about linking parent and child pages for SEO.
You can find many plugins and modules to add complete related post sections to your posts. This is an excellent way to show your posts to more visitors. If you use one, we recommend testing whether the related posts are related. If you’re not sure, linking to posts manually is probably best. That’s what we do on Yoast.com – we select a related post manually (or with a bit of help from our internal linking tool – more on that later) and place a link to that post at the bottom of the article. The related links block in Yoast SEO Premium helps you do this in a jiffy.
We explain this in detail in this post about linking to related posts.
Besides linking from topically-related posts and pages, it’s possible to make your cornerstone content more authoritative by adding links from the homepage or the top navigation menu. It would help if you did this with the posts and pages most important to your business. This will give these posts or pages a lot of link value and strengthen them in Google’s eyes.
Taxonomies, like categories and tags, help you organize your site and help users and Google understand your content. If you have a blog, adding internal links to the taxonomies that the post belongs to could be beneficial. Adding links to the category and tags helps Google understand your blog’s structure and helps visitors navigate related posts more easily.
For instance, on the first page of our SEO blog, we link to several tag pages, including technical SEO and SEO basics.
A good practice after you publish a post or page is to link to that newly published post from other content on your site. Of course, the posts or pages that link to the recently published post must be of a similar topic. You shouldn’t just link to this new post from a random post or page on your site.
Now, this might sound daunting, especially if you regularly publish content. But it’s worth the hassle, as you won’t end up with a bunch of orphaned content that needs fixing. Besides, adding internal links to your most recent posts ensure that search engine crawlers can crawl and index them when they land on other pages on your site.
The last option to mention is creating internal links to your website’s most popular posts or pages. Preferably create these sections in the sidebar or the footer of your website to have them appear on all pages and posts. As link value passes to these most popular posts from many different pages, they get a boost. Besides, the posts will be more accessible for visitors, increasing traffic – and more traffic is a positive sign for Google.
You also probably have links that aren’t important for SEO on your website. For example, if you have a login link for your clients on the homepage, you don’t want to leak link value to your login page – that page doesn’t need to rank high in the search results.
You used to be able to prevent losing link value to unimportant links by giving them a nofollow tag. A nofollow tag asks Google not to follow the link, so no link value is passed. Now you might think: “I’m going to nofollow less important links to give the most important links more link value.” While this worked in the past, Google has become more competent. Now it seems that the link value for those nofollow links doesn’t automatically flow to the other links on the page. The nofollow link will be counted as a link, and the link value will be lost. Therefore it makes more sense to have fewer links on a page instead of nofollowing some of the links.
Adding a nofollow tag doesn’t mean those target pages can’t be found in Google’s search results. You should give them a noindex tag if you don’t want pages or posts to appear in the search results. The noindex tag means that Google shouldn’t render the page and shouldn’t give the content a place in the Google index to show up in the search results.
Read more: Why noindex a page or nofollow a link? »
Once you have decided which links should be on a page and which pages should get link value, using the correct anchor text is essential. The anchor text is the clickable text that visitors see. For example, the anchor text of the two internal links in the example below are ‘link schemes’ and ‘paid links’:
You can see the anchor text containing the link in this image.If you over-optimize anchor text, you might hurt your website. By over-optimizing, we mean keyword stuffing. Previously, you could give all anchor texts the same keyword, and Google would rank your site higher for that keyword. Nowadays, Google is smart enough to understand that the content around the anchor text says more about the relevancy of a keyword than the anchor text itself. So please ensure the anchor text looks natural in your copy: it’s OK to use keywords but don’t add the same keywords to every link’s anchor text.
Keep reading: The context of internal links »
Yoast SEO includes several checks and features to help you improve your internal linking.
On a post level, the Yoast SEO plugin helps ensure you give internal links some thought. In the plugin meta box — or the sidebar, as shown below –, the internal link assessment of Yoast SEO checks whether you’ve created links to other pages on your website in your text. It also checks if these links are followed or nofollowed.
For Yoast SEO for Shopify, this check only works on posts or pages. You do not have internal links on your product pages or product descriptions because you want to keep customers there — not send them to another part of your site. You need your customer to convert as quickly as possible. An essential part of Shopify SEO, right?
Add internal contextual links to relevant content on your site to get a green bullet for this check.
If you install Yoast SEO for WordPress, you’ll also get a handy tool in your post overview called the text link counter. This tool counts the internal links in a post and the internal links pointing to a post. This visualizes which posts should receive more links. This will all help you work purposely on your site structure.
You can see the number of internal links pointing to and from a post with Yoast SEOYou are probably aware of the importance of internal linking for SEO. But handpicking articles – and relevant articles – to link to isn’t always easy. Even if you have a small website, you might not remember every little thing you’ve published over the years. And suppose you’re managing a medium to large website, especially one where various people can write and publish content. In that case, knowing all your content on a given topic is difficult. When this happens, internal linking can take much more of your time than it should.
That’s precisely why we’ve built a dedicated feature in Yoast SEO Premium for internal linking – the internal linking suggestion. It’s incredibly easy to use, and you only need to set up this feature once. Yoast SEO will first scan, analyze and try to make sense of all your content in WordPress. Then when you write a post, you can immediately link to a related post by copying or dragging the link directly into the editor. You’ll see the suggestions in the Yoast SEO sidebar on the right-hand side of your screen. For instance, the screenshot below shows the internal linking suggestions for this post you’re reading! The green tick indicates that we’re linking to the suggested post from this one.
This feature makes internal linking much more intuitive. And that’s thanks to Yoast SEO content analysis running in real-time in the background. It analyses and compares your text to existing content on your site to pick out articles that best fit your new post, all while you’re writing! Even if the articles were written a while ago or by someone else on your team, Yoast SEO won’t miss them. This will help you create an outstanding structure by connecting related content without immediately overlooking articles you might not think of.
Internal linking suggestions by Yoast SEO Premium for this articleGetting your internal links back in shape is important because that helps you rank with the content you want to rank. That’s why we’ve introduced the cornerstone content internal linking workout in Yoast SEO Premium. You can use this workout to improve your internal linking based on the cornerstone approach we discussed earlier. In six easy steps, you can improve your site structure by learning where to find your cornerstones, how many links they have, and how to add links pointing to these important posts.
The first step in the cornerstone content workout in Yoast SEO PremiumOrphaned content is pages and posts with no internal links. That makes them hard for users to find and also hard for search engines to crawl. In the orphaned content workout, we identify your orphaned content and give you all the options and tools you need to deal with it! Maybe you don’t want those pages to be found. Maybe you want to delete them. Or maybe you want these pages to rank in Google and be found by your visitors. Whatever you decide for each page, the steps in this SEO workout make it easy to clean up your content.
The first step in the orphaned content workout in Yoast SEO PremiumWhen you have our Premium plugin, you can find these internal linking workouts in the backend of your WordPress website. Go to Yoast SEO in your left menu, and select the menu item ‘Workouts’. This will take you to a page where you can find our workouts. Of course, we’ll add other SEO workouts as we go along, which you’ll also find here when they’re released!
Unlock our internal linking features and get free access to all of our SEO courses with Yoast SEO Premium:
Get Yoast SEO Premium»
Only
$
99 USD / year (ex VAT)In the WordPress block editor, you can also easily link child and sibling pages with Yoast SEO premium. If you want to make sure you link all child and sibling pages, just select the sibling or subpages block, add it to your post, and you’re done. Of course, this only works for hierarchical post types.
Find all the Yoast SEO blocks in the block editorYoast SEO Premium has an orphaned content filter to make finding posts that aren’t linked even easier. This feature allows you to see which posts and pages aren’t linked to at all, by other posts and pages on your website. Using the filter, finding important posts that need more inbound internal links is a piece of cake!
Without links, your content can’t rank! With a solid internal linking strategy, you can show which content is related and which of your articles are most informative and valuable. If you follow the guidelines in this post both Google and your users will understand your site better, which will, in turn, increase your chance of ranking.
Read on: Site structure: the ultimate guide »
Edwin is a strategic content specialist. Before joining Yoast, he spent years honing his skill at The Netherlands’ leading web design magazine.
If you are interested in sending in a Guest Blogger Submission,welcome to write for us!
All Comments ( 0 )