Social Share with Meteor

The problem with social sharing on Meteor is that you have to think about client side rendering versus server side rendering content. (Here I am going to use facebook as an exemple.) On this tutorial I will be using only two packages from atmosphere: meteorhacks:ssr and meteorhacks:picker.

The crawlers can’t see anything that is on the client side. All your javascript codes will not be catched by the crawler. I saw a lot of messy exemples using “docHead.addMeta()” and others, but nothing was working for me for that exactly reason. Even with spiderable, phanthom Js… nothing worked properly and no meta tags were seen by facebook crawler (you can test your url with this link: https://developers.facebook.com/tools/debug/ ).

If you are testing your website on “localhost”, the facebook debug will not work. Try using ngrok. Install and use the https version of it. It does work.

The other thing I found out is that you have to write on the “head” tag the following meta: <meta name=”fragment” content=”!”>. This head will be on “lib”, so the client and the server will be able to access that file. This meta is important so the crawler will know that your page have a different type of content render.

Now that you have everything set up, you can begin the actual process of writing the meta tags.

So now you will be creating 5 different files. For the first one, you will create a new html file on the private folder (I will call it layout.html). On this document you will write the html that will be sent to the crawler (we will get to the code latter).

Then you will create a new javascript file on server > seo (I will call it layout.js). This will reference the layout.html file that you just created. This .js file will pass the DOCTYPE tag to the .html file, since Blaze does not allow to render templates with DOCTYPE in it.

Then you are going to create another html file on  the private folder (I will call it event.html). This will be the file that will keep the actual meta tags.

The other file you will have to create will be on server>seo (I will call it event.js). The event.js file was created to dynamically change information inside the meta tags of event.html.

The fifth and last file you will have to create will be a route on the server folder (I will call it serverRoutes.js).  On this page will have the filters that limitate the crawlers that will be able to see our meta tags and also will have the route where the social button will be placed.

Now your tree will be something like this:

• private
  • layout.html
  • event.html
• server
  • seo
    • layout.js
    • event.js
  • serverRoutes.js

On layout.html:

So, as you can see, the doctype will be placed using the layout.js file. The same thing will going to happend with the template and the data that this page will use.

On layout.js:

Here we are giving a name for our layout.html. The name given will be used as a template. So you can create as much helpers as you want with that (you will notice that we are going to use that same structure to users.html).

On event.html:

As you can see, I am using the event object (that will be passed to this template) to dynamically change the information on this template. Also, some of the event fields are not formated as I wanted to, so we create a variable (tha will be refered by the helper of this page) and passed the event fields needed as parameter.

On event.js:

On this page we defined seoEvent as the template name of the event.html file. Alse we define the helpers to dynamically change data.

On serverRoutes.js:

This is the last code you need to place. Firstly you will set up a filter, that will only allow known crawlers to get the meta tag informtion that you wrote on event.html file (you have to look for this information on the developers page of the social share you are interest on). Then, if the filter where called by a crawler that have permition, our code will verify if it is calling by the right route. After all of that, we get right that we are going to use on the templare information using the id from the parameter of the route. So then we are going to render the seoLayout with the right parameter for the dynamic template and the data.

So that is it. You will do the social share buttons by yourself or using a package, then put on the route page and when you click all of this will activate and the variable “html” will be send to the crawler.

One observation that was a doubt of mine at first, and I wanted to point it out is that if you already have a route set up on the client side that does all the rendering of your page, you will not have a problem setting this other route. I belive that because it is a crawler route and it is on the server side only to be rendered by crawlers, that are no mixing ups.

I hope that helped, and if I missed anything or got anything wrong, please let me know on the comments.

References:

• https://forums.meteor.com/t/facebook-share-setup/12980/2
• https://developers.facebook.com/docs/sharing/webmasters#markup 
• https://atmospherejs.com/meteorhacks/ssr
• https://atmospherejs.com/meteorhacks/picker