Skip to content

JSON-LD

JSON-LD, which stands for JSON Linked Data, is a lightweight data interchange format designed to be easy for humans to read and write, and easy for machines to parse and generate. It is a way to structure data in a format that is both human-readable and machine-readable. JSON-LD is particularly used for embedding structured data on the web, providing a standardized method for expressing linked data.

Structured data refers to a way of organizing and presenting data on the web to make it more understandable for search engines. This organization helps search engines better understand the content of a page and can enhance the display of search results with rich snippets. For instance, check Google's docs about structured data markup in Google Search

JSON-LD is used in the context of structured data on the web by allowing website owners and developers to embed structured data directly into their HTML documents. This structured data is often in the form of schema.org vocabulary, which provides a set of schemas (types, properties, and relationships) to describe various entities on the web, such as articles, events, products, and more.

The module allows you to embed a JSON-LD object inside a <script> tag (with proper JSON-LD types set) under the <head> of the page. It does no validation or whatsoever about the JSON-LD object set.

Setup

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

app.config.ts
import {provideNgxMetaJsonLd} from '@davidlj95/ngx-meta/json-ld';

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

app.module.ts
import {provideNgxMetaJsonLd} from '@davidlj95/ngx-meta/json-ld';

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

Utility type

Following Typescript type will help you provide metadata values:

import { JsonLdMetadata } from '@davidlj95/ngx-meta/json-ld'

const metadata = {
  jsonLd: {
    '@context': 'https://schema.org/',
    '@type': 'Recipe',
    name: 'Party Coffee Cake',
    author: {
      '@type': 'Person',
      name: 'Mary Stone',
    },
    datePublished: '2018-03-10',
    description: 'This coffee cake is awesome and perfect for parties.',
    prepTime: 'PT20M',
  },
} satisfies JsonLdMetadata

JsonLdMetadata API Reference

Resources