Why Code matters in SEO SEM
What is JavaScript?
To learn more about JavaScript, the first place to start is understanding exactly what it is and how it works on the websites we manage.
JavaScript is essentially a programming language that is used to implement the interactive or dynamic elements of a website, including personalisation, dynamically updating content and notifications. The HTML and CSS of a page usually form the main structure and styling of a page, but JavaScript is what brings it to life.
Every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.
JavaScript shouldn’t just be viewed as an inconvenience for SEOs, as it often powers interactivity and the elements of a website that can truly engage a user.
To better understand the capabilities of JavaScript and why it’s necessary to the modern web, we need to learn more from the people who are building the web with it: developers.
JavaScript allows you to add complex animations, fetch and process customer data, use open APIs to integrate with popular products and technologies, and enhance the user experience. And while there are ways in which we can optimize our JavaScript code to reduce overhead, JavaScript will never disappear.
JavaScript code by itself doesn’t always mean that much. It needs to be processed and rendered before output code can be displayed and the requested page can be shown to the client, such as the user’s browser or the search engine crawler. Can you tell what this example website is about by looking at this code alone?
No? Well, neither can a search engine or browser unless JavaScript is executed. This is why rendering is needed to run scripts like the one above and populate a page’s HTML with content so it can be read, understood and used for indexing.
As opposed to content in the HTML, JavaScript-powered content takes a little more preparation before it is meaningful to the client requesting it, and this happens through the process of rendering.
JavaScript code by itself doesn’t always mean that much. It needs to be processed and rendered before output code can be displayed and the requested page can be shown to the client, such as the user’s browser or the search engine crawler. Can you tell what this example website is about by looking at this code alone?
No? Well, neither can a search engine or browser unless JavaScript is executed. This is why rendering is needed to run scripts like the one above and populate a page’s HTML with content so it can be read, understood and used for indexing.
As opposed to content in the HTML, JavaScript-powered content takes a little more preparation before it is meaningful to the client requesting it, and this happens through the process of rendering.
Pre-rendering
Pre-rendering a page is when the client creates the structure of a page which is shown before the final content is rendered to the screen. It shows a static snapshot of the page immediately which can be useful for showing content to search engines on page load without them having to render anything. However, this snapshot is not the complete version of the page.
As SEOs, it's important that we prioritize our sites' users and ensure search engines are able to grasp our experience. Luckily for us, there are a variety of solutions to ensure that both users and bots can receive the optimal experience. Two top options include:
- Do nothing. Perhaps the simplest technical solution, we can test whether or not a more JavaScript-heavy solution has any effect on performance (including: rankings, crawl logs, traffic, and engagement metrics). If you are changing experiences, (if possible) attempt on a smaller section of the site. This will enable any kinks to be ironed out early in the process.
- Pre-render. Pre-rendering is a solution where we send bots an HTML experience (i.e. a rendered version of the DOM (i.e. what people see)), circumventing the issue. The most important element here is to: make sure search engines are being served a valid, accurate representation of the JavaScript-based equivalent at all times.
Pros of pre-rendering
- Allows search engines to see some content immediately for indexing.
Cons of pre-rendering
- Doesn’t show the full content.
- Prone to loading issues.
- Pre-rendered content lacks interactivity for users.
As it doe not show full content, your website could easily be mistaken for something that it is not by the bots that are sent out to index your website. And you cannot see this as a bot would see this in your browser because that's where it will naturally render . You will only see a sagging SEO score and PPC problems with relevancy issues.