Extract External Links on a Web Page

Sometimes we may want to extracts all links, especially external links, from a web page to analyze. Depending on the complexity of the webpage’s structure, it may take some time to identify all links from it. Other than manually find out all links from a web page, you can use browser developer tools or browser extensions to achieve that automatically.

Method 1. Extracting external links on a web page using browser Developer Tools

Just like Developer Options to Android phones, Developer Tools for web browsers are a set of web development and debugging tools that are primarily intended for developers.

The most common web browsers, such as Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge, all come equipped with their own set of Developer Tools.

The Console is a very useful tool for developers to execute and debugg JavaScript code. We can use a code snippet to loop through all the links on the page and quickly highlight and list all external links from a web page.

Right-click on the web page and select “Inspect” to open the Developer Tools. Then go to the “Console” tab. Copy and paste following code into the Console and run it to list all external links in the console.

var links = document.querySelectorAll('a');
Array.from(links).forEach(link => {
    if (link.hostname !== window.location.hostname) {
        console.log(link.href);
    }
});

Alternatively run following code to display all external links in the console as well as highlight them on the page.

var links = document.querySelectorAll('a');
Array.from(links).forEach(link => {
    if (link.hostname !== window.location.hostname) {
        console.log(link.href);
        link.style.border = '2px solid red';  // Optional: Highlight the link on the page
    }
});

Extract & highlight external links on a web page in Firefox browser

Extracting external links on a web page in Firefox browser
Extract, highlight external links on a web page in Firefox browser version 121.0.1

Extract & highlight external links on a web page in Chrome browser

Note that before you paste the code snippet into the DevTools Console, you may be prompted to type ‘allow pasting’.

Extracting external links on a web page in Chrome browser
Extract, highlight external links on a web page in Chrome browser Version 120.0.6099.225

Method 2. Extract all links from a web page using Link Gopher

Alternatively, you can use browser extensions that are designed to highlight or extract links such as Linkclump, Check My Links and Link Gopher.

Link Gopher is available for both Chrome and Firefox. It can help us easily extract all links from web page, sorts them, removes duplicates, and displays them in a new tab for copy and paste into other systems.

Add this free add-on to your Firefox web browser on computer. Optionally pin it to the toolbar of your browser so you can quickly access it. Open the web page or URL link from which you like to extract all links from in Firefox browser. Then click the Link Gopher icon in the toolbar, choose Extract All Links or Extract Links by Filter. A new tab opens in your web browser with all internal and external links listed. You can then inspect the links and copy them over to Excel, Notepad or other programs.

Extract links on a web page using Link Gopher
Extract links on a web page using Link Gopher

Method 3. Extract links using third-party tools

There are many third-party tools (e.g. Screaming Frog SEO Spider, Xenu Link Sleuth, etc.) that can quickly list all the external links in a page. These tools usually have a graphical interface and are relatively easy to use.

Leave a Comment

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