# cky-meta

> # cky-meta Update HTML meta tags for title, description and others automatically based on the route in your Angular2 app.

Latest version **1.0.2** (published 2016-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install cky-meta
pnpm add cky-meta
yarn add cky-meta
bun add cky-meta
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2016-12-30 |
| First published | 2016-12-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 (+18 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | cky |
| Maintainers | kevinyang |

## Links

- npm: https://www.npmjs.com/package/cky-meta
- Repository: https://github.com/chgc/cky-meta
- Homepage: https://github.com/chgc/cky-meta#readme
- Issues: https://github.com/chgc/cky-meta/issues
- npm.io page: https://npm.io/package/cky-meta

## Dependencies (8)

- [rxjs](https://npm.io/package/rxjs.md) ^5.0.1
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.7.2
- [ts-helpers](https://npm.io/package/ts-helpers.md) ^1.1.1
- [@angular/core](https://npm.io/package/@angular/core.md) ^2.3.1
- [@angular/common](https://npm.io/package/@angular/common.md) ^2.3.1
- [@angular/router](https://npm.io/package/@angular/router.md) ^3.3.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^2.3.1

## Recent versions

- 1.0.2 (latest) — 2016-12-30
- 1.0.1 — 2016-12-29

## README

# 這專案的目的主要是用來學習怎麼封裝一個ngModule，可透過npm安裝到其他專案上.

# cky-meta
Update HTML meta tags for title, description and others automatically based on the route in your Angular2 app.

This is an Angular2 SEO/meta tags module. For the Angular 1.x module, check out ngMeta

Getting started

Install

To install this library, run:

```
$ npm install cky-meta --save
```

cky-meta works with angular2 ^2.3.1 and @angular/router 3.3.1 or higher. 可以跑AOT模式

# Modify routes

Add meta tags to routes. By default, title and description values are duplicated for og:title and og:description, so there's no need to add them separately.

```typescript
const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }
  }
];
```

# Import MetaModule

```typescript
...
import { MetaModule } from 'cky-meta';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    MetaModule.forRoot()
  ],
  bootstrap: [AppComponent]
})
```

# Update AppComponent

```typescript
import { MetaService } from 'cky-meta';

@Component({
  ...
})
export class AppComponent {
  constructor(private metaService: MetaService) {}
}
```

You're all set! cky-meta will update the meta tags whenever the route changes.

# Options

Set defaults

Set default values for tags. These values are used when routes without meta: {} information are encountered.

```typescript
import { MetaConfig, MetaService } from 'cky-meta';

const metaConfig: MetaConfig = {
  //Append a title suffix such as a site name to all titles
  //Defaults to false
  useTitleSuffix: true,
  defaults: {
    title: 'Default title for pages without meta in their route',
    titleSuffix: ' | Site Name',
    'og:image': 'http://example.com/default-image.png',
    'any other': 'arbitrary tag can be used'
  }
};

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...,
    MetaModule.forRoot(metaConfig)
  ],
  bootstrap: [AppComponent]
})
```

# Change meta tags programmatically

```typescript
import { Component, OnInit } from '@angular/core';

class ProductComponent implements OnInit {
  ...
  constructor(private metaService: MetaService) {}

  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    this.metaService.setTitle('Product page for '+this.product.name);
    this.metaService.setTag('og:image',this.product.imageURL);
  }
}
```

Define fallback meta content in HTML

While Google executes Javascript and extracts meta tags set by cky-meta, many bots (like Facebook and Twitter) do not execute Javascript. Consider defining fallback meta tags in your HTML for such bots. The fallback content is overridden by ng2-meta in Javascript-enabled environments.

<html>
  <head>
    <meta name="title" content="Website Name">
    <meta name="og:title" content="Website Name">
    <meta name="description" content="General description of your site">
    <meta name="og:description" content="General description of your site">
    <meta name="og:image" content="http://example.com/fallback-image.png">
  </head>
</html>

### 這專案是參考ng2-meta寫的
https://github.com/vinaygopinath/ng2-meta

---
_Source: https://npm.io/package/cky-meta · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._