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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

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
How to display random posts in WordPress?WordPressWordPress: How to display fields from ACF Flexible Contents?WordPressWhat is Hadoop and Hadoop Ecosystem?MiscellaneousStyling Lists with CSSCSSIntroduction to components and templates Part 4: Pipes and DirectivesAngularThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptHow to show widgets on the Appearance tab in WordPress?WordPressfor @each loop in SCSSSCSSSolution for “Yarn build: Failed because of a stylelint error”WordPressA simple example on grid ‘auto-fill’ vs ‘auto-fit’CSSIs monitoring an employee’s work on a computer a desirable or undesirable activity?MiscellaneousHow to convert a function component into a class in React?React