JavaScript: SEO Mythbusting

TL;DR

JavaScript is not inherently bad for SEO; it can create responsive web applications that remain search-friendly when developers make content directly accessible. For single-page applications, each indexable page needs a unique, non-hashed URL that the server can serve without prior application state. Clear acceptance criteria also help SEOs and developers prevent implementation gaps. Read on for practical guidance on rendering, AJAX, lazy loading, performance, and testing.

Transcript

MARTIN SPLITT: Coming from a development background, there are so many misconceptions and myths about SEO that developers come up with or have heard, or that come from the SEO world, as well. Where do these come from? How do these get into the world? JAMIE ALBERICO: The myths, the legends that come through about JavaScript? I think a lot of it is p... Read More

Key Insights

• There are significant misconceptions about JavaScript and SEO due to communication gaps between developers and SEOs.
• JavaScript is often seen as problematic for SEO, but it offers benefits like creating responsive and interactive web applications.
• Single-page applications can pose SEO challenges, but with proper implementation, they can be search-friendly.
• Googlebot processes web pages in stages, initially parsing HTML and then rendering JavaScript content.
• Pre-rendering content can improve user experience and SEO, but it's crucial to balance between pre-rendering and lazy loading.
• AJAX can affect crawl budgets, but caching strategies can mitigate its impact.
• Performance metrics like first contentful paint and time to interactive are critical for both SEO and user experience.
• Tools like Lighthouse and PageSpeed Insights are recommended for testing JavaScript SEO performance.

Questions & Answers

Q: Is JavaScript bad for SEO?

No. Martin Splitt says JavaScript enables responsive web applications and that the claim JavaScript content cannot be indexed has not been true for a long time. Problems arise from implementation choices and misconceptions rather than from JavaScript itself.

Q: How can a single-page application be made search-friendly?

Every page intended for indexing needs a unique URL that users and search engines can open directly. The server must serve the correct content at that URL without requiring a visitor to navigate through earlier application states.

Q: Why does application state create SEO problems for single-page applications?

Google is described as stateless, while a single-page application may assume knowledge of how a visitor moved between views. A search user enters directly on the indexed page, so that page must work without the preceding navigation journey.

Q: How can developers test whether a single-page application URL works for search visitors?

Copy the page URL and paste it into an incognito browser. The intended content should appear immediately rather than the home page or a 404 page.

Q: Should single-page applications use hashed URLs for indexable pages?

No. The discussion specifically recommends a unique URL that does not use a hash. That URL must also allow the server to return the intended page directly.

Q: How should teams bridge communication gaps between SEOs and developers?

Jamie Alberico recommends putting specific acceptance criteria into development tickets. Replacing a vague request with a user story and three acceptance-criteria items gives developers a clearer definition of the desired search-friendly result.

Q: How should lazy loading be approached on content-heavy pages?

Lazy loading can keep a page from bringing an entire long list of content into the initial experience, especially hundreds of images on a cell phone. Essential content should be prioritized while non-essential content loads as needed.

Q: Which tools can help test JavaScript SEO performance?

The existing guidance recommends Lighthouse for identifying performance improvements. PageSpeed Insights and the Mobile-Friendly Test can also evaluate whether web applications perform well and remain accessible to users and search engines.

Summary & Key Takeaways

• JavaScript is often misunderstood in the SEO community, but it is a powerful tool for creating dynamic web applications. Communication between developers and SEOs is crucial to bridging knowledge gaps and dispelling myths.

• Single-page applications and AJAX can pose challenges for SEO, but with proper implementation and caching strategies, these can be mitigated. Pre-rendering content can enhance both user experience and search engine indexing.

• Googlebot's crawling and rendering processes are complex, involving multiple stages. Understanding these processes and using tools like Lighthouse can help optimize web pages for both search engines and users.