Quite a few options are present by default, but they can be completely overridden if necessary. A complete override can be done by either providing SEO_OPTIONS like so
@NgModule({
providers: [
provide: SEO_OPTIONS,
useValue: {
// here comes the options
}
]
})
export class AppModule {}
Or making use of SeoService::setOptions
.
A more subtle way to go about would be to modify the existing options, for example by making use of immer's produce function:
@Injectable()
export class MySeoInitService {
private seoService = inject(SeoService);
init(): void {
const modifiedOptions = produce(this.seoService.getOptions(), draft => {
// we need to specify the processor for each even if they are linked, as they would be updated with the raw value otherwise
draft.metaDescriptors[MetaIds.TITLE_TAG].preProcessors = Processors.html();
draft.metaDescriptors[MetaIds.OG_TITLE].preProcessors = Processors.html();
draft.metaDescriptors[MetaIds.TWITTER_TITLE].preProcessors = Processors.html();
// we don't set a suffix for other title-like properties so only <title> gets it
draft.metaDescriptors[MetaIds.TITLE_TAG].postProcessors = Processors.withMaxLength(RECOMMENDED_TITLE_LENGTH, ' - MyAppName');
draft.metaDescriptors[MetaIds.CANONICAL_URL_LINK].postProcessors = Processors.url({ forceW3: true });
draft.metaDescriptors[MetaIds.OG_URL].postProcessors = Processors.url({ forceW3: true });
});
this.seoService.setOptions(modifiedOptions);
}
}
You can also make use of our opinionated options, but it is then advised to use them as-is instead od using them as a base to be modified. This would then look like this:
@NgModule({
providers: [
provide: SEO_OPTIONS,
useValue: createOpinionatedOptions({titleSuffix: ' | MyApp'})
]
})
export class AppModule {}
There are most likely a few meta properties that are not meant to change at all and that should be present on all pages. For this, we can augment a bit our init logic seen in the previous section:
@Injectable()
export class MySeoInitService {
private seoService = inject(SeoService);
init(): void {
// ...
this.seoOptions.setMetaValue(MetaIds.OG_TYPE, 'website', { setAsDefault: true });
this.seoOptions.setMetaValue(MetaIds.OG_SITE_NAME, 'My App', { setAsDefault: true });
// no need to set twitter:image as, by default, og:image and twitter:image are linked together
this.seoOptions.setMetaValue(MetaIds.OG_IMAGE, `https://path/to/image.png`, { setAsDefault: true });
this.seoOptions.setMetaValue(MetaIds.TWITTER_CARD, 'summary', { setAsDefault: true });
// etc.
}
}
Run nx test seo
to execute the unit tests.