Meteor and SEO
A frequently asked question about Meteor is: "Can Meteor be used for SEO?" My answer to this is: "Yes, absolutely!" In this article I want to show you how I do it.
###It is not about SEO but about on-page SEO
To be more precise the question is how can I deal with on-page SEO in Meteor and that is just one part of SEO. If google visits your site it scans the html document your server presents to it and tries to understand what your document is about. If a user then searches on google for a certain keyword, google may think “This document I saw the other day, I think this would answer the users request the best, so I show this one to him first.” The thing with Meteor is, that it is a client-heavy web application that sends basically no html to the user but a lot of javascript and data. The html is then rendered on the client depending on the data the client has got. If google no visits your Meteor site it sees basically the following:
<body></body>And that’s about it, google sees nothing and thinks “What a crappy document I will never ever show this to anybody!” This is really bad for your site because no one will ever read your interesting stuff. Luckily there is a solution to this problem.
Tell google "I am a web app"
Google itself knows that there are really good websites that are like Meteor client-heavy applications that render the html not on the server but on the client and offers you a way to tell it exactly that:<meta name="fragment" content="!">This meta tag tells google to request your site with special query-string instead of the normal url:
// Normal url
http://www.your-domain.com/a/site
// Special url
http://www.your-domain.com/a/site?_escaped_fragment_Now your Meteor app has a way to notice if google is coming to crawl your website and Meteor can respond to it properly.
###The Spiderable Package Meteor introduced the Spiderable package that does exactly what I wrote before and more. It sets the meta tag for us and it does something special if google crawls your website. It uses phantom.js to run the site of your Meteor app on the server. This way Meteor lets your app render the html completely and then it sends this document with the whole html to the client which is in this special case the google crawler. Now google sees the content of your document and is happy to show it to search requests if it fits.
###But how do I set titles and meta tags? A really important, maybe the most important part of on-page SEO is to set a proper title for each site/document/url. There are more things you want to set depending on the site that is requested like the meta-description or open-graph meta tags and so on. For this Meteor offers us no solution but luckily there is the really impressive Meteor community and Chris Mather developed the defacto standard router package for Meteor. This package is so reliable and well designed, that Meteor decided not to create its own router. The Iron-Router is the router for Meteor, so make it the first thing you add if you create a new Meteor app. With the Iron-Router you can now change all you need depending on the route/document/site/url.
###Great, but how can it be easy and comfortable? The Iron-Router has a great functionality which is called ‘before-hooks’. That means we can create functions that are called before special routes or even before any route and this is exactly what we want to use. I wrote a package you could use that automatically sets the title, metas and so on. It depends on the Iron-Router and all you have to do is store your SEO-Settings in the seo collection in your mongo database. If the current route of the Iron-Router changes the package automatically subscribes to the seo data of the route-name and when the data is available it sets all header data. You only need to add the seo data in the following schema:
SeoCollection.insert({
"route_name" : "home", // the name of the Iron-Router route
"title" : "Title of your home site",
"meta" : [
{"description": "This is the description of the document"},
// add more meta tags
],
"og" : [
{ "image": "http://your-domain.com/images/image.jpg" },
// add more open graph tags
]
})The package supports also easy dynamically SEO configurations and google rel-author settings. The package is activly maintained, it is possible that it is capable of even more right now.
###Installation
The package is on athmosphere so you can easily install it with:
meteor add manuelschoebel:ms-seo
If you found issues or need some more features check it out on github.
###Conclusion
It is possible to use Meteor and get ranked on google and if you use the mechanisms of Meteor correctly, it is really easy and comfortable.