SEO issue with Facebook/Twitter

[theplatapi]

So SEO was discussed in issue #101 for the Google crawler, but this is concerned with the Facebook and Twitter crawlers. They both do not interpret JavaScript, which makes it impossible to dynamically set open graph tags for different pages. The link here shows what the demo RSB site looks like with the Facebook crawler.

Since Firebase currently lacks support for prerendering content, the pages need to be statically compiled. This means the initial HTML is downloaded and then React rebuilds the DOM for page transitions.

Without precompiling the HTML, every link to my site on Facebook uses the same image instead of ones customized for the content.

[koistya]

@theplatapi good catch! Do you need to pre-render full HTML or just meta tags?

[theplatapi]

I actually made an implementation just rendering HTML files with the meta tags and it works. That saves the hassle of making the app isomorphic. I stored the metadata info into index.md files for each folder and then output HTML files for each folder in the /pages folder. The solution is a bit specific to my needs but the general idea should work for others.

[rossthedevigner]

@theplatapi Would it be possible to share a gist as we am coming upon the same issue. Are you outputting all the HTML or just the meta? I am finding I need the former.

[theplatapi]

@rossthedevigner I am outputting just the meta tags. I basically store my meta information in markdown YAML and make sure each page has a markdown file. Then in run.js I iterate through all of the routes in routes.js, import the markdown files, and output an html file per route.

Last I tried rendering all of the HTML I ran into problems, but with enough persistence it's possible.

[Shyam-Chen]

Prerender.IO?