JavaScript SEO office hours April 29th, 2020

TL;DR

Discussion on JavaScript SEO challenges and solutions.

Transcript

MARTIN SPLITT: Hello and welcome to another JavaScript SEO Office Hours hangout. I'm pretty happy to see that there's a few people here. I'm Trying to do these hangouts now weekly with an alternating time zone. Basically like an APEC friendly time zone and more North America friendly time zone-- North and South America, actually. Doesn't matter. So... Read More

Key Insights

• JavaScript single-page applications should have proper HTML links for Google to crawl and index effectively. Hardcoded links are not necessary if links are generated correctly.
• Client-side 301 redirects are not possible; use server-side configuration for permanent redirects. JavaScript redirects can be used but require JavaScript understanding by crawlers.
• Large JavaScript bundles might cause rendering issues in testing tools but not necessarily in Google's indexing infrastructure.
• Tree shaking and code splitting can optimize JavaScript bundle size, improving user experience and rendering performance.
• Dynamic rendering can be a workaround for JavaScript-heavy sites, but it adds complexity and should be used if necessary.
• Googlebot's user agent should reflect the evergreen nature, and Chrome 41 should not appear unless it's a non-Google crawler.
• Infinite scroll implementations should ensure content is visible in rendered HTML to be indexed correctly by Google.
• Multiple H1 tags on a page are not problematic for Google indexing, as long as the content structure is clear.

Questions & Answers

Q: How should JavaScript single-page applications handle links for SEO?

JavaScript single-page applications should generate proper HTML links using 'a' tags with an 'href' that contains a crawlable URL. This ensures that Google can discover and index the pages effectively. Hardcoded links are not necessary if links are generated correctly through JavaScript.

Q: Can I implement a 301 redirect on the client side?

A client-side 301 redirect is not possible because a 301 status is an HTTP status code sent from the server. However, JavaScript can be used for redirects by changing 'window.location.href', but this requires JavaScript understanding by crawlers. For permanent redirects, configure the server to handle 301 redirects.

Q: What issues can arise from large JavaScript bundles?

Large JavaScript bundles can cause rendering issues in testing tools, resulting in errors like 'other error'. However, Google's indexing infrastructure is more patient and can handle larger files. Optimizing bundle size through tree shaking or code splitting can improve user experience and rendering performance.

Q: What are tree shaking and code splitting?

Tree shaking is a technique to remove unused code from a JavaScript bundle, reducing its size. Code splitting involves breaking down a large bundle into smaller chunks that can be loaded on demand, improving load times and performance. Both techniques are useful for optimizing JavaScript-heavy applications.

Q: When should dynamic rendering be used?

Dynamic rendering should be considered if a JavaScript-heavy site faces significant rendering issues that affect SEO. It involves serving pre-rendered HTML to crawlers while providing JavaScript to users. However, it adds complexity and should only be used if necessary, as it is a workaround rather than a permanent solution.

Q: Is Googlebot still using Chrome 41?

Googlebot should not be using Chrome 41, as it has been evergreen since April 2019. If you see Chrome 41 in your logs, verify if the IP is from Google. It could be a non-Google crawler using an outdated user agent string.

Q: How should infinite scroll be implemented for SEO?

Infinite scroll should ensure that all content is visible in the rendered HTML for it to be indexed by Google. Using the intersection observer API can help implement infinite scroll effectively. Providing paginated URLs or submitting different pages in sitemaps can also aid in content discovery.

Q: Are multiple H1 tags on a page a problem for SEO?

Multiple H1 tags are not inherently problematic for SEO as long as the content structure is clear and logical. Google can handle multiple H1 tags, and they do not adversely affect indexing or ranking.

Summary & Key Takeaways

• This session of JavaScript SEO Office Hours covers various aspects of optimizing JavaScript sites for search engines. Key topics include handling JavaScript single-page applications, managing redirects, and optimizing JavaScript bundle sizes.

• Participants discuss the challenges of large JavaScript files and potential solutions like tree shaking and code splitting. Dynamic rendering is also considered as a workaround for rendering issues.

• The session addresses concerns about Googlebot's user agent, infinite scroll, and content indexing. Multiple H1 tags and their impact on SEO are clarified, emphasizing the importance of content visibility in rendered HTML.