How can I fix invalid injected HTML elements in the head

JoseRP · ‎03-15-2025

Hello, greetings to the community. I'm hoping anyone can help me. In Sitebull, when I run the audit, I get a critical error: What is this? URLs where the <head> element contains invalid DOM elements. Valid elements that can be used within the <head> element are <title>, <meta>, <base>, <link>, <script>, <noscript>, <style>, and <template>. Including invalid elements can cause the HTML document to not be parsed correctly, as the presence of other elements corrupts the <head> element, which can cause important tags (e.g., meta robots) to be overlooked.

Discovering by analyzing the code that it is an injection of invalid code is this: <iframe src="https://www.googletagmanager.com/ns.html?id=GT-EXAMPLE" height="0" width="0" style="display:none;visibility:hidden"></iframe> how could I reverse this critical error and pass the injection to the BODY

abdulmoeed37 · ‎03-16-2025

Hi @JoseRP , can you please share your website url?

Also let me know if you have added google tag manager code manually in theme files or have you used app for that?

Helping shopify store owners.
Schedule free meeting for shopify store related problems:
If you need assistance with your store, feel free to contact me at abdulmoeed37@gmail.com
If my assistance was helpful, please consider liking and accepting the solution. Thank you!

JoseRP · ‎03-16-2025

Hi @abdulmoeed37 https://www.motivecase.com/ It's injected. I haven't included the code, and it's not in the theme editors. I only see it when I browse the site in developer mode. I just added some code to the top of the HEAD, but I haven't run an audit yet to see if it's fixed or if that code generated another error. Thank you very much for your help.

goldi07 · ‎03-16-2025

Hello @JoseRP

Step 1: Identify Where the Injection Happens
Since the invalid <iframe> is for Google Tag Manager (GTM) Noscript, it might be added through one of these methods:

1. Inside theme.liquid

. Go to Online Store > Themes > Edit Code
. Open theme.liquid
.Look inside the <head> section for:

<iframe src="https://www.googletagmanager.com/ns.html?id=GT-EXAMPLE"
height="0" width="0" style="display:none;visibility:hidden"></iframe>

. If found, cut it from <head>.

2. Shopify Admin Panel (Additional Scripts)

. Go to Online Store > Preferences
. Scroll to Google Analytics or Additional Scripts
. If the <iframe> is added there, remove it.

3.Injected via Third-Party Apps

. Some Shopify apps inject code into <head>.
. Try disabling unnecessary apps and testing again.

Step 2: Move the <iframe> to <body>
After removing it from <head>, paste it inside <body>, just after the opening <body> tag:

<body>
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GT-EXAMPLE"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
</body>

Why this works?

. The GTM <iframe> is only required inside <body>.
. Moving it fixes the HTML validation error.
. Search engines can now properly parse your <head>.

Step 3: Save & Test
1.Save changes in Shopify.
2.Clear browser cache and refresh your site.
3.Re-run the Sitebulb audit to confirm the error is gone.

Thank you 😊

Was I helpful?

Buy me a coffee

❤

Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -Goldi184507@gmail.com - Skype: live:.cid.819bad8ddb52736c -Whatsapp: +919317950519
Checkout Some Free Sections Here

JoseRP · ‎03-16-2025

Hi @goldi07

3.Injected via Third-Party Apps:

This is my case, the GOOGLE & YOUTUBE app is the one that is automatically injecting me into the HEAD, I contacted Google and they did not help me. Create this code with artificial intelligence that places it at the beginning of the HEAD

<script>  document.addEventListener('DOMContentLoaded', function() {
    // 1. Seleccionar SOLO los <noscript> del <head> que contengan elementos inválidos
    const invalidElements = ['iframe', 'img', 'div', 'h1', 'h2', 'h3']; // Elementos prohibidos
    const headNoscripts = document.head.querySelectorAll('noscript');

    headNoscripts.forEach(noscript => {
      // 2. Verificar si el <noscript> contiene elementos prohibidos
      const hasInvalidElement = invalidElements.some(tag => 
        noscript.innerHTML.toLowerCase().includes(`<${tag}`)
      );

      // 3. Mover solo si encuentra elementos inválidos
      if (hasInvalidElement) {
        document.body.appendChild(noscript);
        console.log('Elemento <noscript> inválido movido al <body>:', noscript.innerHTML);
      }
    });
  });
</script>

Now I test if it works, thank you very much for your support, really.

How can I fix invalid injected HTML elements in the head

How can I fix invalid injected HTML elements in the head

Buy me a coffee

Community Blog Articles