Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@avivharuzi/ngx-seo
Advanced tools
Readme
Update SEO title and meta tags easily in Angular apps.
I created this library because other libraries are not fit enough to my requirements.
Versions compatibility list:
@avivharuzi/ngx-seo | Angular |
---|---|
16.x.x | 16.x.x |
15.x.x | 15.x.x |
14.x.x | 14.x.x |
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 |
npm i @avivharuzi/ngx-seo
OR
yarn install @avivharuzi/ngx-seo
Import NgxSeoModule
into AppModule
imports.
import { NgxSeoModule } from '@avivharuzi/ngx-seo';
imports: [
// ...
NgxSeoModule.forRoot(),
],
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 } },
];
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,
},
});
});
}
}
...
NgxSeoModule.forRoot({
changeTitle: (title) => title,
preserve: false,
listenToRouteEvents: true,
})
...
Update SEO title and meta tags.
Update SEO title.
Update SEO meta tags.
Update meta tag keywords.
Update meta tag description.
Update meta tag type.
Update meta tag card.
Update meta tag image.
Update meta tag url.
Update meta tag author.
Update meta tag site name.
Update meta tag canonical.
Update custom meta tags.
Will remove all meta tags from HTML document.
FAQs
Update SEO title and meta tags easily in Angular apps
The npm package @avivharuzi/ngx-seo receives a total of 49 weekly downloads. As such, @avivharuzi/ngx-seo popularity was classified as not popular.
We found that @avivharuzi/ngx-seo demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.