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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
How to swap images on hover using CSS?CSSKanban vs Scrum: The two frameworks of agile principlesMiscellaneousSQL Right JoinSQL/MySQLHow to add multiple Columns in CSS like Bootstrap?CSSFilling a button background from left to right using CSSCSSHow to create a horizontal scrolling menu with and without flex using CSS (or SCSS)?CSSHow to switch dark and light themes using pure CSS?CSSAll different methods for accessing elements in the DOM using JavaScriptJavaScriptCreate dynamic selectors using SCSS (Sass)SCSSHow to select multiple values in React dropdown?ReactWhat’s a Web Storage API in JavaScript?JavaScriptHow to create a link tag button using CSS?CSS