Update meta tags in AngularJS
Dynamically update meta tags and document title 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
- supports schema.org protocol meta elements
- supports link elements
- update your document title dynamically
- update your meta tags depending on the state your application is in
- no additional scripting required, works out-of-the-box!
View example plunk right here.
Usage
First install the module using bower:
$ bower install angular-update-meta
then add the updateMeta
module to the dependencies of your AngularJS application module:
angular;
Suppose you have the following markup in your template:
Website title ...
Now you can use the following markup in your view(s):
And if you want to use Google Structured Data, create an object like this in $scope:
$scopestructuredData = "@context": "http://schema.org" "@type": "Organization" "url": "http://www.example.com" "name": "Unlimited Ball Bearings Corp." "contactPoint": "@type": "ContactPoint" "telephone": "+1-401-555-1212" "contactType": "Customer service" ;
So the head is updated to:
A new title { "@context": "http://schema.org", "@type": "Organization", "url": "http://www.example.com", "name": "Unlimited Ball Bearings Corp.", "contactPoint": { "@type": "ContactPoint", "telephone": "+1-401-555-1212", "contactType": "Customer service" } } ...
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.
You can also update link tags. If you have the following markup in your layout:
and you have the following markup in your view:
then the head will be updated to:
A rel
and a href
attribute must be supplied to the directive. The directive will try querying the DOM using the rel
and href
attributes, and optionally an id
. Any of the supported attributes (id
, charset
, crossorigin
, hreflang
, integrity
, media
, methods
, referrerpolicy
, sizes
, target
, title
, type
) will be updated.
Expressions
Dynamic AngularJS expressions are supported too:
In the example above, the og:title
is automatically updated whenever title
changes.
Prerender.io
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.
Contribute
To update the build in the dist
directory:
$ gulp
To run the unit tests (for both concatenated and minified version):
$ gulp test
Change log
2.1.0
- added support for Google Structured Data (credits to Mostafa Shaheydari)
2.0.1
- fix issue with link #28 (credits to Kohei Hisakuni)
2.0.0
- added support for link elements #18
1.9.0
- added support for itemprop (thank you @urbgimtam)
- added examples for itemprop
1.8.0
- added examples for use with ngRoute and ui-router
v1.7.1
- fixed bower dependencies
v1.7.0
- added update-title directive
- updated documentation
- updated example
v1.6.0
- added dynamic tag support
- updated documentation
- updated example
v1.5.1
- fixed issue with
http-equiv
- updated documentation
- updated example
v1.5.0
- added support for meta
property
elements to support the Open Graph protocol
v1.4.0
- switch to native
element.querySelector()
method to fix #4
v1.3.0
- added double quotes to support #2
v1.2.1
- fix bower ignore files
v1.2.0
- update bower ignore files
v1.1.0
- add travis support
- update documentation
v1.0.0
- refactor to support original markup
- add unit tests
- update documentation
v0.1.0
- Initial version