[Resolved] Smooth Scroll – Unique ID issue – SEO

[Patrick]

Hi
I’m using the smooth scroll feature with my primary menu. So I have a Menu item with a custom URL that’s called https://example.com/#about and a section with the id=”about”. Scrolling works perfectly.

I checked my Site with https://web.dev/. The only problem seems to be with the Accessibility. It says the following:

These are opportunities to make sure your HTML is appropriately structured.

[id] attributes on the page are not unique
The value of an id attribute must be unique to prevent other instances from being overlooked by assistive technologies.
Failing Elements

<ul id="menu-primary" class=" menu sf-menu">

<li id="menu-item-125" class="smooth-scroll menu-item 
menu-item-type-custom menu-item-object-custom 
current-menu-item current_page_item menu-item-home 
menu-item-125"><a href="https://example.com/#about" 
aria-current="page">About</a></li>

<li id="menu-item-72" class="smooth-scroll menu-item 
menu-item-type-custom menu-item-object-custom 
current-menu-item current_page_item menu-item-home 
menu-item-72"><a href="https://example.com/#contact" 
aria-current="page">Contact</a></li>

+ all the other links

What can I do?

GeneratePress 2.2.2

GP Premium 1.7.8

[Joan]

You’re saying that both your link and ID contain “#about”?

Only your link is supposed to contain “#about”. The ID is supposed to contain simply “about”, without the “#”.

Could that be it?

***Oh, you just made a typo, I see you now corrected it.***

Not that then.

[Patrick]

Nope 🙁 checked it, its correct. Those two are connected for example

<a href=”https://example.com/#about”>About</a> 
and 
<section id=”about”>Blala</section>

But that output from web.dev makes no sense to me. Or does Google think the URL /#about is also an id? I don’t get it.

[Joan]

I reproduced exactly what you did on one of my pages (yup, I have nothing better to do. Lol), and checked it with web.dev and it didn’t give me the same result as you. Everything was ok.

So I would say you have a duplicate ID somewhere on the page that isn’t easy to see.

Are you using Chrome? You can just open the Developer tools under “More tools”, for your page and run the Audit or click the “Accessibility” tab and then expand the “Accessibility Tree” and see if it gives you more info about where on the page the duplicate is.

It might not be easy to find, but it’s there somewhere. I looked up a couple of posts from people who had similar issues in the past (not GP users), and they thought web.dev was making a mistake, but it turned out no…but they had to do some digging around in their page.

[Joan]

I found a duplicate ID extension for Chrome. It scans the page looking for ID Attributes and highlights the duplicates. Tested it and it seems to work.

https://chrome.google.com/webstore/detail/dup-id-scans-html-for-dup/nggpgolddgjmkjioagggmnmddbgedice/related

***Correction: It doesn’t highlight the duplicates, but just tells you where on the page to look if there is one or possibly one.

[Patrick]

Thanks a lot for your help, it really seems something is wrong with my Menu.
Audit Screenshot
Chrome Plugin Screenshot

I finally found the problem, when I deactivate “Menu Plus” the problem disappears. I activated it today so I can use the sticky navigation feature.
So maybe this is something Tom has to fix, idk.

Thanks again, it was driving me crazy

The issue is still not resolved tho 🙂 At least we now know where its coming from

[Joan]

Wow, the audit and dup-id extension found several.

Glad I could help a little. 🙂

[Joan]

Hey, I was thinking…(dangerous thing for me to do. Lol):

You might try to have your custom url be something different at the end, like #about123, and make your ID about123 and see if that works. When making your link, you can still set the label of the menu as “About”.

It could just be the commonality of “about” as an ID that is causing the issue – perhaps several instances of “about” in the code generally, I mean.

Not sure about that, but might be worth testing some different variations.

Tc

[Patrick]

It seems the “Menu Plus” Module is duplicating my Menu somehow. It even happens with Page Menu Items not just my custom urls.
Maybe you could try to replicate my problem, if you don’t mind 🙂
–> activate “Menu Plus” Module with Sticky Navigation in the customizer and transition:none and desktop-only

[Joan]

Just came back. Replicated everything and YES, problems for sure:

Possible Duplicate IDs:
menu-item-574 found 2 times 
menu-item-748 found 2 times 
menu-primary found 2 times 
primary-menu found 2 times

[Joan]

I used the Dev Tools console to do a search on the code for “about” and I think you are correct: It appears to be duplicating the menu code. 🙁

[Tom]

I believe this is an issue with our sticky navigation at the moment. It happens because the sticky navigation clones itself to prevent the page from jumping when the navigation becomes fixed.

I’ll see if I can get this fixed in GPP 1.8 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Joan]

Ah, interesting.

Well, I don’t use the sticky nav, just trying to help Patrick. I like trying to solve puzzles now and then. 🙂

Thanks!

[Patrick]

Ah that makes sense, at least I know now what’s happening 🙂
Thanks, Joan and Tom

[epickenyan]

I saw this feature was added in 1.8 then removed coz it was breaking some fonts? Will it be added back, Tom?

[Author]

Posts