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.

🎉 All attributes are optional and can take values coming from a server as inputs.

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.

License

MIT