JavaScript SEO office hours June 17th, 2020

TL;DR

Discussion on SEO for JavaScript sites with audience Q&A.

Transcript

MARTIN SPLITT: Hello, and welcome to the JavaScript SEO Office Hours. Today is June 17. And I see that we have a few YouTube questions. Besides Dave, one else joined the Hangout recording today, so far. Oh, no, as I speak, here is Pedro joining-- or not joining us. I don't know. Yeah, yeah, here we go. Hi, Pedro, you're on air now. I just started t... Read More

Key Insights

• Martin Splitt emphasizes the importance of using Google's testing tools to verify rendered HTML, as they reflect the actual indexing and rendering process.
• For SEO issues related to ReactJS, it is recommended to remove duplicate meta tags from the index HTML and rely on React Helmet for rendering specific tags.
• Blocking CSS and JavaScript in robots.txt can lead to potential SEO problems, especially if content is generated through JavaScript.
• Google does not index JavaScript or CSS files themselves, but they are crucial for rendering and understanding the content of a page.
• Performance Observer API challenges in SPAs were discussed, with suggestions to use performance.mark for custom measurements.
• When updating to a responsive design or headless e-commerce, ensure that Google can see the content by checking the rendered HTML.
• Links with an onclick event that override the href are not considered cloaking unless they mislead users with different content.
• For navigation menus, links that are only available through user gestures like hovering are not crawled or indexed by Google.

Questions & Answers

Q: How can ReactJS affect SEO, and what should be done?

ReactJS can lead to duplicate meta tags if both index HTML and React Helmet render them. It's recommended to remove tags from index HTML and rely on React Helmet for specific components. This ensures that meta tags are correctly rendered and indexed by Google.

Q: Does blocking CSS and JavaScript affect SEO?

Yes, blocking CSS and JavaScript can affect SEO as it prevents Google from rendering the page correctly. This can lead to missing content and user experience issues. It's advised to allow Googlebot to crawl these files to ensure proper rendering and indexing.

Q: How does Google handle JavaScript and CSS in indexing?

Google crawls JavaScript and CSS to render the page but does not index these files themselves. The rendered content from executing JavaScript is what gets indexed. Blocking these files can prevent Google from seeing the full content of a page.

Q: What are the challenges with Performance Observer in SPAs?

In SPAs, Performance Observer can accumulate data across routes, making it hard to measure specific page performance. While there's no direct reset method, using performance.mark to timestamp and assess data is a workaround. The User Timing API might also help in building custom solutions.

Q: What should be considered when updating to responsive design or headless e-commerce?

Ensure that the Google crawler can see the content by checking the rendered HTML with Google's testing tools. This is crucial to verify that all content is visible and indexable, especially when implementing new designs or technologies like headless e-commerce.

Q: Are links with onclick events considered cloaking?

Links with onclick events that prevent the default href behavior are not considered cloaking unless they lead to misleading or different content. Such implementations are acceptable as long as they don't deceive users or search engines.

Q: How does Google handle navigation links in JSON files?

Links that are only available through user gestures, like hovering, and are loaded via JSON files are not crawled or indexed by Google. For links to be indexed, they must be part of the rendered HTML without requiring user interaction.

Q: What happens if a page redirects to another that is blocked by robots.txt?

If page A redirects to page B, which is blocked by robots.txt, Google might still rank page A based on signals, but it won't index page B. If page B is important, it should not be blocked to ensure it can be crawled and indexed.

Summary & Key Takeaways

• The session covers various questions about JavaScript SEO, including issues with ReactJS, the impact of blocking CSS/JavaScript, and how Google renders and indexes content. Participants are advised to use Google's tools to check rendered HTML.

• Martin Splitt clarifies that Google does not index JavaScript or CSS files but emphasizes their importance in rendering. He advises against blocking them in robots.txt to avoid missing content or user experience issues.

• The session includes a discussion on handling Performance Observer in SPAs, with suggestions for custom measurements. The importance of ensuring visible content for Google's crawler in responsive and headless designs is also highlighted.