1.1.5 • Published 3 years ago

ng-simple-seo v1.1.5

Weekly downloads
12
License
MIT
Repository
-
Last release
3 years ago

NgSimpleSeo npm npm bundle size

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:

This is a alt text.

🥤 Αvailable attributes

NameDescription
titleCurrent page title
keywordsCurrent page keywords
descriptionDescription of your application
twitterTitleTitle of content
twitterDescriptionDescription of content (maximum 200 characters)
twitterImageCurrent page thumbnail image URL for Twitter
twitterSiteEither your twitter:site or twitter:site:id
twitterCreatorYour twitter username
ogTitleCurrent page title for Facebook
ogTypeCurrent page type for Facebook
ogDescriptionCurrent page description for Facebook
ogImageCurrent page thumbnail image URL for Facebook
ogUrlCurrent 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