Share Facebook or Line with onclick function, but get SEO problem "Links are not crawlable"

Question

I share Facebook and Line with onclick function:

<a href="javascript:void(0);" onclick="window.open('http://www.facebook.com/share.php?u='.concat(encodeURIComponent(location.href)), '', 'menubar=no,toolbar=no,resizable=no,scrollbars=yes,height=700,width=550')" title="Facebook Share" aria-label="Facebook Share">

<a href="javascript:void(0);" onclick="window.open('http://line.naver.jp/R/msg/text/?Page title%0A'.concat(encodeURIComponent(location.href)),'Share with Line', config='height=700,width=550')" title="Line Share" aria-label="Line Share">

Google Lighthouse result:

Search engines may use href attributes on links to crawl websites. Ensure that the href attribute of anchor elements links to an appropriate destination, so more pages of the site can be discovered.

So I couldn't use <a> element, if want to open link with new window?

Answer 1

In this particular case I would say you could ignore that message, you are using the correct element from a semantics perspective.

However one way you could improve this (and remove the error) is to have the URL prebuilt on the server and then use a JavaScript listener to intercept the click and open your new window.

The big advantage of this is that you have a valid URL when your JavaScript fails and it is also better for SEO.

In the below example I have moved the URL, window name and window settings into data attributes on the link.

I then put the full URL into the href attribute without all the window settings etc.

Finally I attach an event handler to your links that intercepts the click and instead launches the window.

Please note you cannot run the below snippet due to sandbox on Stack Overflow so check this fiddle instead.

var anchors = document.querySelectorAll('.sharer');

for(var z = 0; z < anchors.length; z++) {

anchors[z].addEventListener('click', function(e) {
//stop the default click action
  e.preventDefault();
// grab the base sharing URL
  var URL = e.target.getAttribute('data-url');
// grab the name we want to give the window (parameter 2 on window.open)
  var windowName = e.target.getAttribute('data-windowName');
// Grab parameter 3 for window.oprn (window settings)
  var windowSettings = e.target.getAttribute('data-settings');
// call window.open
  window.open(URL + window.location.href, windowName, windowSettings);
}, false);

}

<h2>Won't work on Stack Overflow due to sandbox so may need tweaking your side</h2>

<a class="sharer" href="http://www.facebook.com/share.php?u=https://stackoverflow.com/questions/64640807/share-facebook-or-line-with-onclick-function-but-get-seo-problem-links-are-not" data-url="http://www.facebook.com/share.php?u=" data-windowName="" data-settings="menubar=no,toolbar=no,resizable=no,scrollbars=yes,height=700,width=550" title="Facebook Share" aria-label="Facebook Share">Facebook</a>

<a class="sharer" href="http://line.naver.jp/R/msg/text/?Page title%0Ahttps://stackoverflow.com/questions/64640807/share-facebook-or-line-with-onclick-function-but-get-seo-problem-links-are-not" data-url="http://line.naver.jp/R/msg/text/?Page title%0A" data-windowName="Share with Line"  data-settings="height=700,width=550" title="Line Share" aria-label="Line Share">Line</a>

<h2>fallback behaviour</h2>
<p>The below shows how the link behaves with no javascript</p>

<a href="http://www.facebook.com/share.php?u=https://stackoverflow.com/questions/64640807/share-facebook-or-line-with-onclick-function-but-get-seo-problem-links-are-not" title="Facebook Share" aria-label="Facebook Share" target="_blank">Facebook</a>