A beginner's guide to SEO with Meteor : Dochead, sitemap & prerender

N.B : This tutorial was written as of june 2016, it might not be as relevant in the future. (Thanks to server-side rendering).

This sums up pretty much everything I wish I knew about SEO with Meteor before starting to build apps with the framework.

Meteor and SEO

The very first thing you need to know is that your app will not be indexed, or very poorly, if you don't use either spiderable or prerender.

The reason behind that, is that google bot and other crawlers are not very good at handling Javascript-heavy Web app.

My advice (and in fact, MDG's stance on SEO as well), is to use prerender.

The objective with prerender is to generate static HTML pages from our javascript App, that will be served to the crawlers (googlebot, bingBot, facebook bot ect..).

In this article, I'll show you how to serve Static HTML pages to the various crawlers, we'll also see how to set the Meta tags and generate a sitemap.

Meta tags with DocHead

First of all, you should add Meta tags for your applications, DocHead by Kadira is a great package for doing so.

Relevant link : A list of everything that could go in the head of your document

Sitemap

In order to generate a sitemap, you can use gadicohen:sitemaps.

Once added and configured, you'll get a sitemap that can be accessed at yourapp/sitemap.xml.

Next thing you want to do is to submit the sitemap to Google webmaster tools

If you can see you URLs in the console, then you're set for the sitemap !

Use Prerender rather than spiderable

Spiderable spawns an instance of phantomJS for every single page of your app, with a lot of pages you'll just end up DDOSing yourself ( see Josh Owens post on meteor forums) whenever google crawler will try to crawl your app to index it !

Furthermore, Spiderable haven't been updated in a long time

Installing Prerender

Here we'll use prerender.io as a back-end for our prerender service, rather than a self-hosted pre-render service : For convenience, and because prerender.io is free for the first 200 pages.

Install prerender :

npm install prerender-node

Somewhere in your server-side code (you should adapt the protocol for your case : HTTP or HTTPS):

Meteor.startup(() => {

    const prerenderio = Npm.require('prerender-node');
    const settings = Meteor.settings.PrerenderIO;

    if (settings && settings.token && settings.host) {
        prerenderio.set('prerenderToken', settings.token);
        prerenderio.set('host', settings.host);
        prerenderio.set('protocol', 'https');
        WebApp.rawConnectHandlers.use(prerenderio);
    }

});

In your settings.json file (You can get your token at prerender.io):

"PrerenderIO": {
    "token": "YOURTOKEN",
    "host": "YOURDOMAIN"
  }

Let's put our pages in prerender.io cache

Next step is to allow prerender.io to generate static HTML pages from our javascript-heavy Meteor app pages.

Let's head to prerender.io and submit our recently generated sitemap

Now, we wait until the pages are fully cached. Time for a coffee I guess

When our pages are cached, we must verify that google crawler bot is able to get the prerendered static HTML pages

Explore our pages as googlebot

Let's head back to Google webmaster tools, in the Exploration tab, you'll see an option named Explore as google

(Yes sorry mine is in french)

You can now submit and crawl one of the pages that was cached with prerender.io, here, I'll try with ayni.in/en/practice-language-online/practice-italian.

Once you've submitted your page, don't forget to hit the Send for indexation button :

Ok, now that it's done, like this :

We head back to prerender.io, to the crawl stats tab :

Right here, you should see that GoogleBot 2.1 just crawled you website, and if the status code is a 'status code:200', then congrats!, Google is now able to crawl and index your app as your content appear as static HTML

PS : If you have troubles setting up the pre-rendering by yourself, I'm available for hire, and it can be done very quickly =)

Next Steps

Privacy Policy