JavaScript SEO office hours June 10th, 2020

TL;DR

Discussion on SEO challenges and strategies for JavaScript sites.

Transcript

MARTIN SPLITT: Hi, everyone, and welcome to the June 10 edition of the JavaScript SEO Office Hours. I'm super happy to see that a few people joined the recording as well and that lots of questions were submitted. So let's get going. I'll start with a question from YouTube, and then I'll ask the audience if there's any questions in the audience as w... Read More

Key Insights

• Google Search Console tools like URL inspection are essential for checking if Google can crawl JavaScript-generated content.
• Loading JavaScript early in the page lifecycle is crucial for ensuring Googlebot captures changes made by scripts.
• The load event in DevTools indicates when all resources are downloaded, but doesn't ensure scripts are executed.
• Server-side rendering is recommended for critical content like titles and descriptions for better SEO performance.
• Canonical tags should be prioritized, but critical content takes precedence over meta information.
• JavaScript and CSS files with noindex in HTTP headers don't harm SEO but aren't necessary since they aren't indexed.
• Field data reflects real user experiences, while lab data is synthetic and can differ significantly.
• JavaScript-heavy sites might face crawl budget issues, but it's generally manageable unless the site is very large.

Questions & Answers

Q: How can Google Search Console help in identifying if Google can crawl JavaScript links?

Google Search Console provides tools like the URL inspection tool, rich results test, and mobile-friendly test to view rendered HTML. If the content appears in these tools, it indicates Google can crawl the JavaScript links. If not, it means Google can't see them, which could impact indexing.

Q: What is the significance of loading JavaScript early in the page lifecycle?

Loading JavaScript early is crucial because Googlebot uses heuristics to determine when a page is complete. If scripts load too late, they might be missed, affecting how Google indexes the changes. Ideally, JavaScript should be loaded as early as possible to ensure all changes are captured.

Q: What is the difference between the load and DOMContentLoaded events?

DOMContentLoaded fires when the HTML is parsed and the DOM is constructed, but resources like images and stylesheets might still be loading. The load event fires when all resources are fully loaded. However, scripts might load additional resources after the load event.

Q: Why is server-side rendering recommended for SEO?

Server-side rendering is recommended for critical content such as titles, descriptions, and main page content because it ensures these elements are available to Googlebot immediately, improving indexing and SEO performance. Client-side rendering can delay content visibility to Google.

Q: How should canonical tags be handled in a hybrid rendering approach?

Canonical tags should be handled carefully to avoid conflicting information between server-side and client-side rendered content. While critical content takes precedence, it's important to ensure canonical tags are correct to prevent confusion during indexing.

Q: Is it problematic to use noindex in HTTP headers for JavaScript and CSS files?

Using noindex in HTTP headers for JavaScript and CSS files isn't problematic since these files aren't typically indexed. However, blocking them via robots.txt can lead to issues, as Googlebot might need to access them to render the page correctly.

Q: Why might field data and lab data differ for page speed assessments?

Field data comes from real users and reflects actual experiences, while lab data is synthetic, often collected in controlled environments with optimal conditions. Differences arise due to variations in user devices, network conditions, and geographic locations.

Q: Do JavaScript-heavy sites consume more crawl budget compared to static sites?

JavaScript-heavy sites can consume more crawl budget due to additional requests made by scripts. However, caching mechanisms often mitigate this. Unless a site is extremely large or has server issues, JavaScript's impact on crawl budget is typically manageable.

Summary & Key Takeaways

• The session covers a range of topics related to JavaScript and SEO, emphasizing the importance of using Google Search Console tools to ensure Google can crawl JavaScript-generated content effectively. Participants discussed strategies for optimizing JavaScript loading and server-side rendering for better SEO performance.

• Questions from the audience addressed issues like handling canonical tags, the impact of JavaScript on crawl budget, and the difference between field and lab data in assessing page speed. The session provided practical advice on prioritizing critical content and using server-side rendering for SEO.

• The discussion highlighted common challenges faced by JavaScript-heavy websites, such as ensuring all content is visible to Googlebot and managing crawl budget. The session also emphasized the importance of field data in understanding real user experiences compared to lab data.