Documentation
Contentful Spartacus Integration
SEO

Enhancing SEO Performance with Our Library

Boosting your website’s search engine visibility is essential for driving organic traffic and increasing your online presence. With our library’s SEO extension capabilities, you can optimize your site for improved search engine rankings and greater visibility. Let’s delve into how you can leverage these extensions to enhance your SEO performance.

Key Benefits

  • Metadata Optimization: Customize meta titles, descriptions, and custom metaData to enhance click-through rates and improve search engine visibility.
  • Leveraging Contentful: With Contentful, you can seamlessly integrate SEO features directly into your application! = Fully customizable: You can define custom rules for each page and have granular control over your SEO attributes.

How It Works

Our SEO extensions operate seamlessly within your existing website infrastructure, enabling you to implement and manage SEO optimizations effortlessly.

Configuration

To implement our SEO extensions on your website, follow these steps:

  1. Configuration: Setup the SEO extensions directly within your app.
  2. Data Integration with Contentful: Make sure you retrieve the necessary data from Contentful such as title, description and more.

Example Use Case

Firstly, ensure to update the import method for the NcrContentfulModule by specifying the data you intend to convert within the forRoot() function.

app.module.ts
import { NcrContentfulModule, provideConfiguration, withSEO } from '@ncremental/ncr-contentful';
import {PageMetaService} from "@spartacus/core";
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    NcrContentfulModule.forRoot(withSEO(PageMetaService))
]

Develop a metadata service directly within your application:

pdp-metadata.service.ts
@Injectable({providedIn: 'root'})
export class PdpMetadataService implements NcrMetaResolverService {
 
    constructor(
        private productService : ProductService,
    ) {
    }
 
    async resolveMetadata(pageMeta: PageMetaData, route : ActivatedRouteSnapshot): Promise<PageMetaData> {
        const productName = await this.productService.get(
            route.paramMap.get('productCode')!
        ).pipe( filter(Boolean), take(1), map(p => p.name)).toPromise();
        return {
            ...pageMeta,
            title: `Demo | ${productName}`,
        }
    }
}
 

Incorporate it into your existing app routing:

ℹ️

In order for the PdpMetadataService to have access to the routeParam ‘productCode’, you need to provide the regex group name using the configuration below. see \<productCode\> in the configuration below.

app.module.ts
provideConfiguration({
            ...
            routing: {
                pdp: {
                    regex: /.*\/?product\/(?<productCode>[\w-]*)/g,
                    contentfulType: "ncrPagesPdp",
                    filter: (segments) => ({"fields.productCode": segments.slice(1,2)}),
                    metaResolver: PdpMetadataService
                },
            }

Now that the installation is complete, you can utilize the SEO capabilities directly from the service you created. This allows you to access specific information such as product titles when needed. Furthermore, you have the choice to fetch metadata from Contentful. To do so, you’ll need to create an “ncrPageMetaData” and import it into your current page in Contentful.

Ncremental SEO Optimization Contentful

Conclusion

By leveraging our library’s SEO extension capabilities, you can optimize your website for improved search engine visibility, higher rankings, and increased organic traffic. Our SEO extensions provide the tools and resources you need to succeed in today’s competitive online landscape.

Start optimizing your website for SEO success today!