#SEO in your <head> vs too much #JavaScript?

This comes up from time to time, I thought I'd be more elaborate once (it's not new). Search engines (I only really know Google, YMMV) render HTML pages and there are some settings that need to be found in the <head> of a page in order to be valid. If you care about these settings, don't make the <head> brittle, and ideally move those settings to the top of the <head>.

The SEO settings I'm thinking of are the robots meta tag & the canonical link element, but there's also the title & description meta tag which some people consider important. It's not just about SEO either - you probably also want to make sure things like the character set definition, viewport & CSP are considered valid.

(making threads here is weird)

"Of course my <head> is ok" - sometimes it's not as obvious as clearly broken markup. The <head> is self-closing, so any HTML element that's not valid in the <head> will result in the rest to be considered as a part of the <body>. That can be a stray <img> that ends up somewhere wrong, it could be an <iframe> that a script injects to the top of the <head> during rendering. This is visible if you inspect the DOM of a page in your browser.

Browsers are sometimes helpful and try to interpret what you mean, if you don't want a page to be indexed, or want a different URL as canonical, you probably don't want search engines to guess. (SEO is to a large part about not making search engines guess.)

In short, avoid making the <head> brittle if you care about those SEO settings, consider moving them to the top of the <head> (don't include 5k lines of JS above them), and double-check the rendered DOM in your browser from time to time.

@johnmu Thanks John - this thread should be mandatory reading for #techSEO and #webdev folks.
@badams I had some references in a longer draft, including your tweet at https://twitter.com/badams/status/1440705232225271824 which goes into the same direction :).
Barry Adams 📰 on Twitter

“@smashingmag @Imports @csswizardry Putting the 'SEO' meta tags at the end of the <head> might be optimal for performance, it's actually very dangerous for SEO. The inclusion of scripts above those meta tags in the <head> increases the likelihood of search engines ignoring or improperly parsing the meta tags.”

Twitter
@johnmu @badams One thing that many Tech SEOs and devs don't quite fully appreciate is what chaos tag management scripts in the head can cause. You can run all the tests you like to ensure the <head> is loading properly and the meta and titles are loading but you can never test for what an ad team is going to throw into their tag next week! They will not stop to consider an HTML body element as being an issue. I always insist any tags and scripts that are absolutely needed in the head go last.
@simoncox @badams Yeah, this is also why questions like "is using a tag manager ok for seo" are basically just intros to "it depends" & sadness.
@johnmu @badams I charge extra for sadness...
@johnmu @simoncox it’s what makes SEO QA testing so vital. The sadness happens when that’s not even a thing in most organisations.
@johnmu Shhh this is my secret auditing trick -- find invalid HTML -- fix it -- look like I am a genius as the pages come back :) ha ha