Typical Next.js SEO Pitfalls to Avoid in 2024

This article is part of the in-depth series about self-hosted Next.js and the challenges around it.

Next.js SEO Challenges in 2024

How Not to Sabotage Your Indexing and Unleash Its Full Potential When Next.js was introduced, it aimed to tackle the main issue with React applications - SEO. SPAs had significant drawbacks that hindered their search indexing and overall performance.

The introduction of Server-Side Rendering addressed many of these issues, cementing Next.js as a leading solution for web application development to this day. The framework has evolved alongside the market, moving towards simpler solutions that don't require complex skills or configurations, becoming popular for their "black box" operation.

Over time, as developers got accustomed to various tools, a relaxation or a shift away from delving into processes and nuances led to most projects not fully realizing their potential or even harming themselves, impacting SEO and user experience, and ultimately costing businesses customers and revenue.

Below are examples of typical mistakes found in Next.js SEO project audits that significantly affect search rankings and are critically important for such projects

Content Pre-Rendering (SSR, ISR, SSG)

It may seem odd, but despite Next.js handling everything by default, it's still possible to break things in a way that the app behaves like a typical React application — or worse.

Pre-rendering mechanisms can be easily broken if there's a direct dependency on the client's browser, especially the window object. Developers often use correct data loading methods but forget that data must be rendered on the server, or else, the client receives empty markup, which Google's bots do not appreciate due to the lack of page information.

Furthermore, even if data is correctly rendered, it's easy to break the hydration mechanism, affecting the site's performance and overall user experience.

For Google indexing, all data for it must be loaded and rendered on the server. A common mistake is loading essential content, like product cards, on the client side, meaning they won't be fully indexed.

Indicators of problems in this area include:

• Blank screens on initial page render
• Poor site performance
• Loading indicators when entering the site
• Weak indexing metrics

Meta Data

As competition in indexing grows, it's crucial for projects to utilize their full potential. Simply setting basic meta tags is no longer sufficient in 2024. Understanding modern mechanisms and ensuring their correct usage is vital.

We won't stop on tags like title and meta description — just note that if they're not set server-side, it's a disaster.

Moving on to less obvious things, such as the canonical tag — if not manually set correctly, Next.js won't do it for you, and Google might choose not to index some pages as duplicates. P.S. even if you set everything correctly, Google might assign a different canonical tag.

The importance of a dynamic sitemap and updated Robots.txt cannot be overstated, as their absence or neglect can significantly slow down the indexing of new pages. Likewise, missing opportunities to use structured data limits new content display channels encouraged by Google.

Lastly, localization issues—if your site serves multiple languages or regions, not using tags like alternates is a critical mistake directly impacting search results. You can configure settings to show users content based on their country and language. See these implementations in a Next.js project with Storyblok here

Site General Performance and Caching

It's no secret that site speed is a crucial element of user experience and SEO. While not the primary concern, competing with the best requires attention to these metrics.

Next.js addresses most optimization problems by default, provided your development team deeply understands the framework and utilizes all its tools, as most are essential for achieving optimal performance.

Beyond code, understanding how your content is distributed across the network is crucial. Without an effective caching strategy, you're likely missing out on optimizations and spending more on server resources than necessary. Learn more about caching in our article.

We've observed and detailed these implementation errors in a separate article, available here

For further reading, check out our useful articles: LCP Optimization Creating robots.txt SEO in Next.js App Router Image Optimization in Next.js with StoryBlok