Open Graph meta tags in Meteor using server-render

An easy way to dynamically add meta tags for nicely shareable links

If you came to this page you most likely develop using Meteor and were wondering how to make links to your app look nice when shared on Facebook and other places on the web.

In this article, I’ll share a very simple way to achieve that using server-render package.

Open Graph

Open Graph is a protocol to turn your web page into a rich object on the Internet. It allows social networks, messengers and alike to understand the content you are providing. In it’s most ubiquitous use case you see it every day with fancy cards created for the links you share on the web.

To turn your page into an Open Graph object you simply add special meta tags markup to your web page source, like that:

Simple static implementation

If you only need to have your meta displayed for the whole site and always be the same, then the simplest way to do this in Meteor is just to add these tags directly to your /client/main.html.

But if you want your meta to change depending on the URL it was accessed with, then things get trickier.

Dynamically adding meta tags

One point worth noting right away — you have to generate your meta tags server-side. Crawlers and scrapers just don’t execute your JS code and hence everything you generate past initial HTML response is useless.

Server-side rendering is a complex topic on its own, but luckily for us, we don’t really need to render the actual content and dealing with handling it over to the client-side renderer. The only thing needed is to dynamically add a bunch of tags to the head part of your initial HTML response.

Implementation

Let’s imagine that we want to add Open Graph meta support for our sample Todos app. We want our lists to be shown with a nice picture, a list title and a count of incomplete tasks. This could be very useful when sending a link to a colleague over a messenger.

To implement our server-side ‘rendering’ of meta tags we are going to use server-render package.

meteor add server-render

And add the following code on the server:

The magic happens inside of onPageLoad callback handler provided to us by server-renderpackage. On the server it has requestproperty which we can use to derive path requested and determine what meta we need to add. We fetch whatever data we need and simply append our generated tags using sink.appendToHead.

A few thing to note here:

• Meta is generated at the time of an HTTP request, which means that client-side it stays the same for all routes.
• This code is only useful on the server, so place it there.
• You might need to bump your meteor version in order to use server-render package.

That’s it! Next time somebody shares a link to a list in our app web scraper will get meta in the response. You can test how a scraper sees your page using Facebook Object Debugger. And we haven’t used any rendering engines or third-party libs at all (except server-render). This approach is very generic.

Further reading

If you want to dig deeper into server-side rendering and optimizing your app for social sharing or web search I recommend these readings:

• Server-side rendering (SSR) in Meteor by Julian Ćwirko
• Reusable SEO with React Helmet by Meteor Chef

Thanks for reading! I’m using Meteor to build sharedtrip.to, and the preview you see below is a result of the approach I shared in this article :)

Sharedtrip