seo Question posted in
Some basic information to get you started with this can be found here.

Is it necessary to pass 'passHref' to NextJS <Link> having a Semantic UI React as its child component? – SEO

I’ve been reading the nextjs docs and it says in here that:

If the child of Link is a function component, in addition to using
passHref, you must wrap the component in React.forwardRef:

I’m new to using Semantic UI React so I’m not really sure if I need to do this and more importantly how to do this. I’m concerned about this because just before the quoted lines above, the docs says here that:

Without this (the passHref), the tag will not have the href attribute, which
might hurt your site’s SEO.

I can pass the passHref like this:

<Link href='/posts' passHref>
  <Button>See Posts</Button>
</Link>

But the problem is that I don’t think that we can wrap a component from Semantic UI with the React.forwardRef since it’s just imported. So my questions are:

  • Is it just fine to let this be?
  • Or is there a workaround for this to "not hurt" my site’s SEO?
Tags:

3

Answers


  1. 0

    You need passHref only with some tags, here is an example. is not about SEO, and your quote is about "If your does not have passHref attribute and has child, your SEO might be broken".

    Just create 2 pages with passHref and without, and check the pages, for example, with LIghthouse of chrome or any other tool. Also, check the DOM, you will see, no changes in SEO directly. (ofc if child components are html or even react components with no "required" href property.)

    Login or Signup to reply.
  2. 0

    Yes . The nextJs Documentation states if your child is not just an tag but a functional or class component then the passHref is needed. Make sure to pass it whenever you use a react component as a child

    Login or Signup to reply.
  3. 0

    yes, in some cases you need to do the following according to the Nextjs documentation:

    function NavLink({ href, name }) {
  // Must add passHref to Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search