Module to dynamically provide metatags based on the path.
####Include angular-metatags.js or angular-metatags.min.js to your html file before your app script and after the angular's core script
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="scripts/angular-metatags.js"></script>
<script src="scripts/mainApp.js"></script>####Include the module in your app
var myApp = angular.module('myApp', ['ngRoute','metatags']);####Inject the MetaTagsProvider in the config and define your meta tags
myApp.config(['$routeProvider','MetaTagsProvider', function($routeProvider, MetaTagsProvider) {
...
...
MetaTagsProvider
.when('/', {
title: 'Great',
description: 'Cool'
fb_title: 'My title'
fb_site_name: 'My site name'
fb_url: 'www.blablabla.blabla'
fb_description: 'Cool website'
fb_type: 'Facebook type'
fb_image: 'an_image.jpg'
})
.when('/page1/:parameter1/:parameter2',{
title: 'Page 1 :something',
description: function(parameter1, parameter2){
return 'COOOOOOOL' + parameter1 + " Super " + parameter2;
}
robots: 'index, follow'
keywords: 'some cool keywords'
})
.when('/page2/:parameter1',{
title: 'Page 2 of :parameter1',
description: 'Another great page'
})
.otherwise({
title: 'otherwise',
description: 'Another great page'
})
}]);when Accepts a string with the path and an object with metatags when(path,metatags) The path can contain parameters, each parameter should start with : . Each attribute of the metatags object can be a string or a function that returns a string. The string can contain a parameter that will be replaced. If the path contain parameters and an attribute of the metatags object is a function the parameters are passed to that function.
If we define a route like this
.when('/page1/:parameter1/:parameter2',{
title: 'Books of :parameter1 by :parameter2',
description: function(parameter1, parameter2){
return 'We have great books of ' + parameter1.toUpperCase() + ' by the amazing :parameter2';
},
robots: 'index, follow',
keywords: function(parameter1){
var keywords = ['history', 'art', 'music']
keywords.push(parameter1);
return keywords.join(' ');
}
})and we visit the path /page1/geography/nationalgeographic We will have the following object of metatags:
$rootScope.metatags = {
title: "Books of geography by nationalgeographic",
description: "We have great books of GEOGRAPHY by the amazing nationalgeographic",
robots: "index, follow",
keywords: "history art music geography"
}####Initialize the provider on your application run
myApp.run(function(MetaTags){
MetaTags.initialize();
});####Include the metatags in your html
You can use the metatags in our html like this:
<title>{{ meta.title }}</title>
<meta name="description" content="{{ meta.description }}" >
<meta name="robots" content="{{ meta.robots }}" >
<meta name="keywords" content="{{ meta.keywords }}" >
<!-- Facebook related metatags -->
<meta property="fb:app_id" content="{{ meta.fb_app_id }}" >
<meta property="og:url" content="{{ meta.fb_url }}" >
<meta property="og:title" content="{{ meta.fb_title }}" >
<meta property="og:image" content="{{ meta.fb_image }}" >
<meta property="og:description" content="{{ meta.fb_description }}" >
<meta property="og:site_name" content="{{ meta.fb_site_name }}" >
<meta property="og:type" content="{{ meta.fb_type }}" >Until the search engine bots will be able to execute javascript properly you will have to use a tool like prerender.io or brombone to serve prerendered pages when a bot visit your site. You can read more for the topic on the following articles:
-Weluse.de - Angular & SEO finally a piece of cake
-Builtvisible.com - The Basics of JavaScript Framework SEO in AngularJS