JavaScript SEO office hours March 25th 2020

TL;DR

Discussion on JavaScript SEO challenges and solutions.

Transcript

MARTIN SPLITT: Instant. Interesting. The more you learn. All right. Hi everyone, and welcome to the first official JavaScript SEO Office Hours. I'm Martin Splitt. I am working in the search relations team in Zurich, currently working from home, as you can probably tell. Which is probably what most of you are also doing, I'm guessing. COVID has pre... Read More

Key Insights

• Blocking JavaScript or CSS with robots.txt doesn't lead to downranking but can affect content visibility and indexing.
• Infinite scroll content indexing depends on implementation; testing tools can help verify visibility in rendered HTML.
• Web security for JavaScript sites should focus on preventing cross-site scripting and using content security policies.
• Performance optimization for JavaScript sites includes deferring scripts and considering server-side rendering for critical content.
• Lazy loading images can be indexed if the implementation allows Googlebot to see the final rendered HTML with image sources.
• A/B testing with JavaScript can involve URL parameters and canonicals to ensure proper indexing of variant pages.
• Googlebot executes JavaScript but does not interact with page elements like buttons or scroll, impacting content visibility.
• Google Maps API usage by Googlebot might consume quota; testing is recommended to verify behavior.

Questions & Answers

Q: How does blocking JavaScript or CSS with robots.txt affect SEO?

Blocking JavaScript or CSS with robots.txt does not lead to downranking, as it is not considered cloaking. However, if the content is only visible when these resources are fetched, and they are blocked, Googlebot will not index the content. It is crucial to ensure that important content is visible in the rendered HTML, even if some resources are blocked.

Q: How can I ensure infinite scroll content is indexed?

The indexing of infinite scroll content depends on the implementation. It is recommended to use testing tools to check the rendered HTML and ensure that the additional content is visible to Googlebot. If the implementation uses links to load more content and those links have no index, the content may not be indexed. Testing and verifying with tools like the URL inspection tool is essential.

Q: What are the best practices for web security on JavaScript sites?

Web security for JavaScript sites involves preventing cross-site scripting (XSS) and cross-site request forgery (CSRF). Implementing content security policy (CSP) headers is crucial, as they can prevent many security issues. Additionally, keeping dependencies up to date and reducing unnecessary dependencies are important practices. Testing for vulnerabilities and using report-only CSP can help identify potential issues before they become problematic.

Q: How can I optimize JavaScript site performance?

Optimizing JavaScript site performance involves deferring as much JavaScript as possible and minimizing reliance on client-side rendering for critical content. Server-side rendering or server-side rendering with hydration can improve performance, especially for landing and static pages. Tree-shaking dependencies to remove dead code and splitting code bundles to load only necessary parts can also enhance performance.

Q: How can I ensure lazy loading images are indexed?

To ensure lazy loading images are indexed, the implementation must allow Googlebot to see the final rendered HTML with the correct image sources. Using IntersectionObserver for lazy loading can help, as Googlebot adjusts the viewport to make content visible. Testing with tools to verify that the rendered HTML includes the correct image sources is crucial for indexing.

Q: Can A/B testing with JavaScript affect SEO?

A/B testing with JavaScript can affect SEO if not implemented correctly. Using URL parameters to distinguish between variants and setting canonical tags to point back to the original version can help maintain proper indexing. JavaScript-injected canonicals are respected by Googlebot, but it's important to test the implementation to ensure that the correct canonical tags are being recognized.

Q: Does Googlebot interact with page elements like buttons?

Googlebot does not interact with page elements like buttons or scroll through pages. It relies on the rendered HTML to index content. If content is only loaded or made visible through user interaction, Googlebot may not see it. Ensuring that important content is present in the HTML before any interaction is key to proper indexing.

Q: Does Googlebot consume API quota, like Google Maps API?

There is a potential for Googlebot to consume API quota, such as with the Google Maps API, since it executes JavaScript. However, Googlebot is known to aggressively cache resources, which might mitigate this issue. Testing is recommended to verify if and how Googlebot interacts with APIs and whether it affects the quota.

Summary & Key Takeaways

• The session covered various aspects of JavaScript SEO, including how blocking resources with robots.txt affects indexing and content visibility. Martin Splitt emphasized the importance of testing tools to ensure that content is visible in rendered HTML, especially for infinite scroll implementations.

• Security practices for JavaScript sites were discussed, highlighting the need to prevent cross-site scripting and employ content security policy headers. Performance optimization was also covered, with recommendations to defer JavaScript and consider server-side rendering.

• The discussion included handling lazy loading images for indexing, A/B testing with URL parameters, and ensuring that JavaScript-injected content is properly indexed. The limitations of Googlebot's interaction with page elements were also addressed, alongside potential impacts on API usage.