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

Question

<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">

this is the one click function 

so  I couldnt use <a>  element, if want to open link with new window 

Answer 1

the one way to improve it is to prebuild your URL on the server 
and intercept the click and open your new window using a javascript listener 
the main advantage of this is that you will have a valid URl when the javascript fails and its an advantage for a better seo

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>