During my 7+ years as a technical SEO, I\’ve seen firsthand how fiercely competitive the ecommerce landscape can be. A single SEO mistake can send your site plummeting from the coveted first page of search results, often without you even realising it.
While your competitors might boast a superior product range, stronger brand recognition, or more competitive pricing, there\’s one arena where you can truly differentiate yourself: tidy SEO.
In ecommerce SEO, there\’s no room for shortcuts. Meticulous optimisation of your Product Listing Pages (PLPs) is essential for long-term success in the SERPs.
One of the most common issues I encounter with new ecommerce clients is content rendering problems, particularly with PLPs. It\’s a delicate balance: you want to showcase products high above the fold for an enhanced user experience, but you also need to provide essential information and create internal linking opportunities for SEO value.
The most common solution? A \’Read more\’ toggle link or button. But there\’s no guarantee that the content behind this button will be crawled by Google.
In this comprehensive guide, we\’ll explore different scenarios where a \’Read more\’ button can cause significant technical SEO issues, how to identify and confirm these issues, and most importantly, how to fix them.
Understanding the \’Read More\’ Button in Ecommerce
On ecommerce PLPs, the \’Read more\’ (or \’See more\’) link or button typically appears at the top of the page. It serves as an introduction or description to the page, explaining the types of products listed and often including navigation to subcategories.
Most ecommerce platforms allow you to add this description, automatically displaying either one line of copy or a specific word count. Different platforms handle this functionality in various ways:
- Shopify: Uses Liquid templates, often involving JavaScript for additional content loading.
- Magento (Adobe Commerce): Highly customisable, with potential JavaScript use for content loading.
- WooCommerce (WordPress): Benefits from WordPress\’s SEO-friendly architecture but requires review of custom JavaScript implementations.
- BigCommerce: Often relies on JavaScript for dynamic content loading.
- PrestaShop: Modules and themes might use JavaScript, potentially hiding content from crawlers.
- Squarespace: Generally includes content in HTML, making it SEO-friendly.
- Prismic CMS: Often depends on JavaScript for dynamic content, which can be problematic for SEO.
Remember, Google places higher value on content positioned higher on the page. This makes the \’Read more\’ section crucial for future SEO success.
Client-Side vs. Server-Side Rendering: A Deep Dive
Understanding the difference between client-side and server-side rendering is crucial for diagnosing and solving PLP content indexing issues.
Client-Side Rendering (CSR)
In client-side rendering, the initial HTML file sent by the server is minimal. The browser then executes JavaScript to render the rest of the content. While this approach can enhance user interactivity, it poses significant SEO challenges.
Pros of CSR:
- Improved performance for complex, dynamic applications
- Reduced server load
- Enhanced user interactivity
Cons of CSR:
- Potential SEO issues due to incomplete indexing
- Longer initial load times
- Increased complexity in tracking and analytics
Example: The Daye website (https://www.yourdaye.com/products/organic-tampons/) uses Prismic CMS, which often relies on client-side rendering. This can lead to content not being fully indexed by search engines.
Server-Side Rendering (SSR)
With server-side rendering, the server generates the complete HTML for the page before sending it to the browser. This approach ensures that all content is available for search engines to index immediately.
Pros of SSR:
- Better SEO performance
- Faster initial page load
- Improved accessibility
Cons of SSR:
- Higher server load
- Potentially slower time-to-interactive for complex applications
- More challenging to implement dynamic features
Example: The Peace With The Wild website uses WooCommerce, which typically employs server-side rendering, ensuring better content indexing.
Identifying Indexing Issues with \’Read More\’ Content
To determine if your \’Read more\’ content is being indexed, follow these steps:
Google Search Console:
- Use the URL Inspection Tool and select \”Test Live URL\” to view the HTML rendered by Google.
- Check the Coverage Report to confirm page indexing status.
Browser Inspect Tool:
- Open your browser\’s developer tools and inspect the element to verify if the content is present in the HTML.
- Compare the original HTML with the rendered HTML to identify any discrepancies.
View Page Source:
- Examine the page source to check if the content is included in the initial HTML response.
JavaScript Console:
- Look for any JavaScript errors that might prevent content from loading correctly.
Screaming Frog SEO Spider:
- Enable JavaScript rendering in Screaming Frog when crawling your site.
- Store both the original and rendered HTML for comparison.
- Export and analyse data to identify pages where content is missing from the rendered HTML.
Common Reasons for Content Not Being Rendered/Indexed
JavaScript execution issues
Google\’s crawlers can\’t interact with buttons like human users. If the \’Read more\’ content relies on JavaScript execution, it may not be rendered.
JavaScript errors
Network issues or coding errors can prevent content from loading, even after the page is rendered in the browser.
Incorrect URLs, missing files, or JavaScript code issues can all contribute to rendering problems.
Ecommerce Platform-Specific Solutions
Different ecommerce platforms handle content rendering in various ways, each with its own set of challenges and solutions. Understanding how your specific platform deals with \’Read more\’ functionality is crucial for implementing the right fix.
Let\’s dive into some of the most popular ecommerce platforms and explore their unique issues and solutions for ensuring proper content indexing.
Shopify
Potential Issues: Shopify themes often use Liquid templates and may involve JavaScript for content loading.
Solution: Ensure critical content is loaded in the initial HTML. Use CSS to hide/reveal content rather than relying on AJAX/JavaScript.
Implementation example:
CSS and JavaScript for Toggling:
.collection-description {
max-height: 100px;
overflow: hidden;
}
.read-more {
display: inline;
}
.show-more .collection-description {
max-height: none;
}
.show-more .read-more {
display: none;
}
Magento
Potential issues: Highly customisable, with extensions or themes potentially using JavaScript for additional content loading.
Solution: Include important content in the initial HTML response. Prioritise CSS for toggling visibility.
WooCommerce (WordPress)
Advantages: Benefits from WordPress\’s robust SEO-friendly architecture.
Solution: Most themes and plugins include content in the initial HTML, but review custom JavaScript implementations to ensure content is not hidden from crawlers.
Example: https://www.peacewiththewild.co.uk/product-category/for-the-home/ (content is properly rendered and indexed)
BigCommerce
Potential issues: Can use JavaScript for dynamic content loading.
Solution: Ensure any custom \’Read more\’ functionality includes content in the initial HTML and uses CSS for visibility toggling.
PrestaShop
Potential issues: Themes and modules might use JavaScript, potentially hiding content from crawlers.
Solution: Ensure modules and themes load all SEO-critical content in the initial HTML response.
Squarespace
Advantages: Generally includes content in the HTML, making it SEO-friendly.
Solution: Review any custom code or third-party scripts to ensure they do not rely on JavaScript for critical content loading.
Prismic CMS
Potential issues: Often relies on JavaScript for loading content dynamically, which can be problematic for SEO.
Solution: Ensure the primary content is included in the initial HTML or utilise server-side rendering where possible.
Example: https://www.yourdaye.com/products/organic-tampons/ (content may not be fully indexed due to client-side rendering)
Best Practices for PLP Content Rendering
Inject critical content in the initial HTML response:
While not always possible without significant code changes, this is the ideal solution for ensuring content indexing.
Implement Server-Side Rendering (SSR):
Platforms supporting SSR, like Next.js with a headless CMS, ensure all content is rendered on the server and included in the initial HTML response.
Consider Static Site Generation (SSG):
Platforms using SSG, like Gatsby with a headless CMS, pre-render content into static HTML files, benefiting SEO.
Avoid client-side rendering for critical content:
Ensure that SEO-critical content does not rely solely on client-side JavaScript for rendering.
Utilise hydration techniques:
Some frameworks allow for initial server-side rendering followed by client-side hydration, combining the benefits of both approaches.
Conclusion
Optimising your PLP content for proper indexing can be the difference between SEO success and invisibility in the SERPs. By understanding the intricacies of client-side vs. server-side rendering, identifying potential issues, and implementing platform-specific solutions, you can ensure that your valuable content is fully accessible to search engines.
Remember, the key is to strike a balance between user experience and SEO performance. By following the guidelines and best practices outlined in this guide, you\’ll be well on your way to achieving that balance and driving sustainable organic growth for your ecommerce business.
At Seeker, we\’re committed to helping ecommerce businesses navigate these complex technical SEO challenges. If you\’re looking to take your PLP optimisation to the next level, don\’t hesitate to reach out to one of our strategists for a comprehensive site analysis.
