Webflow sync, pageviews & more.
NEW

How can I fix the W3C validation errors related to the noscript tag and the Facebook pixel code in the head tag of my Webflow website?

TL;DR
  • Move the <noscript> tag from the Head Code to the Footer Code section in Webflow’s Project Settings to comply with HTML5 requirements.
  • Ensure you use the latest Facebook Pixel code with the <script> in the head and the <noscript> in the footer to maintain tracking and fix W3C validation errors.

You're seeing W3C validation errors due to the use of a <noscript> tag and possibly deprecated or improperly placed code from the Facebook Pixel in the <head> of your Webflow site.

1. Understand the W3C Error

  • The W3C validator often flags <noscript> in the <head> as invalid in HTML5.
  • Facebook Pixel commonly injects a <noscript> tag to support tracking for users with JavaScript disabled, but HTML5 only allows <noscript> inside the <body>.

2. Remove or Relocate the <noscript> Tag

  • Go to Project Settings in Webflow.
  • Under the Custom Code section, look at the Head Code box.
  • If you’ve added Facebook Pixel manually, you might have added a <noscript> block in the head, which is invalid.
  • Move the <noscript> code to the Before tag field instead (in the Footer Code section).
  • This location is valid for <noscript> and still functions properly for Facebook tracking.

3. Use Facebook’s Updated Pixel Code

  • Go to the Meta Events Manager and get the latest Facebook Pixel base code.
  • The valid structure has a <script> in the head and a fallback <noscript> in the body.
  • In Webflow:
  • Copy the script portion into Head Code.
  • Copy the <noscript> image tag into Footer Code.

4. Test for Validation Again

  • After making changes, re-publish your Webflow site.
  • Use the W3C Validator (https://validator.w3.org/) to check again.
  • Now that the <noscript> is in the right place, the validation error should be resolved.

Summary

To fix W3C validation errors with the Facebook Pixel on Webflow, move the <noscript> element from the Head to the Footer Code section in Project Settings, ensuring it's within the <body>. This placement complies with HTML5 rules and still allows Facebook tracking for users without JavaScript.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I change the font size of H4 elements in the Rich Text element on Webflow only for mobile screen sizes?
How can I fix the issue where my custom cursor gets stuck at the edge of the div on my Webflow CMS project pages when hovering over Vimeo videos?
Is there a way to target Safari mobile specifically in Webflow and work around the issue of the mobile browser toolbar regions hiding a portion of the flex 100VH region? Would this require custom code or is there a solution within Webflow?
How do I prevent the success message from scrolling out of view to the bottom of the page after submitting a form on a site built in Webflow?
Is it possible to have a dynamic CMS collection list in Webflow, where the list changes depending on the CMS collection page being viewed?
Is there a way in Webflow to override the CMS content in a symbol, so that the same symbol can display different content?
Can Webflow implement page redirects?
How can I properly load the jspdf library in Webflow to resolve the "uncaught referenceerror: jspdf is not defined" error I am encountering when adding a button that downloads the webpage as a PDF?
Where can I find Javascript code to make a GIF start animating on hover in Webflow?
How can I make a background video in Webflow play only once?
Can I add videos to a Webflow blog using Create Collection Item API with embedded HTML code, or do I need to manually input the video URL in the Webflow Editor? Why do I receive an error message when trying to embed certain video links in Webflow?
What are the benefits and features of Webflow?
How can I fix an element to scroll within a section in Webflow, similar to the animation used for the share function on the Webflow blog?
Is it possible to create a multilingual website structure with subdirectories in Webflow while maintaining a relational database perspective and using country-specific CMS that references the main English CMS?
How can I prevent background scrolling when the mobile menu is overlayed in Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?
Is there a way to auto-scroll the page in Webflow after a certain amount of time, without the script automatically scrolling back up if the user has already scrolled past the designated point?
How can I close a dropdown in Webflow when clicking on a link?