DropDown and Transition - SEO

[arneke]

A friend created a beautiful menu using Transition and Popover for me. It works very much like the examples.

But when I deployed the site I realized that Googlebot was not able to see any of the links in the header menu. These links generally contain our most important keywords and are crucial for SEO on many sites.

I tested this by using Google's mobile friendly tool and searching for the keywords in the (rendered) source code it provides. It should match what you see when inspecting the HTML in developer tools.

Looking at the code it makes sense, the content is simply not rendered until you click on the button. I was wondering if anyone has dealt with this issue? E.g. using z-index or hide using CSS instead of not rendering. (Personally I think it deserves a mention in the documentation.)

Edit:
My workaround for now is to not use Transition and static className={(open) ? 'visible' : 'invisible')} on the Popover.Panel

Edit 2:
That didn't work. So I have an explicit handler to close the Popover (Next.js problem), and I render a second, hidden menu with links that Googlebot can see, but that is not actually accessible to users.

[KlotzJesse]

Hey,

I think you can accomplish this with: #44

unmount={false} on every Transition which should be still in DOM, visually no difference.

[mansoorkhan96]

Not related to Dropdown or Transition but to Popover.

Anyone having issues to always render the content of popover. Like if you are using it for main menu and have links for internal backlinks.

You can opt to always render the popover penal and use css to show/hide it.
https://headlessui.com/v1/vue/popover#showing-hiding-the-popover

Here is an example:

<Popover v-slot="{ open, close }">
  <PopoverButton>Example button</PopoverButton>

  <PopoverPanel
        static
        v-show="open"
  >
  Popover content or the submenu links go here...
  </PopoverPanel>
</Popover>

You may wrap <PopoverPanel> in <transition> if you want.