Enhancing SEO with SAP Commerce Composable storefront: A Deep Dive

As the digital landscape continues to evolve, Search Engine Optimization (SEO) stands as a key driver for attracting organic traffic and increasing online visibility. To maintain a competitive edge, businesses must strategically leverage advanced technologies and platforms. One such powerful platform is SAP Commerce Cloud, particularly its Composable Storefront, which offers many features tailored for SEO enhancement. In this blog, we’ll dive into how SAP Commerce Cloud’s Composable Storefront can elevate your SEO strategy, with practical examples like creating custom PageMetaResolvers to dynamically configure meta tags and optimizing page titles with branding through a customized SeoMetaService. These insights will help you refine and enhance your SEO approach for maximum impact.

SAP Commerce Cloud: Composable Storefront

SAP Commerce Cloud represents a cutting-edge, comprehensive e-commerce platform engineered to meet the complex demands of modern enterprises. This robust platform offers unparalleled scalability and versatility, seamlessly supporting diverse business models from B2B to B2C and beyond.

The Composable Storefront, a cornerstone of SAP Commerce Cloud, delivers a modular and highly customizable front-end framework. This innovative component empowers businesses to craft unique, engaging customer experiences, positioning them at the forefront of digital commerce innovation.

Search Engine Optimization

Search Engine Optimization (SEO), is a multifaceted digital marketing discipline focused on enhancing a website’s visibility and ranking within search engine results pages (SERPs). This strategic approach involves the meticulous optimization of website content, structure, and technical elements to align with search engine algorithms and user intent.

By implementing SEO best practices from a website’s inception, businesses can significantly augment their likelihood of securing prominent positions in search results. This elevated visibility translates to increased organic traffic, broader reach to potential customers, and a fortified online presence. In the competitive digital landscape, a well-executed SEO strategy serves as a cornerstone for sustainable online growth and market dominance.

                               

There are three main types of SEO: on-page (content, keywords), off-page (link building, social media), and technical (website speed, mobile-friendliness). For a well-rounded SEO strategy, strategy, it’s also important to consider additional factors like voice search, video consider additional factors like voice search, video optimization, and local SEO.

In this blog, we’ll focus on on-page SEO techniques and strategies within the SAP Commerce Cloud Composable Storefront. On-page SEO refers to optimizing individual web pages to boost their rankings on search engines. This involves improving content quality, strategically using keywords, optimizing HTML tags, and enhancing the overall user experience.

On-Page SEO Features of SAP Commerce Cloud Composable Storefront

Composable Storefronts provide several SEO benefits. They use Stateful URLs with deep linking, which makes every page easily accessible for both users and search engines. You can also customize URLs to optimize product and category pages for better search rankings. Server-side rendering helps search engines understand your content, and structured data clearly highlights your products. Additionally, Composable Storefronts offer various tools for managing HTML tags to improve SEO performance.

HTML Tags

HTML tags, especially meta tags, help search engines, social platforms, and bots understand page information. By setting up and regularly updating meta tags, you can improve your page’s ranking, click-through rate, and user experience, thereby boosting  SEO.

Meta tags are placed in the head section of an HTML document. HTML5 supports various meta tags, like title and description, which are used by search engines and social platforms. Some platforms have their own meta tags—for example, Facebook’s Open Graph protocol lets web pages become rich content within social networks.

Here is an example of custom meta tags for Facebook:

<meta property="og:title" content="Custom title for Facebook" />

<meta property="og:description" content="Custom description for Facebook" />

Supported Meta Tags:

In Spartacus, page meta resolvers play a key role in setting meta tags like page titles, descriptions, and other metadata to improve SEO and user experience. They automatically create these tags based on the page’s content and context. Let’s look at how meta tags are handled for three different types of pages and their respective strategies.

A CMS-driven page will automatically use the page label as its title. For content-driven pages, like a Product Detail Page (PDP), the title is designed to be search engine-friendly. It typically follows a format like “Product Title | Main Category | Brand,” but sometimes it can just be the product name. Lastly, a session-driven page, such as a search results page, will have a title related to the session,  showing relevant details like the number of results found in a search.

Customizing Meta Tags

Page resolvers generate specific metadata for each page. In Composable Storefront, you can either tweak the standard resolvers or create custom ones to fit your needs. These resolvers work with the PageMetaService, which creates the PageMeta object. This object is then used by the SeoMetaService to generate the actual meta tags.

Meta tags act like brief descriptions of your web pages, helping search engines and social media platforms understand your content.

Here are the main meta tags you can control:

• Title Tag: Important for SEO, it appears in browsers and impacts search rankings. In SAP Commerce, you can customize it using a PageTitleResolver, which can include the product title, category, and brand.
• Description Tag: This tag improves click-through rates (CTR) on search engine results pages. With a PageDescriptionResolver, you can set a custom description, giving you more control over how your page appears.
• Image Tag (Open Graph): Social media platforms use Open Graph tags like (og:image) to display images when sharing links. A PageImageResolver makes sure the correct image shows up, increasing visual appeal and engagement.
• Robots Meta Tag: This tag tells search engines whether they should index your page and follow its links. A PageRobotsResolver sets rules like INDEX, NOINDEX, FOLLOW, or NOFOLLOW, to control how search engines crawl your pages.Top of Form
• Canonical URLs: Canonical URLs show the preferred version of a page when there’s duplicate content, preventing SEO penalties. A CanonicalUrlResolver helps combine indexing signals from similar pages, improving SEO results.

 

Each resolver interface has a resolve method that lets you apply your own logic to achieve the desired behaviour. Here’s how to create a custom PageMetaResolver:

In SEO, product descriptions can sometimes be too long, exceeding the ideal character limit. Shortening these descriptions helps ensure they appear correctly in search engine results, which can improve click-through rates. Let’s go through the steps to create a custom ProductPageMetaResolver that limits product descriptions to 160 characters:

Step-by-Step Implementation:

• • Create a New Module: In your Spartacus project, create a new module folder named seo-demo inside src/app.

• • Create the Resolver: In the seo-demo folder, add a TypeScript file called short-product-description-page-meta-resolver.ts.
  • Implement the Resolver: Now, implement the ShortProductDescriptionPageMetaResolver as follows

export class ShortProductDescriptionPageMetaResolver extends ProductPageMetaResolver {
    override resolveDescription(): Observable<string> {
        return this.product$.pipe(
            switchMap((product) =>
                this.translation.translate('pageMetaResolver.product.description', {
                    description: product.summary?.substring(0, 160),
                })
            )
        );
    }
}

• Set Up Providers:
  In your seo-demo module, add the provider for ShortProductPageMetaResolver:

providers: [
   {
     provide: PageMetaResolver,
     useExisting: ShortProductDescriptionPageMetaResolver,
     multi: true,
   },
];

This ensures that `PageMetaResolver` uses `ShortProductDescriptionPageMetaResolver` for resolving product page meta data.

• Finally, integrate the seo-demo module into your main AppModule

By creating a custom ProductPageMetaResolver, you make sure your product descriptions follow SEO best practices, which can improve their visibility and click-through rates in search results. This small change can have a big impact on your pages’ performance in search engine rankings.

Next, let’s discuss about another key SEO strategy: adding your brand name to page titles. This helps build your brand identity and boosts SEO by making your pages more recognizable. Here’s how to set up a custom SeoMetaService to automatically add your brand name to every title:

1. Create a Custom SeoMetaService

export class CustomSeoMetaService extends SeoMetaService {
   private brandName: string = 'YourBrandName'; // Replace with your brand name
   protected override set title(title: string | undefined) {
     const fullTitle = `${title} | ${this.brandName}`;
     this.ngTitle.setTitle(fullTitle || '');
   }
}

2. Provide the Custom Service
In your `seo-demo` module, define the provider for ` CustomSeoMetaService `:

providers: [
  CustomSeoMetaService,
  {
     provide: SeoMetaService,
     useExisting: CustomSeoMetaService,
  },
];

By following these steps, you can create a custom SeoMetaService in Spartacus to automatically add your brand name to each page title. Appending your brand name to page titles is a subtle yet powerful way to reinforce your brand identity. It ensures that your brand is always front and center, which can help with brand recall and trust. Additionally, consistent branding in page titles can improve your SEO by making your pages more recognizable and relevant to search engines. This small adjustment can significantly improve your SEO strategy and boost your online brand presence.

Conclusion

Optimizing your SEO with SAP Commerce Cloud’s Composable Storefront is a strategic approach that can yield significant benefits for your business. By leveraging its advanced features, such as mobile-first design, fast loading speeds, SEO-friendly URLs, customizable metadata, structured data markup, and multilingual capabilities – you can create a robust SEO strategy that drives organic traffic and improves your search engine rankings. Implementing best practices and staying updated with SEO trends will ensure that your site remains competitive in the dynamic digital landscape. Embrace the full-potential of SAP Commerce Cloud and elevate your SEO efforts to the next level.

 References

Search Engine Optimization | SAP Help Portal
https://developers.google.com/search/docs/fundamentals/seo-starter-guide
https://www.searchenginejournal.com/on-page-seo/