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 if @data() 6 return { 7 keywords: 8 name: 'keywords' 9 itemprop: 'keywords' 10 content: -> 11 @data().getKeywords() 12 } 13 data: -> 14 getKeywords: -> 15 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..'