{"id":13481676,"url":"https://github.com/vinaygopinath/ng2-meta","last_synced_at":"2025-10-30T16:24:41.322Z","repository":{"id":9955693,"uuid":"63908690","full_name":"vinaygopinath/ng2-meta","owner":"vinaygopinath","description":"Dynamic meta tags and SEO in Angular2","archived":false,"fork":false,"pushed_at":"2018-07-03T16:19:38.000Z","size":87,"stargazers_count":200,"open_issues_count":15,"forks_count":44,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-13T21:57:40.567Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vinaygopinath.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-21T23:25:33.000Z","updated_at":"2024-03-23T16:29:35.000Z","dependencies_parsed_at":"2022-08-28T06:33:52.967Z","dependency_job_id":null,"html_url":"https://github.com/vinaygopinath/ng2-meta","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygopinath%2Fng2-meta","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygopinath%2Fng2-meta/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygopinath%2Fng2-meta/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vinaygopinath%2Fng2-meta/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vinaygopinath","download_url":"https://codeload.github.com/vinaygopinath/ng2-meta/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245844890,"owners_count":20681795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:54.084Z","updated_at":"2025-10-30T16:24:36.266Z","avatar_url":"https://github.com/vinaygopinath.png","language":"TypeScript","funding_links":[],"categories":["Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","Uncategorized"],"sub_categories":["Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Uncategorized"],"readme":"# ng2-meta\n\n[![Join the chat at https://gitter.im/ng2-meta/Lobby](https://badges.gitter.im/ng2-meta/Lobby.svg)](https://gitter.im/ng2-meta/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nUpdate HTML meta tags for title, description and others automatically based on the route in your Angular app.\n\nng2-meta v5.0.0+ requires **Angular 6**.\nOn **Angular 5** or lower, use ng2-meta v4.0.0 (`npm install ng2-meta@4.0.0`)\n\nFor the AngularJS (1.x) module, check out [ngMeta](https://github.com/vinaygopinath/ngMeta)\n\n## Getting started\n\n### Install\nTo install this library, run:\n\n```bash\n$ npm install ng2-meta --save\n```\n\n### Modify routes\n\nAdd meta tags and `MetaGuard` 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.\n\u003cpre\u003e\n\u003ccode\u003e\n\u003cstrong\u003eimport { MetaGuard } from 'ng2-meta';\u003c/strong\u003e\n\nconst routes: Routes = [\n  {\n    path: 'home',\n    component: HomeComponent,\n    \u003cstrong\u003ecanActivate: [MetaGuard],\n    data: {\n      meta: {\n        title: 'Home page',\n        description: 'Description of the home page'\n      }\n    }\u003c/strong\u003e\n  },\n  {\n    path: 'dashboard',\n    component: DashboardComponent,\n    \u003cstrong\u003ecanActivate: [MetaGuard],\n    data: {\n      meta: {\n        title: 'Dashboard',\n        description: 'Description of the dashboard page',\n        'og:image': 'http://example.com/dashboard-image.png'\n      }\n    }\u003c/strong\u003e\n  }\n];\n\u003c/code\u003e\n\u003c/pre\u003e\n\n### Import MetaModule\n\n\u003cpre\u003e\n\u003ccode\u003e\n...\n\u003cstrong\u003eimport { MetaModule } from 'ng2-meta';\u003c/strong\u003e\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ...\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    RouterModule.forRoot(routes),\n    \u003cstrong\u003eMetaModule.forRoot()\u003c/strong\u003e\n  ],\n  bootstrap: [AppComponent]\n})\n\u003c/code\u003e\n\u003c/pre\u003e\n\n### Update AppComponent\n\n\u003cpre\u003e\n\u003ccode\u003e\n\u003cstrong\u003eimport { MetaService } from 'ng2-meta';\u003c/strong\u003e\n\n@Component({\n  ...\n})\nexport class AppComponent {\n  constructor(\u003cstrong\u003eprivate metaService: MetaService\u003c/strong\u003e) {}\n}\n\u003c/code\u003e\n\u003c/pre\u003e\n\nYou're all set! ng2-meta will update the meta tags whenever the route changes.\n\n## Options\n\n### Set defaults\n\nSet default values for tags. These values are used when routes without `meta: {}` information are encountered.\n```typescript\nimport { MetaConfig, MetaService } from 'ng2-meta';\n\nconst metaConfig: MetaConfig = {\n  //Append a title suffix such as a site name to all titles\n  //Defaults to false\n  useTitleSuffix: true,\n  defaults: {\n    title: 'Default title for pages without meta in their route',\n    titleSuffix: ' | Site Name',\n    'og:image': 'http://example.com/default-image.png',\n    'any other': 'arbitrary tag can be used'\n  }\n};\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    ...\n  ],\n  imports: [\n    ...,\n    MetaModule.forRoot(metaConfig)\n  ],\n  bootstrap: [AppComponent]\n})\n\n```\n\n### Change meta tags programmatically\n```typescript\nimport { Component, OnInit } from '@angular/core';\n\nclass ProductComponent implements OnInit {\n  ...\n  constructor(private metaService: MetaService) {}\n\n  ngOnInit() {\n    this.product = //HTTP GET for product in catalogue\n    this.metaService.setTitle('Product page for '+this.product.name);\n    this.metaService.setTag('og:image',this.product.imageURL);\n  }\n}\n```\n\n### Define fallback meta content in HTML\nWhile Google executes Javascript and extracts meta tags set by ng2-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.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta name=\"title\" content=\"Website Name\"\u003e\n    \u003cmeta name=\"og:title\" content=\"Website Name\"\u003e\n    \u003cmeta name=\"description\" content=\"General description of your site\"\u003e\n    \u003cmeta name=\"og:description\" content=\"General description of your site\"\u003e\n    \u003cmeta name=\"og:image\" content=\"http://example.com/fallback-image.png\"\u003e\n  \u003c/head\u003e\n\u003c/html\u003e\n```\n\n## Contribute\n\nIf you wish to contribute to this repo, please check out the [open issues](https://github.com/vinaygopinath/ng2-meta/issues).\n\nIf you notice a bug that has not already been reported or would like to make a feature request, please create a [new issue](https://github.com/vinaygopinath/ng2-meta/issues/new). This helps to start a discussion with the community and avoid duplication of effort before you make any changes.\n\n## Licence\n\nMIT © [Vinay Gopinath](http://vinaygopinath.me)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaygopinath%2Fng2-meta","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvinaygopinath%2Fng2-meta","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvinaygopinath%2Fng2-meta/lists"}