// Security
Security Headers: What They Are, Why They Matter for SEO, and How to Add Them
Add security headers to protect your site from XSS, clickjacking, and data injection. Learn which headers to implement, what each does, and their SEO impact.
What Security Headers Do
Security headers are HTTP response headers that instruct browsers how to behave when loading your site. They're your first line of defense against common web attacks — many of which can be executed without any server vulnerability, purely through browser behavior.
Google doesn't directly use security headers as a ranking signal, but they protect your site from hacks that do hurt SEO: content injection, malware delivery, and redirect hijacking.
The 6 Essential Security Headers
- Content-Security-Policy (CSP): Controls which resources the browser can load. Prevents XSS attacks.
- Strict-Transport-Security (HSTS): Forces browsers to use HTTPS for your domain. Prevents SSL stripping.
- X-Frame-Options: Prevents your pages from being embedded in iframes. Blocks clickjacking.
- X-Content-Type-Options: Prevents MIME-type sniffing attacks (set to 'nosniff').
- Referrer-Policy: Controls what referrer information is sent when users click links.
- Permissions-Policy: Controls which browser features (camera, mic, location) can be used on your site.
How to Check Your Current Headers
Use securityheaders.com to scan your site for free. It grades your headers from A+ to F and shows exactly what's missing. Google Chrome DevTools Network tab → click any request → Headers tab shows all response headers.
Adding Security Headers in Next.js
In Next.js, add headers in next.config.js using the headers() function. This applies them to all routes without needing server configuration. For Vercel deployments, headers in next.config.js deploy automatically.
Start with the simpler headers (X-Frame-Options, X-Content-Type-Options, Referrer-Policy) before tackling CSP, which requires careful configuration to avoid breaking your own JavaScript and third-party tools.