https://github.com/avraammavridis/angular-metatags

Module for providing dynamic Meta Tags to Angular routes
https://github.com/avraammavridis/angular-metatags

angular angular-metatags meta-tags seo

Last synced: 18 days ago
JSON representation

Module for providing dynamic Meta Tags to Angular routes

• Host: GitHub
• URL: https://github.com/avraammavridis/angular-metatags
• Owner: AvraamMavridis
• Created: 2015-02-22T10:14:03.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-08-06T14:26:23.000Z (over 6 years ago)
• Last Synced: 2024-10-11T06:29:48.483Z (about 1 month ago)
• Topics: angular, angular-metatags, meta-tags, seo
• Language: JavaScript
• Size: 97.7 KB
• Stars: 63
• Watchers: 5
• Forks: 29
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **Angular MetaTags module**

Module to dynamically provide metatags based on the path. After this [PR](https://github.com/AvraamMavridis/angular-metatags/pull/5) it supports both ngRoute and ui-router (only simple states).

## **How to use it**

#### Include `angular-metatags.js` or `angular-metatags.min.js` to your html file before your app script and after the angular's core script

```html

```

#### Include the module in your app

```js

var myApp = angular.module('myApp', ['ngRoute','metatags']);

```

#### Inject the MetaTagsProvider in the config and define your meta tags

```js

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. 

###### Example

If we define a route like this

```js

.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:

```js

$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

```js

myApp.run(function(MetaTags){

    MetaTags.initialize();

});

```

#### Include the metatags in your html

You can use the metatags in our html like this:

```html

  {{ metatags.title }}

  

  

  

  

   

   

   

   

  

  

  

```

## Angular and SEO

Until the search engine bots will be able to execute javascript properly you will have to use a tool like [prerender.io](https://prerender.io/) or [brombone](http://www.brombone.com/) 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](https://weluse.de/blog/angularjs-seo-finally-a-piece-of-cake.html)

-[Builtvisible.com - The Basics of JavaScript Framework SEO in AngularJS](http://builtvisible.com/javascript-framework-seo/)

-[Yearofmoo.com - AngularJS and SEO](http://www.yearofmoo.com/2012/11/angularjs-and-seo.html)