4eck Media

JavaScript SEO: Challenges for web developers and SEO managers

August 06, 2024
August 06, 2024

This article is about JavaScript SEO and the challenges it poses for developers and SEO professionals! In the dynamic world of the web, JavaScript has evolved from a simple scripting language to a key technology that has fundamentally changed the way websites are developed and optimized. I go deep into the topics that are important when optimizing JavaScript websites for search engines. This is the kick-off article to make you aware of the importance of the topic. Learn how to overcome the challenges and take advantage of the opportunities that JavaScript SEO can offer you.

The rise of JavaScript and its impact on SEO

Ten years ago, JavaScript was often just a small part of web development. Developers used it as a tool for simple interactions or animations - mostly based on jQuery. Today, however, the picture has changed: JavaScript has become the centerpiece of modern web development. According to W3Techs.com, 81 percent of all websites rely on JavaScript libraries. And 94 percent of these rely on jQuery, which is already getting on in years.

Frameworks such as React, Angular and Vue.js have enabled developers to implement both front-end and back-end functionalities in a single language. Developers can create complete web apps and mobile apps with JavaScript. This has led to an explosion in the use of JavaScript, which also has an impact on SEO. The almost 20 percent who do not yet use JavaScript will probably also use it as part of a relaunch in order to take advantage of the opportunities it offers.

Detected Technologies of 4eck Media

These are the technologies recognized via webpagetest.org for our agency website. Node.js, Vue.js and Nuxt.js as well as GSAP for animations. A lot of JavaScript is used to enable this interactive user experience.

What does this mean for SEO? While the HTML structure and its simple optimization used to be sufficient, SEOs now have to deal with the complex effects of JavaScript on the crawling and rendering of websites. Search engine crawlers, especially Google, need to be able to render JavaScript correctly in order to understand and index the entire content of the website.

The gap between knowledge and reality in JavaScript

A key finding of a study published by Sitebulb in August 2024 shows a significant discrepancy between the theoretical knowledge of JavaScript and the practical understanding applied in SEO practice. Many SEOs state that they have a basic understanding of JavaScript, but in practice it is often found that they do not fully grasp the intricacies and complexities, particularly in relation to crawling and rendering JavaScript content.

A common problem is that many professionals have not read the official Google documentation or have only a superficial knowledge of how Google handles JavaScript. This leads to serious problems in ensuring that all important content is correctly indexed and displayed in search results.

At our agency, we also have a bookcase full of books on development and search engine optimization. However, the most important source of all for us is the Google documentation. As an agency manager, I constantly force my developers to slavishly adhere to Google's guidelines, be it when setting up structured data, integrating HREFLANG or other development topics.

The importance of proper communication between SEOs and developers

One of the key takeaways from the Sitebulb study is the need for effective communication between SEOs and developers. SEOs tend to point out a problem that an SEO tool's report has revealed. But it's not enough to rely on tools alone - SEOs should also develop a basic understanding of technical concepts such as lazy loading, server site rendering and client site rendering.

In agencies, where SEOs and developers often work closely together, it's crucial that SEOs ask technical questions accurately and understand what techniques are used and how to better point out an identified issue. Good communication can help ensure that both SEO and technical requirements are optimally met. And developers tend to rely on tools and outsource the implementation of details to pre-built libraries, tools or plugins instead of getting to grips with the details themselves and only writing the lines of code that are actually needed.

An often underestimated but essential aspect of SEO work is the ability to openly admit when you don't know something. Instead of giving vague answers, SEOs should be willing to ask questions and ask for help when they encounter complex JavaScript problems. This openness encourages better collaboration and helps to find real solutions to problems. For example, it helps to work with developers to analyze test tool evaluations and get to the bottom of problems. It is important to explain why a problem is significant and why it needs to be fixed. If recommendations are not implemented, it is often because the importance of bug fixing is not clearly communicated. A developer needs to be shown clearly: How does the problem affect indexing and request behavior to our customers? By explaining the problem and its impact, you can better communicate the need for the fix.

Collaboration and early involvement of SEO managers in projects is crucial. The earlier SEO managers are involved in the development process, the better they can ensure that SEO requirements are considered from the outset. This is especially true for large projects such as website migrations or the introduction of new features, where coordination between different teams is crucial. But equally, the lead developer should be given a role in the discussions so that there is clarity about the goal and how to get there. A few more hours of meetings can save hundreds of hours of refactoring in the end.

Practical challenges caused by an overkill of plugins, libraries and tools and the importance of technical details

The use of too many plugins, libraries and tools leads to new problems and further challenges. This is particularly true for content management systems such as WordPress. If agencies or customers rely on ready-made WordPress themes that already include all possible functions such as blog, events, slider, internal download area, store function and all the bells and whistles with the PageBuilder Elementor, dozens of active plugins are used on the website. It happens that slider functions are integrated via Elementor and the rather extensive Revolution Slider at the same time. The store function is ensured via woocommerce. Themes are often a jack-of-all-trades that should be able to do everything and are therefore crammed full of technology. This leads to overlaps and can have a very negative impact on the performance and crawlability of the website. Well thought-out plugin management and regular checks are essential here.

Here in the following example is a real website with over 40 active plugins. The WordPress version is 4.9.6. The current version of WordPress is 6.6.1, which means that the CMS is already six years old. The plugins also require updates. Due to the strong nesting, the system can hardly be updated - neither by the CMS nor by the plugins. Even a PHP update from 7x to the current version would destroy everything.

41 aktive WordPress-Plugins im System

If you take the entire code base (including the backend code in particular) and have it tested using a tool such as Insight Symfony, the tool calculates a processing time of 56.1 years to fix all the problems. Of course, such a test contains many uncertainties. My Head of Development says with a wink that it would take a third of the time. The scope of the project is also interesting: over 1.2 million lines of code for a simple website with less than 25 subpages and a store function. This clearly shows the dead end that websites can end up in if too much technical debt is accumulated.

WordPress Technical Debt - viele Problem im System

Such websites are not only no longer properly maintainable, but also represent a considerable security risk. WPScan can be used to see which known security vulnerabilities were present in 4.9.6 and which subsequent versions have fixed them. This outdated version has 56 known security vulnerabilities, some of which are high or critical according to the CVSS score (Common Vulnerability Scoring System).

Sicherheitsprobleme durch Technical Debt
 

Refactoring no longer helps, only a relaunch. The customer shies away from this because of the costs. The website is still running ... good luck then.

The future of web development will continue to be strongly characterized by JavaScript. It is crucial for SEO managers to keep up with the latest trends and technologies to ensure that their websites are optimally prepared for search engines. Understanding how JavaScript works and its impact on SEO is becoming increasingly important.

Conclusion on JavaScript SEO

JavaScript has revolutionized web development, and its importance for SEO is becoming increasingly clear. To be successful in the modern web world, SEO managers and developers need to work closely together and develop a deep understanding of the interactions between JavaScript and search engine optimization. Understanding the complex technical details and being able to communicate effectively will ensure that all content is indexed correctly and the website performs well in search results.

JavaScript has become the language of the web and offers great possibilities for the realization of modern websites. There are only three aspects that have become a challenge for agencies and website operators, SEO managers and developers:

  • Technical SEO: the crawlability of content loaded through JavaScript.
     
  • Performance: the negative influence of JavaScript on website speed.
     
  • Technical Dept: outdated frameworks, unfavorable dependencies in the code and other interactions through JavaScript and a multitude of libraries and plugins increase the occurrence of bugs, make further development and up-to-dateness more difficult and force early refactoring.

Stay tuned and keep an eye out for more resources and reports to deepen your knowledge and successfully master the challenges of modern web development. And above all, get to grips with Google documentation! We'll be publishing a whole series of articles on JavaScript SEO over the next few months with lessons learned from our own projects, because it's a topic that needs explaining and just seems unsexy for both development teams and website owners, and therefore - for all its importance - is simply left out all too often.