Hidden Container in Desktop (only visible in mobile) is shown in source code.

  • Hello,

    I created a container with the H1 header. I duplicated this container and set the first to be shown in ‘desktop’ devices and the second to be shown in ‘mobile’ devices. I did this in Container/Advanced/Adaptability

    At the frontend it works fine, the containers are hidden accordingly. But if I inspect the source code for this page I find two H1. This is a problem for the SEO.

    I need Elementor to remove from the page the containers and elements that are set to be hidden for the selected devices (desktop, tablet, mobile); and not only hide them using css. Otherwise it will damage the SEO.

    What am I missing here?

    Please, let me know how to fix this.

    Walter.

    • This topic was modified 2 weeks, 1 day ago by jaspash.
    • This topic was modified 2 weeks, 1 day ago by jaspash.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter jaspash

    (@jaspash)

    More info:

    Capture: https://drive.google.com/file/d/1Jl8iLN9Kti4Sfe3upMqP6uC7KffXA7iI/view?usp=sharing

    To reproduce thi issue:

    1. Visit this page: https://temp10.d523.dinaserver.com/test/
    2. Inspect the source code for this page and search for ?H1 for Mobile?.
    3. You will see that the element is present in the code.

    As far as I understand this is bad for SEO

    • This reply was modified 2 weeks ago by jaspash.
    Plugin Support Elementor Team

    (@ricav)

    Hi Walter,

    Thank you for reaching out and providing detailed information about the issue you’re experiencing.

    You’re right, having multiple H1 tags on the same page can negatively impact your SEO. Currently, Elementor hides elements set for specific devices using CSS, which means these elements still exist in the source code.

    To resolve this, I recommend using a different approach for mobile and desktop headings. Instead of duplicating the container, consider utilizing the Dynamic Feature of the Heading widget, which is available in the Pro version of Elementor. This way, you can create a single heading that adapts based on the device, ensuring that only one H1 tag is rendered in the source code.

    Thank you for your understanding and cooperation.

    Kind regards,

    Thread Starter jaspash

    (@jaspash)

    Hello,

    I see. Isn’t there another way? I don’t need the widget included in Pro.

    Plugin Support Elementor Team

    (@ricav)

    Hi @jaspash,

    At this time, we don’t have additional options available. However, I recommend reaching out to your SEO plugin’s support team for further suggestions, as this issue is closely related to your website’s SEO configuration.

    Thank you for your understanding and cooperation.

    Kind regards,

    I don’t think hidden h1 cause any problem for google . but if you still wants to change what you can do is use single h1, then change text using JS, just add Custom HTML and add this code

    <script>
    function updateHeading() {
    // You can use specific selector and width according to your situation
    const heading = document.querySelector(‘h1’);
    if (window.innerWidth <= 768) {
    heading.textContent = ‘This is mobile Heading’;
    }
    else
    {
    heading.textContent = ‘This is Desktop Heading’;
    }
    }
    window.addEventListener(‘resize’, updateHeading);
    window.addEventListener(‘load’, updateHeading);
    </script>

    • This reply was modified 1 week, 4 days ago by hamid009.
Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.