如何在React js中的单个pare应用程序中制作可爬行的链接

Question

我正在使用nextjs和reactjs制作一个网站。网站是这个https://www.codingconquerors.com/。当我检查灯塔报告时，它给了我一个错误“链接不可抓取”。这是一个水疗中心。过去 4 天我几乎在谷歌上搜索，但仍然无法找到解决方案。下面的代码显示导航栏：

{navigation.map((item) => (
                <Link
                  spy={true}
                  smooth={true}
                  key={item.name}
                  to={item.href}
                  className="font-medium text-gray-500 hover:text-gray-900"
                >
                  {item.name}
                </Link>
              ))}

上面的链接标签来自这个

import import { Link } from 'react-scroll' 

即使我尝试使用 Nextjs Link 标签而不是 Reactjs，它仍然无法解决问题。

link标签后面生成的源代码没有显示href标签的使用。 有什么办法可以解决这个 SEO 问题吗？或者我必须忍受这个，因为它是一个 SPA。

Answer 1

我必须在不使用#的情况下正常显示链接标签，然后必须在react中添加onclick事件，该事件在标签值前面附加#。我不确定该方法是否正确，但它解决了我的 SEO 报告。现在已经100%了

Answer 2

这个问题与上述标签无关，在检查lighthouse报告后，我发现标题中的导航链接是没有链接的锚标签，这导致了以下问题。

这些是：

Answer 3

如果您尝试使用空的“href”锚点来修复此问题（在 WordPress 上，就像我一样！），请尝试使用自定义 JS：

/* fill empty anchors */
jQuery('a:not([href]), a[href=""]').attr('href', '#');

Answer 4

此问题的解决方案是将 'href' 添加到链接，在我的例子中：href='#projects'

<Link
     href='#projects'
     to="projects"
     smooth={true}
     duration={500}
     offset={-50}>

     <button className="axil-btn btn-fill-primary btn-fluid btn-primary">
         See More
     </button>
</Link>