Code Injection is the most powerful customization feature in Squarespace. It lets you add custom HTML, CSS, and JavaScript directly to your site without a developer account or third-party tools. Whether you want to add Google Analytics, load custom fonts, implement schema markup, or build interactive components, Code Injection is how you do it.
This guide covers everything: where Code Injection lives, what goes in each section, common use cases, debugging techniques, and the mistakes that cause the most problems.
Where to Find Code Injection
Squarespace has two types of Code Injection: site-wide and per-page.
Site-wide Code Injection is at Settings → Advanced → Code Injection. You will see two fields: Header and Footer. Code in the Header field is injected into the HTML head element of every page. Code in the Footer field is injected just before the closing body tag on every page.
Per-page Code Injection is in the settings of individual pages. Click the gear icon next to any page in the pages panel, scroll down to Advanced, and you will find a single Code Injection field. This code is added to the head of that specific page only.
Header vs Footer: What Goes Where
Header Code Injection runs before the page content loads. Use it for meta tags and Open Graph markup, external stylesheet links and font loading, preconnect hints for third-party domains, analytics tracking codes (Google Analytics, Facebook Pixel), schema markup (JSON-LD structured data), and CSS that needs to be applied before content renders.
Footer Code Injection runs after the page content loads. Use it for JavaScript that interacts with page elements (the DOM must exist first), chat widgets and support tools, JavaScript-based animations and interactions, and any script that does not need to run before the page renders.
The general rule: if it affects how the page looks, put it in the header. If it affects how the page behaves, put it in the footer.
Common Use Cases
Google Analytics 4
The GA4 tracking tag goes in Header Code Injection. Google provides a two-part snippet: an async script tag that loads the gtag library, and an inline script that configures your measurement ID. Paste both into the header field.
Custom Fonts
To load Google Fonts, add the preconnect hints and stylesheet link to Header Code Injection. Then apply the font using Custom CSS or an inline style tag. Always include display=swap in the Google Fonts URL. Read our detailed guide on changing fonts on Squarespace.
Schema Markup
JSON-LD structured data can go in either header or footer, but the header is conventional. Use per-page Code Injection for page-specific schema (Article, Product, FAQ) and site-wide header injection for global schema (Organization, WebSite). Our Schema Builder generates the code.
Meta Tags
Custom meta tags go in Header Code Injection. Common additions include canonical URLs, robots directives, Open Graph tags for social sharing, and Twitter Card markup. Our Meta Tag Generator creates complete meta tag sets.
Interactive Components
FAQ accordions, countdown timers, pricing tables, and sliders go in page-specific Code Blocks (not Code Injection). However, shared JavaScript libraries or global styles for these components can go in site-wide Code Injection to avoid duplicating code across pages.
Per-Page Code Injection
Per-page injection is underused. It is perfect for landing page tracking pixels that should only fire on specific pages, page-specific schema markup (FAQ schema on your FAQ page, LocalBusiness schema on your contact page), A/B testing scripts targeted at specific pages, and custom styles that only apply to one page.
Using per-page injection instead of site-wide injection improves performance because the code only loads where it is needed, and it keeps your site-wide injection clean and manageable.
Debugging Code Injection
When your injected code is not working, check these things in order.
Open browser DevTools. Right-click the page, select Inspect, and check the Console tab for JavaScript errors. Red error messages usually tell you exactly what went wrong.
Verify the code is present. In DevTools, go to the Elements tab and search for a unique string from your injected code. If it is not in the DOM, the injection did not work. Check that you saved the Code Injection settings.
Check for script loading order. If your footer JavaScript references a DOM element that does not exist, it may be running before the content loads. Wrap your code in a DOMContentLoaded event listener to ensure the page is ready.
Look for conflicting code. If you have multiple scripts that target the same elements, they can interfere with each other. This is especially common with third-party widgets that all try to modify the body or head.
Performance Impact
Every script you add to Code Injection affects page load time. Header scripts block rendering until they finish loading (unless marked async or defer). Footer scripts run after the page content but before the page feels fully interactive.
To minimize impact, use async or defer attributes on script tags, only load scripts on pages where they are needed (use per-page injection), minimize the number of external domains your scripts connect to, and combine multiple small scripts into one when possible.
Read our speed optimization guide for more performance tips.
What Code Injection Cannot Do
Code Injection is client-side only. You cannot modify server-side behavior, access databases, process form submissions with custom logic, or change how Squarespace generates its HTML. For those capabilities, you would need to move to a platform like WordPress or build a custom site.
You also cannot remove Squarespace's built-in scripts and styles. The platform loads its own JavaScript and CSS on every page, and Code Injection adds to this rather than replacing it.
Essential Code Injections
For a curated list of the most useful code injections, read our article on 5 Code Injections Every Website Needs. And for tools that generate the code for you, browse our free tools collection.