How Do Web Frameworks Affect SEO?

TL;DR

Search engines, including Google, can execute JavaScript, but not all crawlers do. Proper URL structures and server-side rendering improve SEO for JavaScript-heavy sites. Google Search Console offers tools to debug SEO issues, including rendering errors and mobile friendliness. Avoid using JavaScript onclick events for navigation if you want content indexed.

Transcript

JASON MILLER: When I was first building the Preact site, I had it kind of all client side rendered. We weren't doing any pre-rendering or anything. We are now, but at the time I did that, and we weren't super concerned with SEO at the time which immediately vanished. And I was definitely worried when we first pushed it live, like, is this just goin... Read More

Key Insights

• Google's crawler can execute JavaScript, allowing it to index JavaScript-heavy websites, but not all crawlers can do this.
• Proper URL structures, such as using push state routing, are crucial for ensuring content is indexed by search engines.
• Google Search Console provides tools like the mobile-friendly test and URL inspection tool to diagnose discoverability issues.
• Using onclick event handlers for navigation can prevent search engines from indexing content; links should be used instead.
• Infinite scrolling can hinder SEO; use pagination or ensure each scroll state has a unique URL.
• Web workers can impact SEO if they delay content rendering; test with Google tools to ensure content is indexed.
• Crawl budget is influenced by the number of requests a page makes; fewer requests can improve crawl efficiency.
• Framework size doesn't directly affect crawling, but the number of requests and server response times do.

Questions & Answers

Q: How do search engines handle JavaScript?

Google's crawler can execute JavaScript, allowing it to index content generated by JavaScript frameworks. However, not all search engines have this capability. It's important to ensure that critical content is accessible without JavaScript or use server-side rendering to improve SEO across all search engines.

Q: What tools does Google offer for diagnosing SEO issues?

Google Search Console provides tools like the mobile-friendly test and URL inspection tool to diagnose SEO issues. These tools help identify rendering errors, discoverability issues, and provide insights into how Googlebot views and indexes your site. They also offer details on resources that couldn't be fetched and JavaScript errors.

Q: How should URLs be structured for SEO with JavaScript frameworks?

URLs should be structured using push state routing rather than hash-based routing to ensure they are indexable by search engines. Each page should have a unique URL that can be accessed directly, allowing both users and crawlers to reach the content without needing to navigate from the home page.

Q: Can content accessed via onclick events be indexed?

Content accessed via onclick events is generally not indexable by search engines. It's recommended to use standard HTML links for navigation to ensure that content is accessible and discoverable by both users and search engines.

Q: How can infinite scrolling affect SEO?

Infinite scrolling can hinder SEO if not implemented correctly, as search engines may not index content that loads dynamically. To ensure content is discoverable, use pagination or provide unique URLs for each scroll state, allowing crawlers to access and index all content.

Q: What impact do web workers have on SEO?

Web workers can impact SEO if they delay content rendering, as search engines may not wait for long-running scripts to complete. Testing with Google's tools can help ensure that content is rendered and indexed properly, even when using web workers for state management or DOM manipulation.

Q: Does framework size affect how content is crawled?

Framework size itself doesn't directly affect crawling, but the number of requests and server response times do. Reducing the number of requests and optimizing server-side rendering can improve crawl efficiency and ensure content is indexed effectively.

Q: What is crawl budget and how does it affect SEO?

Crawl budget refers to the number of pages a search engine crawler will visit on your site within a given timeframe. Factors like the number of requests per page and server response times can affect crawl budget. Efficiently structured sites with fewer requests per page can optimize crawl budget usage.

Summary & Key Takeaways

• Google's crawler can execute JavaScript, which allows it to index websites built with JavaScript frameworks. However, not all search engines have this capability, so it's important to ensure proper server-side rendering and URL structures for optimal SEO.

• Google Search Console offers several tools to help diagnose and fix SEO issues. The mobile-friendly test and URL inspection tool can help identify rendering problems and ensure that content is properly indexed.

• Using JavaScript onclick event handlers for navigation can prevent content from being indexed by search engines. It's recommended to use standard HTML links to ensure that content is discoverable and accessible to users and crawlers.