Dynamically update meta tags for SEO purposes in your AngularJS application.
- lightweight (< 1KB)
- uses original meta syntax
- supports prerender.io for SEO purposes
- supports Open Graph protocol meta elements
- update your meta tags depending on the state your application is in
- no additional scripting required, works out-of-the-box!
First install the module using bower:
$ bower install angular-update-metathen add the updateMeta module to the dependencies of your AngularJS application module:
angular.module('yourApp', ['updateMeta']);Suppose you have the following markup in your template:
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="description" content="Application wide description" />
<meta property="og:title" content="The Rock" />
</head>
<body>
...
</body>
</html>Now you can use the following markup in your view(s):
<update-meta charset="ISO-8859-1"></update-meta>
<update-meta http-equiv="Content-Language" content="es"></update-meta>
<update-meta name="description" content="A page specific description"></update-meta>
<update-meta property="og:title" content="Minions"></update-meta>So the head is updated to:
<html>
<head>
<meta charset="ISO-8859-1" />
<meta http-equiv="Content-Language" content="es" />
<meta name="description" content="A page specific description" />
<meta property="og:title" content="Minions" />
</head>
<body>
...
</body>
</html>Only existing meta elements are updated.
If the meta element does not exist yet, it is NOT added, so make sure they exist in your original head element.
Whenever an update-meta element is processed, the original meta in the head is updated with the new value.
This allows you to dynamically set the meta element values with values from within your markup and child states.
Prerender.io will grab the updated values and store them in your page snapshots so they are optimized for SEO purposes.
This allows you to conveniently update the meta elements for each individual page in your AngularJS single page application and store them correctly in your Prerender page snapshots.
You can preview the prerender output by using the _escaped_fragment_= parameter as described in the prerender.io documentation.
To update the build in the dist directory:
$ gulpTo run the unit tests (for both concatenated and minified version):
$ gulp test- fixed issue with
http-equiv - updated documentation
- updated example
- added support for meta
propertyelements to support the Open Graph protocol
- switch to native
element.querySelector()method to fix #4
- added double quotes to support #2
- fix bower ignore files
- update bower ignore files
- add travis support
- update documentation
- refactor to support original markup
- add unit tests
- update documentation
- Initial version