Adding your own code
Updated · First published
Settings › Code is where a verification tag, an analytics snippet, a chat widget or a font goes. It is part of Pro, the one part of the blog that is, and the screen says so.
Everything here applies to every page of the blog. For one post only, the editor's own Code for this post panel does the same job with the same rules.
The four boxes
Page head runs before the page is drawn. Verification tags belong here, and so does anything that must load early, such as a font. Keep it small: everything in this box is between your reader and the first thing they see.
Start of the body runs straight after the page opens. This is where most tag managers ask to go.
End of the body is the last thing on the page. Chat widgets, and anything that does not need to run early.
Custom CSS is applied after the design's own stylesheet, so it wins. Before reaching for it, check the design studio: it has controls for most of what people come here to write.
Embeds and the hosts they may come from
A post can embed a page from a list of services that publish embed endpoints: YouTube, Vimeo, Loom, Spotify, SoundCloud, CodePen, Figma, Canva and Google Docs among them, plus the two comment services. Anything from a host that is not on the list is removed when the page is drawn.
Extra embed hosts is how you add one, one hostname per line. It is a deliberate act by somebody who owns the domain the blog runs on, which is exactly the right bar for letting another site run inside your page.
If an embed you pasted is simply not there when you look at the published post, this is why. Add the host and it will appear.
The strict setting
At the bottom is a switch for a strict content security policy. It stops any inline script running on the blog, which is the strongest thing a page can say about itself.
It is offered only while all four boxes above are empty, because the two cannot both be true: your own snippet is an inline script. The switch explains itself either way, and says which of your boxes is in the way.
If you inject nothing, turn it on. A blog with no scripts of its own is a blog where a cross-site scripting bug has nothing to work with.
What is stripped no matter what
A post's body is sanitised when it is drawn rather than when it is saved. That is on purpose: the writing is stored as you wrote it, so an improvement to the sanitiser applies to every post ever published rather than only to new ones.
What comes off a post body: script tags, event handler attributes, javascript: addresses, and frames from hosts that are not allowed. The code boxes on this screen are the sanctioned way past that, and they are behind a permission and a plan for that reason.
A guest post is stricter still. Embeds and media come off it entirely, and every link and its rel attribute stay exactly as the two of you approved them.
A checklist before you paste something in
Does it need to run before the page is drawn? If not, it goes at the end of the body, and the page will be faster.
Is it asking to load from a host you recognise? A snippet is code from somebody else running on your domain, under your name.
Is it something the design studio already does? A font, a colour and a spacing change are all switches one screen away.
Still stuck?
Open Rankbench and the page this article describes — most screens explain themselves as you go.