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.
