Skip to content

Open Graph

Open Graph is a protocol developed by Facebook that allows web pages to become rich objects in a social graph. It enables developers to control how their content appears when shared on social media platforms, such as Facebook, Twitter, LinkedIn, and others. Open Graph tags are added to the HTML of a web page as <meta name="og:x"> elements and provide metadata that helps social platforms understand and display the content more effectively.

When a link is shared on social media, Open Graph tags influence the appearance of the link preview or social card. Social cards are the visual representations of links that include a title, description, and image. These cards enhance the user experience by providing a snapshot of the linked content.

This module will help you set those tags to provide metadata to social networks and also customize link previews / social cards

Setup

Depending on what metadata you need to set, add one of more of the Open Graph providers.

Main

Contains the essential to set up Open Graph metadata. They will allow you to set up social cards / link previews for platforms that read Open Graph metadata.

Specifically, manages basic and optional metadata

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 provideNgxMetaOpenGraph() to your standalone app's app.config.ts file providers. Check out get started setup for more details.

app.config.ts
import {provideNgxMetaOpenGraph} from '@davidlj95/ngx-meta/open-graph';

export const appConfig: ApplicationConfig = {
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaOpenGraph(),
    // ...
  ],
}
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 provideNgxMetaOpenGraph() to your module-based app's app.module.ts file. Check out get started setup for more details.

app.module.ts
import {provideNgxMetaOpenGraph} from '@davidlj95/ngx-meta/open-graph';

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaOpenGraph(),
    // ...
  ],
  // ...
})
export class AppModule {}

Metadata

To check all the metadata that can be set with this provider, check out

OpenGraph API Reference

Except if the property indicates otherwise, like profile.

Profile

Manages profile non-vertical metadata. Manages metadata under OpenGraph.profile

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 provideNgxMetaOpenGraphProfile() to your standalone app's app.config.ts file providers. Check out get started setup for more details.

app.config.ts
import {provideNgxMetaOpenGraphProfile} from '@davidlj95/ngx-meta/open-graph';

export const appConfig: ApplicationConfig = {
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaOpenGraphProfile(),
    // ...
  ],
}
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 provideNgxMetaOpenGraphProfile() to your module-based app's app.module.ts file. Check out get started setup for more details.

app.module.ts
import {provideNgxMetaOpenGraphProfile} from '@davidlj95/ngx-meta/open-graph';

@NgModule({
  // ...
  providers: [
    // ...
    provideNgxMetaCore(),
    provideNgxMetaRouting(), // (optional)
    provideNgxMetaOpenGraphProfile(),
    // ...
  ],
  // ...
})
export class AppModule {}

Metadata

To check all the metadata that can be set with this provider, check out

OpenGraphProfile API Reference

Utility type

Following Typescript type will help you provide metadata values:

import { OpenGraphMetadata, OPEN_GRAPH_TYPE_WEBSITE } from '@davidlj95/ngx-meta/open-graph'

const metadata = {
  openGraph: {
    type: OPEN_GRAPH_TYPE_WEBSITE,
    profile: {
      username: 'angular',
    },
  },
} satisfies OpenGraphMetadata

OpenGraphMetadata API Reference

Platforms reading Open Graph metadata

At the moment of writing this document, Open Graph metadata is read by many popular sites to display social cards / link previews:

  • Facebook
  • Facebook Messenger
  • LinkedIn
  • Slack
  • Telegram
  • Twitter (you can set more details using Twitter Cards)
  • WhatsApp

Resources