Reactive meta tags for meteor within iron-router

Change meta tags on the fly within iron-router. This package can create meta tags, and link tags as well.

Note: this package implies ostrio:iron-router-title package.

Install:

meteor add ostrio:iron-router-meta

Usage:

Set only name and content attributes on meta tag:

1Router.route 'routeName',
2  meta:
3    name: 'content'

Set only rel and href attributes on link tag:

1Router.route 'routeName',
2  link:
3    rel: 'href'

Set multiple attributes on meta tag:

1Router.route 'routeName',
2  meta:
3    uniqueName: 
4      name: 'name'
5      content: 'content'
6      value: 'value'
7      'og:prop': 'value'
8      itemprop: 'value'

Set multiple attributes on link tag:

1Router.route 'routeName',
2  link:
3    uniqueName: 
4      rel: 'name'
5      sizes: 'value'
6      href: 'value'
7      type: 'value'

You can pass functions as value:

1Router.route 'routeName',
2  meta:
3    url:
4      property: 'og:url'
5      itemprop: 'url'
6      content: ->
7        window.location.href
8  link:
9    canonical: ->
10      window.location.href

Set default values in Router.configure()

1Router.configure
2  meta:
3    charset:
4      charset: 'UTF-8'
5    keywords: 
6      name: 'keywords'
7      itemprop: 'keywords'
8      content: 'Awesome, Meteor, based, app'
9    robots: 'index, follow'
10    google: 'notranslate'
11
12  link:
13    canonical: ->
14      window.location.href
15    image:
16      rel: 'image'
17      sizes: '500x500'
18      href: 'http://doma..'
19    publisher: 'http://plus.google...'

Then override default values in each route:

1Router.route 'account',
2  template: 'account'
3  path: '/me/account'
4  title: 'My Account'
5  meta:
6    keywords: 
7      name: 'keywords'
8      itemprop: 'keywords'
9      content: 'User, Account'

Use function context:

1Router.route 'account',
2  template: 'account'
3  path: '/me/account'
4  meta:
5    keywords: 
6      name: 'keywords'
7      itemprop: 'keywords'
8      content: ->
9        this.data().getKeywords()
10  data: ->
11    getKeywords: ->
12      Collection.Posts.findOne('someId').keywords

Sample config

1Router.configure
2  meta:
3    # <meta charset="UTF-8">
4    charset:
5      charset: 'UTF-8'
6
7    # <meta name="keywords" content="Awes..">
8    keywords: 
9      name: 'keywords'
10      itemprop: 'keywords'
11      content: 'Awesome, Meteor, based, app' 
12    
13    # <meta name="description" itemprop="description" property="og:description" content="Default desc..">
14    description:
15      name: 'description'
16      itemprop: 'description'
17      property: 'og:description'
18      content:  'Default description'
19
20    image:
21      name: 'twitter:image'
22      itemprop: 'image'
23      property: 'og:image'
24      content: 'http://doma..'
25
26    'og:type': 'website'
27    'og:title': ->
28      document.title
29    'og:site_name': 'My Awesome Site'
30
31    url:
32      property: 'og:url'
33      itemprop: 'url'
34      content: ->
35        window.location.href
36
37    'twitter:card': 'summary'
38    'twitter:title': ->
39      document.title
40    'twitter:description': 'Default description'
41    'twitter:site': 
42      name: 'twitter:site'
43      value: '@twitterAccountName'
44    'twitter:creator': 
45      name: 'twitter:creator'
46      value: '@twitterAccountName'
47
48    'http-equiv':
49      'http-equiv': 'X-UA-Compatible'
50      content: 'IE=edge,chrome=1'
51
52    robots: 'index, follow'
53    google: 'notranslate'
54  
55
56  link:
57    # <link rel="canonical" href="http://doma..">
58    canonical: ->
59      window.location.href
60
61    # <link rel="image" sizes="500x500" href="http://doma..">
62    image:
63      rel: 'image'
64      sizes: '500x500'
65      href: 'http://doma..'
66
67    publisher: 'http://plus.google...'
68
69    'shortcut icon':
70      rel: 'shortcut icon'
71      type: 'image/x-icon'
72      href: 'http://domai...'
73
74    'icon':
75      rel: 'icon'
76      type: 'image/png'
77      href: 'http://domai...'
78
79    'apple-touch-icon-144':
80      rel: 'apple-touch-icon'
81      sizes: '144x144'
82      href: 'http://doma..'
83    'apple-touch-icon-114':
84      rel: 'apple-touch-icon'
85      sizes: '114x114'
86      href: 'http://doma..'
87    'apple-touch-icon-72':
88      rel: 'apple-touch-icon'
89      sizes: '72x72'
90      href: 'http://doma..'
91    'apple-touch-icon-57':
92      rel: 'apple-touch-icon'
93      sizes: '57x57'
94      href: 'http://doma..'