@ripp/SEO - Programmatic SEO Made Simple

Purpose

SEO is hard. Solve most of your SEO woes with a drop-in and go solution.

@ripp/SEO seeks to provide common mappings of social media, search-engine, and other meta tags with the ability to drive them a simple context object.

For example, providing a context of:

const newContext = { title: "Page Title", description: "It's a pretty neat page" };

Will produce:

<title>Page Title</title>
<meta property="og:title" content="Page Title">
<meta property="twitter:title" content="Page Title">
<meta name="description" content="It's a pretty neat page">
<meta property="og:description" content="It's a pretty neat page">
<meta property="twitter:description" content="It's a pretty neat page">
<meta name="robots" content="index, follow">          <!-- default -->
<link rel="canonical" href="http://localhost:4200/">  <!-- defaults to current URL on call to update -->
<meta property="og:url" content="http://localhost:4200/">
<meta property="twitter:url" content="http://localhost:4200/">

Get Started

npm i -S @ripp/seo

import { SeoManager } from '@ripp/seo';

const seoManager = new SeoManager();

const newContext = { title: "Page Title" };

seoManager.update(newContext);

ng add @ripp/seo

import { SeoModule } from '@ripp/seo/ng';

...
@NgModule({
  ...
  imports: [
    ...
    SeoModule,
  ],
  ...
})
export class AppModule { }

import { SeoService } from '@ripp/seo/ng';

...
  constructor(private seoService: SeoService) {}

  onAction() {
    const newContext = { title: "Page Title" };
    this.seoService.update(context);
  }
...

Sandbox

Experiment with a Live-editor Sandbox to see what tags and values will be produced.