@davidlj95/ngx-meta
Version:
Set your Angular site's metadata: standard meta tags, Open Graph, Twitter Cards, JSON-LD structured data and more. Supports SSR (and Angular Universal). Use a service. Use routes' data. Set it up in a flash! 🚀
77 lines (55 loc) • 8.47 kB
Markdown
[](https://angular.dev/)
[][SSR]
[](https://www.npmjs.com/package/@davidlj95/ngx-meta)
[](https://github.com/davidlj95/ngx/blob/main/projects/ngx-meta/src/LICENSE)
[](https://www.npmjs.com/package/@davidlj95/ngx-meta)
[](https://github.com/davidlj95/ngx/actions/workflows/cicd.yml)
[](https://codecov.io/gh/davidlj95/ngx)
[](https://github.com/davidlj95/ngx/commits/main/)
[](https://www.typescriptlang.org)
[](https://git-scm.com/)
[](https://github.com/)
[](https://pnpm.io/)
[](https://jasmine.github.io)
[](https://karma-runner.github.io)
[](https://www.cypress.io)
[](https://codecov.io)
[](https://eslint.org)
[](https://prettier.io)
[](https://conventionalcommits.org)
[](https://typicode.github.io/husky/)
[](https://github.com/features/actions)
[](https://github.com/semantic-release/semantic-release)
[](https://renovatebot.com)
[](https://squidfunk.github.io/mkdocs-material/)
[](https://api-extractor.com/)
[](https://github.com/davidlj95/ngx/blob/main/CODE_OF_CONDUCT.md)
Set your Angular site's metadata: standard meta tags, Open Graph,
Twitter Cards, JSON-LD structured data and more.
Supports SSR (and Angular Universal).
Use a service. Use routes' data.
Set it up in a flash! 🚀
## Motivation
You have a nice Angular-powered website. You want to improve its SEO and decide to add some metadata in your pages. You also enable [Server Side Rendering (SSR)][SSR] so when search engines visit your site, metadata elements are already in the HTML returned by the server. You start adding nice `<meta name="description">` to describe your home page. Then Open Graph metadata like `<meta property="og:title">` [to customize social cards / link previews](https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website/). You use [Angular's `Meta` APIs][Angular Meta APIs] to insert those in your DOM. All good so far 😊
Now, you want to set metadata for another page of your site 🤔
Calls to [Angular `Meta` APIs][Angular Meta APIs] start appearing in many places around. Object literals specifying `<meta>` definitions breed like rabbits 🐇 You also have to ensure when changing pages that metadata from a page doesn't stay there when visiting another. It's all starting to be a bit tedious 😅
If only there was a way to easily specify metadata I want for each page in a declarative fashion and forget about it 🙏 You're in the right place then 🎉 This library will definitely help you 🥳
[SSR]: https://angular.dev/guide/ssr
[Angular Meta APIs]: https://angular.dev/api/platform-browser/Meta
## 🗺️ Start exploring
### New users
First, welcome 🥰
Wondering why this library and not another one? Take a look at [why section](https://ngx-meta.dev/why/). Probably, the most interesting parts are [**features**](https://ngx-meta.dev/why/features/) and [**comparison**](https://ngx-meta.dev/why/comparison/) pages.
For the hands-on devs ([_this is the way_](https://knowyourmeme.com/memes/this-is-the-way)), [**get started now** ⚡️](https://ngx-meta.dev/get-started/)
### Existing users
Take a look at guides to refresh your knowledge. Like the one about setting metadata programmatically [**using the service**](https://ngx-meta.dev/guides/set-metadata-using-service/), in a declarative fashion [**using route's data**](https://ngx-meta.dev/guides/set-metadata-using-routing/). Or how [**metadata values JSON**](https://ngx-meta.dev/guides/metadata-values-json/) is shaped.
Go deeper by:
- [**Setting default metadata**](https://ngx-meta.dev/guides/defaults/) values for all pages
- [**Setting up URL resolution**](https://ngx-meta.dev/guides/url-resolution/) to use relative URLs but get absolute URLs as metadata values
- [**Formatting page titles**](https://ngx-meta.dev/guides/title-formatting/) to apply a consistent format to all page titles
- [**Loading metadata later**](https://ngx-meta.dev/guides/late-loading-modules/) to reduce main bundle size
- [**Providing your custom metadata managers**](https://ngx-meta.dev/guides/manage-your-custom-metadata/)
- [**Fine-grained choosing metadata elements**](https://ngx-meta.dev/guides/custom-metadata-providers-selection/) you're interested in. Rest of them won't end up in your bundle
Are you by any chance looking for the [**API reference**](https://ngx-meta.dev/api/ngx-meta/)?
If you see some deprecations and want to fix them, take a look at the **migrations** section in the [docs site](https://ngx-meta.dev)