JavaScript-SEO: Challenges for Web Developers and SEO Managers

August 6, 2024
August 6, 2024

This article is about JavaScript SEO and the challenges it presents 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 how websites are developed and optimized. I delve deeply into the topics that are important for optimizing JavaScript websites for search engines. This is the introductory article meant to raise your awareness of the significance of the topic. Learn to master the challenges and seize 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. However, today the picture has changed: JavaScript has become the cornerstone of modern web development. According to W3Techs.com, 81 percent of all websites use JavaScript libraries, of which 94 percent rely on the already aging jQuery.

Frameworks like React, Angular, and Vue.js have enabled developers to implement both frontend and backend functionalities in a single language. Developers can create complete web apps and mobile apps with JavaScript. This has led to an explosive spread of JavaScript, which also affects SEO. The nearly 20 percent who still do not use JavaScript are likely to adopt it during a relaunch to take advantage of the associated possibilities.

Detected Technologies of 4eck Media

These are the recognized technologies from webpagetest.org for our agency website: Node.js, Vue.js, and Nuxt.js, as well as Swiper and GSAP for sliders and animations. A lot of JavaScript is in use to enable this interactive user experience here on the page.

What does this mean for SEO? While in the past the HTML structure and its simple optimization were enough, SEOs today must deal with the complex effects of JavaScript on the crawling and rendering of websites. Search engine crawlers, especially Google, must 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 central 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 report having a basic understanding of JavaScript, but in practice, it often becomes evident that they do not fully grasp the nuances and complexities, particularly regarding the crawling and rendering of JavaScript content.

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

We also have a whole bookshelf full of books about development and search engine optimization in our agency. Nevertheless, the most important source for us is the Google documentation. As the agency head, I constantly urge my developers to adhere strictly to Google’s guidelines, whether it’s setting up structured data, integrating HREFLANG, or other development topics.

The importance of effective communication between SEOs and developers.

One of the key insights from the Sitebulb study is the need for effective communication between SEOs and developers. SEOs tend to point out a problem identified by the report of an SEO tool. However, it is not enough to rely solely on tools; SEOs should also develop a fundamental understanding of technical concepts such as Lazy Loading, Server-Side Rendering, and Client-Side Rendering.

In agencies where SEOs and developers often work closely together, it is crucial for SEOs to ask technical questions precisely and to understand which techniques are used in what way to better address a given problem. Good communication can help ensure that both SEO and technical requirements are met optimally. Developers tend to become dependent on tools and delegate the implementation of details to pre-made libraries, tools, or plugins instead of familiarizing themselves with the details and writing only the code lines that are truly necessary.

An often underestimated but essential aspect of SEO work is the ability to openly admit when you do not know something. Instead of giving vague answers, SEOs should be willing to ask questions and seek help when they encounter complex JavaScript issues. This openness fosters better collaboration and helps in finding real solutions to problems. It is beneficial to work with developers to analyze test tool evaluations and get to the root of issues. It is important to explain why a problem is significant and why it needs to be fixed. When recommendations are not implemented, it is often because the importance of addressing the issue is not clearly communicated. A developer must be shown: How does the problem affect indexing and the desired behavior towards our customers? By explaining the problem and its impacts, one can better convey the necessity of the solution.

Collaboration and the early involvement of SEO managers in projects are crucial. The earlier SEO managers are integrated into the development process, the better they can ensure that SEO requirements are taken into account from the very beginning. This is especially true for large projects such as website migrations or the introduction of new features, where coordination between different teams is vital. Additionally, the executing developer should also have a role in the discussions to create clarity about the goal and the path to reach it. This way, a few extra hours of meetings can save several hundred hours of refactoring in the end.

Practical challenges due to 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 especially true for content management systems like WordPress. When agencies or clients rely on pre-made themes from WordPress that already come with various functions such as blogs, appointments, sliders, internal download areas, shop functions, and all sorts of other features through the PageBuilder Elementor, dozens of active plugins are often used on the website. It happens that, for example, slider functionalities are integrated through Elementor and simultaneously through the quite extensive Revolution Slider. The shop function is ensured through WooCommerce. Themes are often a jack-of-all-trades that are supposed to do everything, and therefore they are crammed with technology. This leads to overlaps and can very negatively affect the performance as well as the crawlability of the website. A well-thought-out plugin management and regular checks are essential here. This is a challenge in overloaded backends. And after all, 35 percent of all WordPress sites also use an additional PageBuilder like Elementor or WP Bakery.

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. This means that the CMS is already six years old. The plugins also need updates. Due to the heavy nesting, the system is hardly updatable anymore – neither from the CMS side nor from the plugins side. Even a PHP update from 7x to the current version would break everything.

41 active WordPress plugins in the system

Taking the complete codebase (especially the backend code) and having it tested by a tool like Insight Symfony, the tool estimates a fix time of 56.1 years to resolve all issues. Of course, such a test involves many inaccuracies. My Head of Development jokingly suggests it would actually take about a third of that time. Also interesting is the scope of the project: over 1.2 million lines of code for a simple website with fewer than 25 subpages and a shopping function. This clearly illustrates the dead end that websites can find themselves in when too much technical debt is accumulated.

WordPress Technical Debt - many problems in the system

Such websites are not only no longer properly maintainable, but also pose a significant security risk. WPScan shows which known security vulnerabilities were present in version 4.9.6 and how they were fixed in subsequent versions. This outdated version has 56 known security vulnerabilities, some of which are rated high or critical according to the CVSS score (Common Vulnerability Scoring System).

Security issues due to technical debt

No more refactoring will help, only a relaunch will do. The client is hesitant due to the costs. The website is still running… well, good luck with that.

The future of web development will continue to be heavily influenced by JavaScript. For SEO managers, it is crucial to engage 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 significance for SEO is becoming increasingly clear. To be successful in the modern web world, SEO professionals and developers must work closely together and develop a deep understanding of the interactions between JavaScript and search engine optimization. Understanding the complex technical details and the ability to communicate effectively ensure that all content is indexed correctly and that the website performs well in search results.

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

  • Technical SEO: the crawlability of content loaded by JavaScript.
  • Performance: the negative impact of JavaScript on website speed.
  • Technical Dept: outdated frameworks, unfavorable dependencies in the code, and further interactions through JavaScript and a multitude of libraries and plugins increase the occurrence of bugs, complicate further development and maintaining currency, and necessitate early refactoring.

Stay tuned and keep an eye out for additional resources and reports to deepen your knowledge and successfully navigate the challenges of modern web development. And above all, get familiar with the Google documentation! In the coming months, we will be publishing a series of articles on JavaScript SEO based on our own project experiences, as this topic needs explanation and seems simply unappealing for both development teams and website operators, thus – despite its importance – is often overlooked.

This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.