A seo helper package for meteor.js. Original posted as an article here: manuel-schoebel.com/blog/meteor-and-seo
Database stripped from original version.
This package is on meteorite.
meteor add manuelschoebel:ms-seo
You can set some standard values. This will be set if nothing else is available.
Meteor.startup(function() {
if(Meteor.isClient){
return SEO.config({
title: 'Manuel Schoebel - MVP Development',
meta: {
'description': 'Manuel Schoebel develops Minimal Viable Producs (MVP) for Startups'
},
og: {
'image': 'http://manuel-schoebel.com/images/authors/manuel-schoebel.jpg'
}
});
}
});
As you can see a meta tag in the head area is defined by a key and a value and it works the same way for the Open Graph 'og' tags.
Often times you want to set your SEO data dynamically, for example if you have a blog and you want that the documents title is equal to the blogposts title. You can do this easily in the Iron-Router after hook like this:
Router.map(function() {
return this.route('blogPost', {
path: '/blog/:slug',
waitOn: function() {
return [Meteor.subscribe('postFull', this.params.slug)];
},
data: function() {
var post;
post = Posts.findOne({
slug: this.params.slug
});
return {
post: post
};
},
onAfterAction: function() {
var post;
// The SEO object is only available on the client.
// Return if you define your routes on the server, too.
if (!Meteor.isClient) {
return;
}
post = this.data().post;
SEO.set({
title: post.title,
meta: {
'description': post.description
},
og: {
'title': post.title,
'description': post.description
}
});
}
});
});
You can use the SEO.set(object) method and the object param looks the same as a document of the 'SeoCollection' but has no route_name.
You can configure google authorship easily with
rel_author: 'https://www.google.com/+ManuelSchoebel'
The output in your header will be the rel author link like this:
<link href="https://www.google.com/+ManuelSchoebel" rel="author">
You can use 'rel_author' in the configuration, SeoCollection entries or in SEO.set as well.
##Multiple Meta Tags For example for og:image you might want to have multiple image meta tags for one site. You can do this now by simply setting the og.image value to an array like this:
SEO.set({
...
og: {
'image': ['http://www.your-domain.com/my-image-1.jpg', 'http://www.your-domain.com/my-image-2.jpg']
}
});
// results in:
<meta property="og:image" content="http://www.your-domain.com/my-image-1.jpg">
<meta property="og:image" content="http://www.your-domain.com/my-image-2.jpg">
##Automatically set twitter and og meta tags like Title For a page you normally have exactly one title you want to use for the og:title and twitter:title meta tags. MS-SEO does this automatically for your title, url and descrption. For the description, just set the meta-description tag.
You can also disable this in the settings:
Meteor.startup(function() {
SEO.config({
...
auto: {
twitter: false,
og: true,
set: ['description', 'url', 'title']
}
});
});
In this settings only the og metas are set automatically but not for twitter. The "set" array specifies what should be set. You could put any meta-tag in there and it will automatically be set for og or twitter as well.
If you have different needs regarding meta tags and seo, please add a feature request by adding a new Issue.