Advertisement
  1. SEJ
  2.  ⋅ 
  3. SEO

Google’s John Mueller: Move JavaScript Below The Head Element

John Mueller from Google advises placing JavaScript code underneath the HTML element to ensure that search engines can clearly understand your website.

  • To make sure that search crawlers can understand your website, it's important to be mindful of JavaScript in the "head" element section.
  • The placement of HTML code can adversely impact SEO efforts
  • Additionally, you can assist search crawlers by keeping the <head> section clean and well-organized.
Google’s John Mueller: Move JavaScript Below The Head Element

Google’s John Mueller suggests keeping the <head> HTML element section “clean” to ensure search crawlers can fully understand your website.

Mueller shares this advice in a Reddit thread, where a user asks whether HTML code placement could cause SEO issues.

The answer is yes; the placement of HTML code could adversely impact your SEO efforts if it doesn’t appear at the top of the page.

A Note About Mueller’s Remarks

John Mueller uses the term HTML Headers. But the <head> element isn’t ordinarily referred to that way.

  • HTML Headers are generally understood (as informal jargon) to reference the <heading> element (H1, H2, H3, etc.).
  • Header Elements are a specific HTML element known as <header>, which contains the menu, logo, etc .
  • Head HTML element is a section at the top of the HTML document with metadata about the document itself (title, meta description, etc.).

So when Mueller references “headers” he is specifically discussing the <head> element.

John Mueller on JavaScript in the Head Element

Mueller’s intention was to stress the importance of keeping the <head> section of the HTML document tidy and uncluttered with scripts that can be placed elsewhere.

The <head> element should only contain metadata about the document itself that is used by browsers and search engines, which helps search engines understand what the page is about and provides data to browsers and search engines for rendering the webpage properly (which means display it correctly).

Some JavaScript code that can be placed after the <head> element should go after.

After moving any JavaScript out of the <head> section, Mueller recommends using the rendering tool in Search Console to check if the page is rendering correctly after the move.

“The html headers (<head>) should be pretty much on top. I’d move any JS to below the HTML headers, and check with the rendering tool in search console that the JS doesn’t mess up the <head> section.”

Regarding the main content, Mueller says its placement is less important, though it’s crucial for the <head> section to be clean and well-organized so Googlebot can properly understand it.

Mueller continues:

“For the content it doesn’t matter as much, but since the head stuff is for machine-readable information that’s verified to be in a specific part of the page, it really needs to be clean on top.

Down with JavaScript! (in the <head>)”

Why Does The Placement Of JavaScript Matter For SEO?

When designing a website, it’s best to utilize the async and defer attributes in a strategic manner that allows the best rendering and interactivity at the fastest page speed for users.

That’s because JavaScript can delay the rendering of a webpage while it loads, resulting in a poor user experience.

The HTML can be rendered first, allowing the user to view the content while the JavaScript loads in the background with the appropriate use of the defer and async attributes.


Source: Reddit

Featured Image: StockEU/Shutterstock

Category News SEO
ADVERTISEMENT
SEJ STAFF

Matt G. Southern

Senior News Writer at Search Engine Journal

Matt G. Southern, Senior News Writer, has been with Search Engine Journal since 2013. With a bachelor’s degree in communications, ...

Subscribe to SEJ

Get our daily newsletter from SEJ's Founder Loren Baker about the latest news in the industry!

Ebook