Twitter Cards
Twitter Cards are a way to attach rich media experiences to tweets. Similar to Open Graph, Twitter Cards provide a way for website owners to control how their content appears when shared on the Twitter platform. Twitter Cards enhance link previews by adding additional information and media elements to tweets.
Compatibility with Open Graph
Some Twitter Cards tags fallback to Open Graph equivalent properties if they can't be found. So if you just want to set those properties, maybe you don't need to add Twitter Cards metadata at all. However, to set some Twitter Cards specific metadata that doesn't have an Open Graph fallback like the author's Twitter username, you'll need Twitter Cards metadata.
Setup
Depending on what metadata you need to set, add one of more of the Twitter Card modules / providers.
Main
To set the Twitter Card type or the basic summary or summary large cards, you can use the main Twitter Cards module
Standalone, module-free apps
This is the default approach for authoring Angular projects generated with Angular CLI v17 and above. It's also the recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration
Add provideNgxMetaTwitterCard()
to your standalone app's app.config.ts
file providers. Check out get started setup for more details.
import {provideNgxMetaTwitterCard} from '@davidlj95/ngx-meta/twitter-card';
export const appConfig: ApplicationConfig = {
// ...
providers: [
// ...
provideNgxMetaCore(),
provideNgxMetaRouting(),
provideNgxMetaTwitterCard(),
// ...
],
}
Non-standalone, module-based apps
This is the default and traditional approach for authoring Angular projects generated with Angular CLI before v17. It's not the preferred or recommended way to author Angular projects right now. Using standalone APIs is the preferred and recommended way to do so. You can use standalone APIs too despite the application is still module-based. Learn more about standalone at standalone components guide and standalone migration. You can anyway keep using the module-based equivalent APIs for now if you prefer to do so.
Add NgxMetaTwitterCardModule
to your module-based app's app.module.ts
file. Check out get started setup for more details.
import {NgxMetaTwitterCardModule} from '@davidlj95/ngx-meta/twitter-card';
@NgModule({
// ...
imports: [
// ...
NgxMetaCoreModule.forRoot(),
NgxMetaRoutingModule.forRoot(),
NgxMetaTwitterCardModule,
// ...
],
// ...
})
export class AppModule {}
Type
Following Typescript type provides you with all implemented metadata you can set:
import { TwitterCardMetadata } from '@davidlj95/ngx-meta/twitter-card'
TwitterCardMetadata
API Reference