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! 🚀
[!NOTE] Current version is a beta. APIs are now very stable and very open for feedback. Version 1.0.0 will be published after it has been in the wild for a while
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) 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. You use Angular's 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 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 🥳
First, welcome 🥰
Wondering why this library and not another one? Take a look at why section. Probably most interesting parts are features and comparison pages.
For the hands-on devs (this is the way), get started now ⚡️
Take a look at guides to refresh your knowledge. Like the one about setting metadata programmatically using the service, in a declarative fashion using route's data. Or how metadata values JSON is shaped.
Go deeper by:
- Setting default metadata values for all pages
- Setting up URL resolution to use relative URLs but get absolute URLs as metadata values
- Loading metadata later to reduce main bundle size
- Providing your custom metadata managers
- Fine-grained choosing metadata elements you're interested in. Rest of them won't end up in your bundle
Are you by any chance looking for the API reference?
If you see some deprecations and want to fix them, take a look at the migrations section in the docs site