Yogesh Chauhan's Blog

Make sure your links have descriptive text

in UI/UX on April 7, 2021

You must have seen this error/flag in Lighthouse audit report.

Lighthouse audit showing links don't have descriptive text
Source: web.dev

Lighthouse flags the following generic link text:

  • learn more
  • click here
  • start
  • click this
  • go
  • this
  • more
  • right here
  • here

For example, DON’T DO THIS ❌

wrong method to add links

Why not?

The links are ambiguous as it doesn’t tell the users where it will lead them. It might be a spam and that’s why it should not be done that way.

DO THIS ✅

right method to add links

Why so?

The links are NOT ambiguous anymore as it DOES tell the users where it will lead them. They know before clicking that they will go to Google website or Dreamhost website.

Some best practices defined by Web.dev

  • Use link description relative to the page URl. For e.g. use Google’s Homepage for google.com
  • Aim for a few words in the link descriptions.
  • Pay attention to your internal links descriptions too. It will help in SEO.
  • Don’t use the page’s URL as the link description.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
WordPress: How to find all posts from a custom post type with multiple custom fields values?WordPressHow to Recognize an Array in JavaScript?JavaScriptHow to create Glowing Texts using CSS?CSSHow to get the height and width of an element using JavaScript?JavaScriptCreate a galley with overlapping images using CSS gridCSSWhat are Controlled Components in React?ReactWordPress: How to print ACF repeater field values?WordPressWhat’s the difference between visibility: hidden and display: none?CSSRecursive WITH Queries in Postgres (Common Table Expressions)PostgresWhat is HTMLUnknownElement?HTMLHow to convert datetime to date format in JavaScript?JavaScriptHow to create a vertically rotating texts using CSS?CSS