[Resolved] Smooth Scroll – Unique ID issue – SEO

Home Forums Support Smooth Scroll – Unique ID issue – SEO

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #848427
    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
    #848506
    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.

    #848511
    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.

    #848517
    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.

    #848528
    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.

    #848529
    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

    #848530
    Joan

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

    Glad I could help a little. 🙂

    #848551
    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

    #848555
    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

    #848576
    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
    #848579
    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. 🙁

    #848587
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #848602
    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!

    #848833
    Patrick

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

    #919107
    epickenyan

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

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.