@avivharuzi/ngx-seo
    TypeScript icon, indicating that this package has built-in type declarations

    13.0.1 • Public • Published

    ngx-seo

    Update SEO title and meta tags easily in Angular apps.

    I created this library because other libraries are not fit enough to my requirements.

    npm NPM npm bundle size

    Environment Support

    • Angular 6+
    • Server-side Rendering

    Compatibility

    Versions compatibility list:

    @avivharuzi/ngx-seo Angular
    13.x.x 13.x.x
    12.x.x 12.x.x
    11.x.x 11.x.x
    10.x.x 10.x.x
    1.x.x 6.xx - 9.x.x

    Installation

    npm i @avivharuzi/ngx-seo

    OR

    yarn install @avivharuzi/ngx-seo

    Usage

    Import NgxSeoModule

    Import NgxSeoModule into AppModule imports.

    import { NgxSeoModule } from '@avivharuzi/ngx-seo';
    
    imports: [
      // ...
      NgxSeoModule.forRoot(),
    ],

    Update Title and Meta Tags from Routes Data

    Declare SEO data for each route recommended to use NgxSeo interface to prevent problems.

    ...
    import { NgxSeo } from '@avivharuzi/ngx-seo';
    
    ...
    
    const SEO_HOME: NgxSeo = {
      title: 'home page',
      meta: {
        description: 'home page description',
      },
    };
    
    const SEO_ABOUT: NgxSeo = {
      title: 'about page',
      meta: {
        description: 'about page description',
      },
    };
    
    const routes: Routes = [
      { path: '', component: HomeComponent, data: { seo: SEO_HOME } },
      { path: 'about', component: AboutComponent, data: { seo: SEO_ABOUT } },
    ];

    You can also specify custom meta tags by providing array of MetaDefinition.

    const SEO_SPECIAL: NgxSeo = {
      meta: {
        customTags: {
          mySpecial: {
            name: 'mySpecial',
            content: 'mySpecial content :P',
          },
        },
      },
    };
    
    const routes: Routes = [
      { path: 'special', component: SpecialComponent, data: { seo: SEO_SPECIAL } },
    ];

    Update Title and Meta Tags Dynamically

    You can also to use the service NgxSeoService to dynamically update title or meta tags.

    ...
    export class MoiveDetailComponent implements OnInit {
      movie: Movie;
    
      constructor(
        private movieService: MovieService,
        private ngxSeoService: NgxSeoService,
      ) {}
    
      ngOnInit(): void {
        this.movieService.getDetails(1).subscribe(movie => {
          this.movie = movie;
    
          this.ngxSeoService.setSeo({
            title: movie.title,
            meta: {
              description: movie.description,
            },
          });
        });
      }
    }

    API

    NgxSeoModule

    NgxSeoModule.forRoot(config: NgxSeoConfig)

    ...
    NgxSeoModule.forRoot({
      changeTitle: (title) => title,
      preserve: false,
      listenToRouteEvents: true,
    })
    ...

    NgxSeoService

    NgxSeoService.setSeo(seo: NgxSeo): void

    Update SEO title and meta tags.

    NgxSeoService.setTitle(title: string): void

    Update SEO title.

    NgxSeoService.setMeta(meta: NgxSeoMeta): void

    Update SEO meta tags.

    NgxSeoService.setMetaKeywords(metaKeywords: string | string[]): void

    Update meta tag keywords.

    NgxSeoService.setMetaDescription(metaDescription: string): void

    Update meta tag description.

    NgxSeoService.setMetaType(metaType: string): void

    Update meta tag type.

    NgxSeoService.setMetaCard(metaCard: string): void

    Update meta tag card.

    NgxSeoService.setMetaImage(metaImage: string): void

    Update meta tag image.

    NgxSeoService.setMetaUrl(metaUrl: string): void

    Update meta tag url.

    NgxSeoService.setMetaAuthor(metaAuthor: string): void

    Update meta tag author.

    NgxSeoService.setMetaSiteName(metaSiteName: string): void

    Update meta tag site name.

    NgxSeoService.setMetaCanonical(metaCanonical: string): void

    Update meta tag canonical.

    NgxSeoService.setMetaCustomTags(customTags: MetaDefinition[]): void

    Update custom meta tags.

    NgxSeoService.removeMeta(): void

    Will remove all meta tags from HTML document.

    License

    MIT

    Install

    npm i @avivharuzi/ngx-seo

    DownloadsWeekly Downloads

    5

    Version

    13.0.1

    License

    MIT

    Unpacked Size

    100 kB

    Total Files

    23

    Last publish

    Collaborators

    • avivharuzi