SuiteCommerce web stores are built using Single-Page Application (SPA) technology, leveraging JavaScript frameworks by loading a single HTML page and updating content as the user interacts with it, allowing a fast, dynamic, and responsive user experience. While this architecture improves site performance and customer experience, it can pose challenges for Search Engine Optimization (SEO), particularly when it comes to how search engines crawl and index content.
To address this issue, SuiteCommerce uses an SEO Page Generator—a server-side rendering (SSR) tool designed specifically to ensure that SPA-based sites remain discoverable and indexable by search engines like Google and Bing. Today, we’ll go through how this works and what it means for your NetSuite eCommerce site.
Why SEO is Challenging for SPAs
In a standard SPA, the browser loads a single HTML page and uses JavaScript to dynamically update the content as users navigate the site. While this exponentially speeds up navigation and reduces redundant data loading, the truth is, many search engine crawlers do not execute JavaScript. As a result, these crawlers might not see the entire content of your website, potentially hurting your SEO rankings.
How the SuiteCommerce SEO Page Generator Works
To ensure that search engines receive fully rendered content, the SEO Page Generator acts like a virtual browser. It loads the requested page, executes all JavaScript code, and then returns a static HTML version of the page. This prerendered HTML is what the crawler sees: Basically, the SEO Page Generator makes your SPA site fully crawlable for engines and SEO-friendly.
Debugging with the SEO Page Generator Log
To check and debug what search engines see, developers and SEO specialists can use the SEO Page Generator’s debug logging feature. This log provides detailed insights, such as final HTML output, timestamps, and load durations, memory and CPU usage, subrequests for CSS and JavaScript, and potential errors.
This allows SEO experts and developers to ensure that what’s rendered for crawlers matches what users see, and that the content is consistent and without any errors.
How to View the Debug Log
To inspect a SuiteCommerce page using the SEO Page Generator:
- Navigate to the desired URL.
- Add the ?seodebug=T parameter at the end of the URL (use &seodebug=T if other parameters already exist).
- Hit Enter and view the page source.
- Example:
view-source:www.mywebstore.com/Salida-Backpack?seodebug=T
- Example:
- Scroll down to find the debug log embedded within HTML comments (<!– Debug output: … –>).
Troubleshooting Tips
1. Avoid Cached Responses
Once a URL is rendered, it could be cached. To see changes after editing content or code, add a unique preview parameter:
view-source:www.mywebstore.com/Salida-Backpack?seodebug=T&preview=1234
2. Use an Incognito Window
If the generator is not working, it could be due to a recognized or logged-in session. Use an incognito window to simulate an anonymous visitor.
3. Watch for JavaScript Compatibility Errors
Errors may appear if your JavaScript code uses features not supported by ECMAScript 5.1. These will be listed in the debug log and should be corrected to ensure compatibility.
4. Check Sub-Request Status Codes
The log provides a list of all resource requests. Look out for errors like 404 or 500 status codes, which can impact the page rendering.
What Are the Three Dots in the Main Div?
If you inspect a page without triggering the page generator or running the SPA JavaScript, you may see <div id=”main” class=”main”>…</div>. This is the unrendered “frame page”—essentially a placeholder. While not necessarily an error, this indicates that the page was not fully rendered and won’t reflect the final content or metadata intended for users or search engines.
All in all, the SuiteCommerce SEO Page Generator bridges the gap between SPA performance and SEO visibility. By providing prerendered pages to search engines, this feature ensures your content is indexed correctly while maintaining a fast and modern browsing experience for shoppers. Make sure you leverage the debug log to monitor, optimize, and troubleshoot your SEO output effectively to achieve better rankings!
