SEO

Move JavaScript Below HTML Headers

Published

2 years ago

January 10, 2023

Google’s John Mueller suggests placing JavaScript code below the HTML header tag 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.

More specifically, it’s important to keep the <head> section of the HTML document at the top of the page. This section should contain the information that Google needs to read your site properly.

Any JavaScript code should be placed below the HTML headers.

To make sure that the JavaScript isn’t interfering with the <head> section, Mueller recommends using the rendering tool in Search Console:

“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 include JavaScript code at the bottom of the HTML document near the closing </body> tag.

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

By placing the JavaScript at the bottom of the page, the HTML can be rendered first, allowing the user to view the content while the JavaScript loads in the background.

Additionally, you can prevent external JavaScript files from blocking the rendering of the page using the async or defer attributes.

Source: Reddit

Featured Image: StockEU/Shutterstock

Source link