dots Created with Sketch.
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.
amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
What is XP (Extreme Programming) and When should it be used?MiscellaneousHow to check if the page is single post page in WordPress?WordPressLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPWhat is Prototypal Inheritance in JavaScript?JavaScriptKeyValuePipe in Angular 9Angulartransform-origin Property in CSSCSSHow to check if the element exists using JavaScript and jQuery?JavaScriptHow to enable and disable button using JavaScript?JavaScriptHow to select multiple values in React dropdown?ReactSolution to “NullInjectorError: No provider for module” in Angular 9AngularWhat are Null Sessions?MiscellaneousHow to create a Horizontal Scroll on button click using JavaScript?JavaScript