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

Question

我在 Lighthouse 上测试了我的网站，但出现了这个错误，有人知道如何解决吗？

Links are not crawlable

这是我的代码分享社交媒体按钮

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

Answer 1

为什么会收到此警告？

Lighthouse 测试 onclick="window.open 以尝试捕获由 JavaScript 而不是 href 激活的锚点，因为这对 SEO 和可访问性不利。

修复/建议

如果您的 href 有效，我会说您可以安全地忽略它，但 它无效 （空“u”和“t”参数）。

修复您的 href 使其有效（在服务器端构建它以填充 u 和 t 参数），您仍然会收到警告，但可以安全地忽略它。

虽然说如果您修复 URL 然后 target="_blank" 将在新选项卡中打开共享器，这样就足够了，不需要任何 JavaScript.

要消除错误，您应该将事件处理程序移动到 JavaScript 文件中，而不是使用内联 onclick 处理程序。

这将在查看审核源代码后删除警告，是一个很好的做法。

您可以使用 target.addEventListener 轻松做到这一点。

事件侦听器的快速示例

    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>

相关部分审计源码供参考

如前所述，source code for the crawlable-anchors test 显示测试的内容，返回 true 的任何内容都是失败的，请注意 hasClickHandler 测试 returns null因为这被认为是可以的（我相信，已经晚了我可能看错了代码！）。

  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;

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