CODEWITHSUNDEEP
lighthouse
Yohanes Christian
Yohanes Christian

Reputation: 107

How to fix Lighthouse error: "Warning: Links are not crawlable"

I tested my website on lighthouse and I got this error does anyone knows how to fix it?

Links are not crawlable

This is my code share social media button

<a class="crunchify-link crunchify-facebook" 
href="https://www.facebook.com/sharer/sharer.php?u=&t=" 
title="Share on Facebook" 
rel="noopener" 
target="_blank" 
onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"
>
    <div class="facebook-ic"></div>
</a>

Upvotes: 1

Views: 24842

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

Why did you get this warning?

Lighthouse tests for onclick="window.open to try and catch anchors that are activated by JavaScript instead of a href, as this is bad for SEO and accessibility.

Fixes / suggestions

If your href was valid I would say you could safely ignore this but it is not valid (empty "u" and "t" parameters).

Fix your href so that it is valid (build it server-side to populate the u and t parameters), you will still get the warning but it can be safely ignored then.

Although saying that if you fix the URL then target="_blank" will open the sharer in a new tab so that would be sufficient without the need for any JavaScript.

To remove the error you should move the event handler into a JavaScript file rather than using inline onclick handlers.

This will remove the warning after looking at the audit source code and is a good practice.

You can do this easily with target.addEventListener.

Quick example of event listeners

    const el = document.getElementById("fbLink");
    el.addEventListener("click", sharerFunction, false);

    function sharerFunction(e){
        e.preventDefault();
        
        window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL));
        alert("link will not open due to sandbox permissions, but check console it does fire");
    }
<a href="https://facebook.com" id="fbLink" ....**other stuff here**....>Facebook icon</a>

Relevant part of audit source code for reference

As mentioned earlier the source code for the crawlable-anchors test shows what is tested for, anything returning true is a fail, notice how the hasClickHandler test returns null as that is considered ok (I believe, it is late I may have misread the code!).

  const windowLocationRegExp = /window\.location=/;
  const windowOpenRegExp = /window\.open\(/;
  const javaScriptVoidRegExp = /javascript:void(\(|)0(\)|)/;

  if (rawHref.startsWith('file:')) return true;
  if (windowLocationRegExp.test(onclick)) return true;
  if (windowOpenRegExp.test(onclick)) return true;

  const hasClickHandler = listeners.some(({type}) => type === 'click');
  if (hasClickHandler || name.length > 0) return;

  if (rawHref === '') return true;
  if (javaScriptVoidRegExp.test(rawHref)) return true;

Upvotes: 1

Related Questions