Meteor SEO ( Iron Router )

If you don’t know SEO (search engine optimization), it’s about good practices, techniques or process to get better organic results in indexing. By organic I mean, not paid, natural.

http://en.wikipedia.org/wiki/Search_engine_optimization

Google offer a good practices guide to improve your indexing results 

http://static.googleusercontent.com/media/www.google.com/en//webmasters/docs/search-engine-optimization-starter-guide.pdf

In this post we’ll talk about four basic points of this guide, titles, meta tags, url structures and anchors.

For Meteor exists a package to help up with this task, manuelschoebel:ms-seo developed by Manuel Schoebel, one of the authors of Meteor in Action book.

So, first at all, you need Iron-Router to set values dynamically for each path of your site.

meteor add iron:router

After that, the SEO package.

meteor add manuelschoebel:ms-seo

Now, let’s configure the default values, this is important to cover every path, even those that don’t match with any route.

[code language=”javascript”]

Meteor.startup(function() {

if(Meteor.isClient){

return SEO.config({

auto: {

twitter: false,

og: false,

set: [‘description’, ‘title’]

},

title: “Allan de Queiroz”,

meta: {

‘description’: “Allan de Queiroz’s Blog”

}

});

}

});

[/code]

Now let’s see the specific configurations, in you controllers.

[code language=”javascript”]

Router.route(‘/post/:_id’,{

name: ‘postItemDetails’,

waitOn: function(){

return Meteor.subscribe(‘singlePost’,this.params._id);

},

data: function(){

return Posts.findOne(this.params._id);

},

onAfterAction: function() {

var post = this.data();

SEO.set({

title: post.title,

meta: {

‘description’: post.summary

}

});

}

});

[/code]

The important thing here is onAfterAction, here is where we define dynamic values.

Doing that you can see the title changing every time you navigate through this route.

Now, title and meta=”description” are both in accordance with the optimization guide.

Now let’s work on URL’s structure. Google’s guide says that, informative URL’s are better for indexing.

For example, this is not a good URL.

So, let’s put a little more information in this URL, beginning by route, that now should expect a text, even that it’s useless for redirecting, makes sense for SEO.

So, let’s change this

[code language=”javascript”]

Router.route(‘/post/:_id’,{

name: ‘postItemDetails’,

[/code]

To that

[code language=”javascript”]

Router.route(‘/post/:_title/:_id’,{

name: ‘postItemDetails’,

[/code]

And change pathFor     

[code language=”html”]

[/code]

Now, our link looks like that

But it’s possible to do better, Google’s guide says that, – (hyphen) is better than (%20). Let’s define a helper to replace spaces by hyphens.

[code language=”javascript”]

formatedTitle:function() {

return this.title.replace(/ /g,”-“);

}

[/code]

Now our link looks like

[code language=”html”]

[/code]

Ok, now informations are separated by hyphens. 

And now, anchors, I believe that this is a easy one, Google’s guide says that to get better results with anchors they need to be informatives and concisely, eg: post title is a good text for anchors.

Look how it’s closely with Google’s example.

Another important thing is the Sitemap that helps indexing, specially with that links hard to find, but let’s talk about that in the next post.

Allan de Queiroz

Allan de Queiroz
London based software engineer

XServer forward from Linux text mode for Headless purposes.

Hello, this post is about XServer forward from Linux text mode, **not ssh forward, anything related to VNC** or things like that.Recently...… Continue reading