Setting custom HTTP headers on a Cloudflare Pages site
I have a React app (built with create-react-app) which I’m hosting on Cloudflare pages. I wanted to add a X-Robots-Tag
HTTP header to every page on the site. It turns out to be really quite easy:
Create a new file called _headers
in your public
folder, and put this inside:
/*
X-Robots-Tag: noindex, nofollow
Obviously this is a really simple use-case, but there’s a lot more you can do. Headers take the following format:
[url]
[name]: [value]
You can have multiple name/value pairs under a given URL. URLs can contain placeholders and wildcards (called “splats”) to help widen or narrow down where they apply. So to stop anything in the /app
folder from being shown in an iframe
you might do:
/app/*
X-Frame-Options: DENY
You can set multiple headers for the same URL, e.g.
/app/*
X-Frame-Options: SAMEORIGIN
Referrer-Policy: same-origin
X-Content-Type-Options: nosniff
Lets say your production site is on a custom domain, and the dev/test versions live on Cloudflare’s pages.dev domain. You don’t want search engines to index your dev/test versions, so you can send the X-Robots-Tag header only on those domains, using the placeholder functionality:
# Swap projectname below for your own project's name
https://:projectname.pages.dev/*
X-Robots-Tag: noindex, nofollow
There’s more examples over in their documentation.