Name: Supporting Search Engine Optimization in Composable Storefront of SAP Commerce Cloud
Uploaded: 2024-6-18
Duration: 439 s
Description: In this video, you will learn about the main features of Search Engine Optimization in Composable Storefront of SAP Commerce Cloud.

Share feedback

<p>Planned maintenance of Practice Systems</p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Subscribe now

Learn more

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div><div><div><div>In this video, you will learn about the main features of Search Engine Optimization in Composable Storefront of SAP Commerce Cloud.</div></div></div></div></div></div>

Supporting Search Engine Optimization in Composable Storefront of SAP Commerce Cloud

Hello everyone. This video is about Search  Engine Optimization (known as SEO) Features  in Composable Storefront.  Composable storefront being a single page  application (known as SPA)  supports search indexing,  leveraging the Server Side Rendering  (known as SSR) capabilities.  SPA generally contains an empty shell page  where content also known as DOM  are dynamically generated at runtime thereby  having no content to index or share in HTML.  Composable storefront addresses these  challenges using SSR, where complete pages  are rendered on server thereby enabling web  crawlers to index complete pages.  For SSR capabilities, there are certain  configurations and coding guidelines that are  to be strictly adhered to, which are available  in the documentation.  Enabling SSR also improves the first  time-to-view performance where the page  is rendered from server when the customer  visits the site for the first time, post which  the dynamic calls take over.  There is an introduction micro learning video  about SSR and how to configure the same  which can be referred for gaining more insights  about the same.   Any website has the following SEO  requirements from the application  it is built out of:  Indexable, shareable, bookmarkable pages  with better performance.  Ability to control the stateful URL, page title,  description and other meta tags per page type.  Ability to control bot visits to the pages using  robot meta directives like FOLLOW,  NOFOLLOW, INDEX, NOINDEX.  Supporting history API of modern-day browsers  to traverse back and forth  of user’s browser history.  Composable Storefront supports all the  mentioned SEO requirements by default.  Now let us take a look at some of the key SEO  features of Composable Storefront.  First among the SEO features are its ability  to provide Stateful and configurable URLs.  Composable storefront provides a URL  with a stateful address for  every piece of the storefront.  This makes it easier for users to navigate  the storefront and allows web crawlers to index  each and every page.  It provides ability to configure site context  as you can see in this URL.  Similarly, it provides the ability to configure  content driven URLs as well as can be see  in this example of login page.  Business users will be able to control the URLs  of content page from backend SAP  Commerce Cloud Smart edit or backoffice.  They can use the non-localizable “pageLabel”  attribute of any content page  to manage the same.  URLs are also configurable for non-content  pages like product and category pages where  the application enables to configure product  attributes that needs to be part of product  details page or product listing page URLs.  For an example, this is the default configuration  of a product details page URL where URL is  /product/productCode where the product code  is 1234 in this case.  Additional product attributes like category  or page title can be added to this URL as well.   URLs are controlled through Angular and  Composable Storefront  routing and page guards.   Now let us take a look at SEO page attributes  that are supported by Composable Storefront.  Composable Storefront supports page title,  description, page headings, image data,  robot tags and canonical URLs.  All these functionalities are  provided through resolvers.  Default configuration is included with  Composable Storefront that can be modified  based on specific SEO requirements.  As mentioned previously, the meta data  resolution happens via resolvers  for each of the page types.  Here is the list of resolver interfaces that are  available by default that allows for easy  implementation and extensibility.  These interfaces are implemented by different  page types like product page, category page,  content page, search page etc., using their  corresponding resolvers.   This is the 2211.19 source code  of Composable Storefront.  Here, in PageResolver, we can see the resolver  interfaces for various SEO meta tags that can  be extended and adapted.   These interfaces are then implemented  by different page types as can be seen  in this case of ProductPageMetaResolver.  This resolver applies only to product details  page and we can see almost all meta tag  interfaces implemented as part of this resolver.  We can see the corresponding logic for  resolving page title, description etc.,  for product details page in this resolver.   Similarly, we can see each of the page types  like category page, search page etc.,  having their own resolvers to implement  the SEO meta tags specific to those pages  as can be seen here.   Having seen about the meta tags supported  by Composable storefront, let us wrap this video  with a quick demo of customizing the page title  of content pages.  By default as can be seen  from the source code,  ContentPageMetaResolver provides the page  title for content pages where it retrieves the  “title” attribute value of the content page from  backend SAP Commerce Cloud.   Let us take an example of  default “Contact Us” page.  Default title is fetched from  SAP Commerce Cloud.   We will override this behaviour to resolve  the title to a hardcoded value using  a custom content page resolver in this demo.   We are using the demo store built out  of 2211.19 Composable storefront version  for this demo.  We have already created a “DemoSeoModule”  and have added it to  “SpartacusFeaturesModule”.  We have also created a new class named  “DemoContentPageMetaResolver” where we  will be customizing the page title extending  the default ContentPageMetaResolver.  We will override the “resolveTitle” function using  the following pre-written code snippet where  we hardcode the page title of any content page  to be “Composable Storefront SEO Title Demo”.   Post adding this snippet, we should be adding  the custom resolver to “PageMetaResolver”  class so that it can be injected as part  of the dependency injection  of “PageMetaResolver”.   We are adding it using Provider configuration  in DemoSeoModule as can be seen here.   Now, on refreshing the storefront page,  we can see the page title changed to  the hardcoded value of “Composable  Storefront SEO Title Demo”.   This is one of the basic examples of  customizing SEO meta tags  based on business requirements.   Similar approach can be adopted for other meta  tags customization as well.  This is all we have to cover for “SEO Features”.  There is detailed documentation on this topic  in the SAP help portal.  Do take a look and happy learning!