broken-link-checker

How to find a broken link and fix it?

I will show you for example how to audit a website for broken links.

I’m going to check the website https://adrtc.org

Step 1

Run check on https://wizardstool.com/

broken-link-checker

When you press the button Find broken links it will run checkup and you will be redirected to the next page.

audit in progress

some pages have been analyzed

When it’s done you will see the result. Press “Display 12 Broken links” to see only broken links

chek for broken links

Let’s check them one by one and fix.

Step 2

First Link is https://photos.arcticrescue.com . The label EXTERNAL says that the broken link is an external website.

If I try to open it manually it indeed isn’t accessible. It seems the domain owner removed subdomain photos, but the domain arcticrescue.com itself is still alive and functioning.

What can I do in this case?

  1. I can check in Webarchive what content was on that subdomain before. Can I find the same content on the main domain? If can, I will rather change the link to the main domain.
  2. I can find another similar website with similar content and change the link to it
  3. I can remove the link at all.

In my case, I want to remove the link at all.

Step 3

Let’s find the broken link on the audited website.

As you can see on the result page Anchor column is empty. It’s weird and usually a link has an anchor.

The column Found on tells us that the broken link is on the main page – https://adrtc.org/

Let’s open that page and open Chrome inspect (or press F12) and search for the broken link “photos.arcticrescue.com”

What I found:

chrome-inspect

The link doesn’t contain text content but just wraps HTML tag. On the page, it looks like a clickable icon. And if you click it you will open broken link photos.arcticrescue.com

clickable-icon

Step 4

The location of the link is identified, so now it’s easier to understand which template/part of the website you should edit.

The next step depends on what CMS/framework you use. It might be just enough to open the CMS content editor, or you might need to edit some of the website’s templates using an external editor.

I will show a simple example, we consider you can open CMS content editor and use Visual or source code mode.

If it’s visual mode, you should find that icon as in the previous picture and remove the hyperlink.

I prefer to use source code. I will try to find the HTML tag and remove it:

source-code-toremove

I removed the selected part and saved the changes. After that, changes will be reflected on the website.

removed-icon

The broken link was removed from the website. Done.

Step 5

Return to step 2. Apply steps to the next broken links from the Audit result.

If you check other broken links, they have values in the Anchor column. You could also notice links Find on page. This is quite handy for locating broken links. Click on that link and you will see something like this

highlited-broken-link

The broken link will be highlighted.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *