OK, let's implement structured data in our Angular app and  enrich our search results in Google search engine .

What is structured data and what is good for? Well you can find out that on this link.

 

So let's implement this in our Angular application in 3 simple steps

1. install @ngx-lite/json-ld and add it to your app

                    npm install @ngx-lite/json-ld --save

2. add it to your AppModule:

                        

      
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import library module
import { NgxJsonLdModule } from '@ngx-lite/json-ld';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Register module
    NgxJsonLdModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. insert directive to your  AppComponent

                    @Component({
  selector: 'app',
  template: `<ngx-json-ld [json]="schema"></ngx-json-ld>`
})
class AppComponent {
  schema = {
    '@context': 'http://schema.org',
    '@type': 'WebSite',
    'name': 'angular.io',
    'url': 'https://angular.io'
  };
}

 

You can set many different types of  structured data, the list of data supported by Google you can find here

For example if you want set up structured data for article, here is how it should look like for the article you are currently reading:

                    {
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "image": [
    "https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/thumb/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg",
    "https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/normal/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg",
    "https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/big/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg"
  ],
  "url": "https://floyk.com/en/post/structural-data-in-your-angular-app",
  "dateCreated": "2020-09-05",
  "headline": "Structural data in your Angular app",
  "name": "Structural data in your Angular app",
  "description": "OK, let's implement structured data in our Angular app and&nbsp; enrich our search results in Google search engine .What is ...",
  "keywords": "",
  "author": {
    "@type": "Person",
    "name": "Igor Simic",
    "creator": [
      "Igor Simic"
    ]
  }
}

 

 

After you are done, please use Google tool to check your rich results:
https://search.google.com/test/rich-results

 

If everything is fine you should see something like this:

Rich result test&nbsp; for support of structured data
Rich result test&nbsp; for support of structured data