Server Side rendering for SEO improvement

help
1

Hello nice people,

I am currently trying to improve my website’s SEO ranking.
I am using meteor with react and mongodb with flow-router.

What am i trying to achieve?
I am trying to dynamically change the title and keywords tag
<meta name="title" content="Meteor Rocks"/> <meta name="keywords" content="meteor, react, mongodb">

I tried to use react-helmet, which seems to change the virtual-dom title but the main source (view-source) remains the same.

Is there some way to achieve this ?

Any help or suggestion is much appreciated.

2

You could try using prerender. Pretty easy to set up, all you need is the main prerender package and prerender-node. I’m not at my computer now but I could give you a basic config in the morning!

2 Likes
3

This is on my production server, but here’s a basic setup with prerender and prerender-node.

/server/main.js

// PRERENDER
import prerender from 'prerender-node';
import redis from 'redis';

Meteor.startup(() => {

    const client = redis.createClient();

    // Prerender
    prerender.set( 'host', '<hostname here>' ); // eg: example.com
    prerender.set( 'prerenderServiceUrl', 'http://localhost:3000' ); // Prerender port (I set Meteor to 3030)
    prerender.set( 'protocol', 'https' ); // I use HTTPS
    prerender.set( 'forwardHeaders', true);
    prerender.set('beforeRender', function(req, done) {
	    client.get(req.url, done);
    }).set('afterRender', function(err, req, prerender_res) {
	    client.set(req.url, prerender_res.body)
    });
    prerender.set( 'afterRender', function afterRender( error ) {
	    if ( error ) {
            console.log( 'prerenderio error', error );
	        return;
        }
    });
    WebApp.connectHandlers.use( prerender );

});

Notice I’m using Redis here too. This caches the prerendered pages but this is optional.

The prerender setup is pretty simple (note that prerender is its own process, not part of meteor):

const prerender = require('prerender');
const server = prerender({
        pageDoneCheckInterval: 1000
});
server.use( prerender.removeScriptTags() );
server.start();

Hope this helps. This is a pretty basic setup but should give you prerendered pages for SEO etc.

2 Likes
4

Do we really need to use this library now that we’ve SSR in meteor? why not just use server render api?

1 Like
5

I could be wrong, but isn’t that package for actual SSR rather than delivering a static HTML file for bots / crawlers? Personally, I don’t want SSR because of the CPU overhead.

6

It seems that prerender is a middleware that query a third party server, get back and HTML and then return it to the client.

I’ve no experience using it, but it might be an overkill here. If you just want to change the keyword tags, appendToHead in the sink object can be used. The react helmet does it after the page has been loaded.

1 Like
7

Prerender can be self-hosted. I self-host it: https://github.com/prerender/prerender

But yes it’s just a middleware that saves your rendered HTML for crawlers + bots. Your app will work as normal for anyone else though.

It’s entirely down to preference I suppose. I want the client to do all the work and not the server :slight_smile:

1 Like
8

Ah! I didn’t know it’s open source and can be self hosted.

So essentially you’re running a microservice that render client pages and cache the generated html content, the cached content will then get delivered to the bot/crawlers when they hit the page,

9

Yep exactly! It works really well too.

Currently prerender uses 0% cpu and 40mb of memory on my test server (a $5/pm digitalocean droplet) and that’s with a slightly more complicated config to the one I shared above.

If SSR is proving problematic or intensive, prerender is a good way to offload the app onto your client while maintaining good SEO and crawlability :+1:

2 Likes
10

Yes, that’s what I’m thinking, good approach thanks for sharing.

1 Like
11

You could try using react-document-meta which will get you what you need as far as meta for each page.

If you’re in the need for a new project, try my scaffolding tool: maka-cli and just run:

$ maka create brochure-app --ssr=true
12

Meteor 1.6 has server render feature and it works pretty well.
I created a demo site at http://meteor-ssr-loadable.minhnguyen.me
The source code is available at https://github.com/minhna/meteor-react-ssr

1 Like
13

Zero direct experience here, but I would think that prerender would deliver a faster page load to the bot, as well - since Google & friends now consider load time strongly in page rankings, this would seem to be another benefit vs. SSR.

2 Likes
14

Hey , i was trying to use as suggested in the code example but failed and i would really appreciate if you could give me some pointers.

at first i tried with redis and it complained , ( i think the redis server should be installed seperately)

second i removed the redis part and added the following:

app.use(require('prerender-node').set('beforeRender', function(req, done) {
	// do whatever you need to do
	done();
}));

but when i built it and try to deploy in production mode using mup deploy, the verfication stage fails.

Now i am stuck and looking for some working examples. Can you please help or suggest.

Thanks !