ngMeta
Dynamic meta tags in your AngularJS single page application
- Demo
- Install
- Getting Started
- Defaults
- Dynamic meta tags
- Support For Other Crawlers
- Debugging
- Websites using ngMeta
- Further reading
- Licence
Demo
vinaygopinath.github.io/ngMeta
Install
via NPM:
shell
npm install ng-meta --save
via Bower:
shell
bower install ngMeta --save
or download the file from dist.
Getting started
Add
ngMeta
as a dependency of your module. ngMeta supports ui-router and ngRoute.js angular.module('YourApp',['ngMeta']);
Add
meta
objects to your routes (ngRoute) or states (ui-router) and specify the meta tags appropriate to each view. Other thantitle
andtitleSuffix
, which are reserved properties that affect the title of the page, the tag properties can be named as per your choice. ```js .config(function ($routeProvider, ngMetaProvider) {$routeProvider .when('/home', { templateUrl: 'home-template.html', meta: { 'title': 'Home page', 'description': 'This is the description shown in Google search results' } }) .when('/login', { templateUrl: 'login-template.html', meta: { 'title': 'Login page', 'titleSuffix': ' | Login to YourSiteName', 'description': 'Login to the site' } }); ... }); ```
[Optional] Set the default values of meta tags during Angular's configuration phase. If the
meta
object of a route does not contain a specific tag, the default value is used instead. ```javascript //Add a suffix to all page titles ngMetaProvider.useTitleSuffix(true);// On /home, the title would change to // 'Home Page | Best Website on the Internet!' ngMetaProvider.setDefaultTitleSuffix(' | Best Website on the Internet!');
//Set defaults for arbitrary tags // Default author name ngMetaProvider.setDefaultTag('author', 'John Smith'); ```
Let
ngMeta
initialize by calling theinit()
function in the app.jsrun
blockjs angular.module('YourApp', ['ngRoute', 'ngMeta']) .config(function($routeProvider, ngMetaProvider) { .... }) .run(['ngMeta', function(ngMeta) { ngMeta.init(); }]);
Set the meta tags in your HTML file ```html <!-- OR {{ngMeta.title}} -->
<!-- Arbitrary tags --> <!-- OR --> ```
Defaults
Change app-wide behaviour and set default values to tags using these methods of ngMetaProvider
. These defaults can be overridden by defining equivalent properties in the route/state meta
object
| Method | Default | Example |
| ------ | ------- | ------- |
| useTitleSuffix(boolean)Toggles the use of a title suffix. When enabled, the title suffix of the route (if available) or the default title suffix is appended to the title of all pages. | false
| ngMetaProvider.useTitleSuffix(true); |
| setDefaultTitle(String)Sets the default title for all routes. This serves as a fallback for routes that don't have a title
property. Use this to customize titles for a few specific routes, letting other routes use the default title. | undefined
| ngMetaProvider.setDefaultTitle('Spotify');ngMetaProvider.setDefaultTitle('Generic Title'); |
| setDefaultTitleSuffix(String)Sets the default title suffix for all routes. This serves as a fallback for routes that don't have a titleSuffix
property. The default title suffix is relevant only when useTitleSuffix
is set to true. | undefined
| ngMetaProvider.setDefaultTitleSuffix(' - Site Name');ngMetaProvider.setDefaultTitleSuffix(' - YourSite'); |
| setDefaultTag(String, String)Sets the default value of any arbitrary tag. This serves as a fallback for routes that don't have a particular tag. | N/A | ngMetaProvider.setDefaultTag('author', 'John Smith');ngMetaProvider.setDefaultTag('ogImgUrl', 'http://example.com/img.png'); |
Dynamic meta tags
To change meta tags dynamically (when an item in a list is clicked, for example), inject the ngMeta
service into your controller and use one of the following methods:
Note: Please use setTitle
to modify the title and/or titleSuffix and setTag
for all other tags.
| Method | Description | Example |
| ------ | ------- | ------- |
| setTitle(String title, String titleSuffix) | Sets the current title based on the given params. When useTitleSuffix
is enabled and titleSuffix is not provided, it uses the default titleSuffix. | ngMeta.setTitle('Title', ' - TitleSuffix')ngMeta.setTitle('Title with default titleSuffix')ngMeta.setTitle('Title with no titleSuffix','') |
| setTag(String tagName, String value) | Sets the value of an arbitrary tag, using the default value of the tag when the second param is missing. The value is accessible as {{ngMeta.tagName}} from HTML. Calling setTag with title
or titleSuffix
as tagName
results in an error. Title must be modified using setTitle
instead.|ngMeta.setTag('author', 'John Smith')ngMeta.setTag('ogImage', 'http://url.com/image.png')|
Support For Other Crawlers
While Google is capable of rendering Angular sites, other search engines (?) and crawler bots used by social media platforms do not execute Javascript. This affects the site snippets generated by sites like Facebook and Twitter. They may show a snippet like this one:
You can use prerendering services to avoid this issue altogether, or update the server config to generate and serve a simplified page with just the open graph meta data needed for the bots to create snippets. Michael Bromley's article, Enable Rich Sharing In Your AngularJS App has more information on how to do that.
TL;DR: ngMeta helps the Google crawler render your Angular site and read the meta tags. For other sites like Facebook/Twitter that can't render Javascript, you need to use pre-renderers or server redirects.
Debugging
ng-inspector Chrome extension shows the tags set by ngMeta when a state/route is open
Facebook's Open Graph Object Debugger shows detailed information about your site's meta tags as well as a preview of the snippet shown when your site is shared.
Websites using ngMeta
- acloud.guru - AWS certification online learning platform
To list your website here, please make a PR and add your URL in this section of README.md in this format
"Site URL - Short description"
Further reading
- AngularJS & SEO - finally a piece of cake
- Fetch as Google - Google Webmaster Tools
- Deprecating our AJAX crawling scheme - Google Webmaster Blog
- Open Graph protocol
MIT Licence
Vinay Gopinath