Skip to content

Home

<ngx-meta/> for Angular

Angular Supports Angular SSR/Universal

NPM Downloads NPM License NPM Version Main CI/CD workflow Codecov GitHub last commit (branch)

Coded in Typescript Git GitHub Package manager: pnpm Unit tests with Jasmine Unit tests ran by Karma E2E tests with Cypress Code coverage with Codecov Linted with ESLint Formatted with Prettier Commits follow Conventional Commits convention Git hooks with Husky GitHub Actions Released with Semantic Release Dependencies updated with Renovate Docs with Material for Mkdocs API Report/Docs with API Extractor Contributor Covenant

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! 🚀

Beta version

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

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) 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 🥳

🗺️ Start exploring

New users

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 ⚡️

Existing users

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:

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