NgSimpleSeo 
A very light weight seo mechanism that adds all the necessary meta tags to your Angular Application
Summary
- Get more visitors from Google and Bing.
- Attract more visitors from social media.
- Increase your readers’ engagement.
- Change the title of each page dynamically.
Installation
npm i ng-simple-seo
Usage
First add NgSimpleSeoModule to Imports array of your app module.
import { NgSimpleSeoModule } from 'ng-simple-seo';
@NgModule({
imports: [
...,
NgSimpleSeoModule,
...
]
})Then just add <ng-simple-seo></ng-simple-seo>
with one or more attributes in your template.
Real world example:
<ng-simple-seo
[title] = "'The Blog | ' + data.post.title"
[keywords] = "'tech blog, web app, angular app'"
[description] = "'A Blog about technology'"
[twitterTitle] = "'The Blog'"
[twitterDescription] = "'Blog Site'"
[ogType] = "'website'"
><ng-simple-seo>
<!-- app.component.html -->
🔥 Page Title
By set the [title] attribute, you can change the title of each page dynamically.
See example bellow:
<ng-simple-seo [title]="'Dynamic Title'"></ng-simple-seo>
will generate this:
🥤 Αvailable attributes
| Name | Description |
|---|---|
| title | Current page title |
| keywords | Current page keywords |
| description | Description of your application |
| twitterTitle | Title of content |
| twitterDescription | Description of content (maximum 200 characters) |
| twitterImage | Current page thumbnail image URL for Twitter |
| twitterSite | Either your twitter:site or twitter:site:id |
| twitterCreator | Your twitter username |
| ogTitle | Current page title for Facebook |
| ogType | Current page type for Facebook |
| ogDescription | Current page description for Facebook |
| ogImage | Current page thumbnail image URL for Facebook |
| ogUrl | Current page URL for Facebook |
Lib Dependencies
"peerDependencies": {
"@angular/common": "^9.1.12",
"@angular/core": "^9.1.12"
},
"dependencies": {
"tslib": "^1.10.0"
},
🧪 Running unit tests
Run ng test ng-simple-seo to execute the unit tests via Karma.