skip to Main Content

I am making a website in nextjs and reactjs. The website is this https://www.codingconquerors.com/. When I check the lighthouse report, it gives me an err that "links are not crawlable". It is a SPA. I am almost googling from last 4 days but still not able to figure out the solution for this. Below code is displaying the navigation bar:

{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>
              ))}

The above link tag is from this import import { Link } from 'react-scroll'

Even I tried using Nextjs Link tag instead of reactjs it still does not fix the issue.

The source code generated behind the link tag does not show use of href tag.
Is there any way I can fix this SEO issue? Or I have to live with this since it is a SPA.

3

Answers


  1. Chosen as BEST ANSWER

    I had to display the link tags normally without using # and then had to add onclick event in react which appends # in front of the tag values. I am not sure about the approach if it is correct or not but it solves my SEO reports. And now it is 100%


  2. This issue is not related to the above tag, upon checking the lighthouse report, I found that the nav links in the header are anchor tags without links which is causing the following issue.

    Lighthouse SEO Analysis

    Which are these:
    Links without href

    Code for nav links

    Login or Signup to reply.
  3. if you trying to fix this with empty ‘href’ anchors (on WordPress, like me!), try this with custom JS:

    /* fill empty anchors */
    jQuery('a:not([href]), a[href=""]').attr('href', '#');
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search