Firebase hosting SEO for SPA's

Question

For single page apps, some advanced rewrite rules need to be implemented in your server conf to proxy web crawlers and social media bots to cached pre-rendered versions of the JavaScript SPA content.

Using a service like http://prerender.io

You will notice the various server configuration rules templated here that demonstrate this proxy: https://prerender.io/getting-started#install-it

Using the https://www.firebase.com/docs/hosting/guide/url-redirects-rewrites.html does Firebase support this level of sophistication?

For example - how would I implement this nginx config using Firebase rewrite-rules:

server {
    listen 80;
    server_name example.com;

    root   /path/to/your/root;
    index  index.html;

    location / {
        try_files $uri @prerender;
    }

    location @prerender {
        #proxy_set_header X-Prerender-Token YOUR_TOKEN;

        set $prerender 0;
        if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~ "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent)") {
          set $prerender 0;
        }

        if ($prerender = 1) {
            rewrite .* /$scheme://example.com$request_uri? break;
            proxy_pass http://service.prerender.io;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

As a side note - I think it's great that you guys have support now for doing things like:

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
}]

But find this really only solving half the battle that SPA's face.

Strictly

Thanks Dan! On a side note, this looks like feedback more appropriate for [email protected] or the mailing list. Is there a specific question here that should be addressed using SO's Q&A format? – Tallula

@Tallula Yea haha, is it possible to implement the proxy rules seen in the sample templates I linked using your rewrite rules engine? I've updated the question to be more clear. – Strictly

Sadly that's a little beyond the reach of the current rewrite rules. I'll have one of our hosting gurus drop in here and verify. – Tallula

@Tallula Thank you. If it's not possible I'm curious of next steps to request as an additional feature - whether it be using more sophisticated rewrite rules or leveraging your own prerender/caching service - this problem is likely holding a lot of folks back from leveraging your hosting platform simply because SEO is still critical to most SPA's. – Strictly

I struggled with this, too, and ultimately had to pass on Firebase's hosting and went with Divshot. They make the Prerender really easy out-of-the-box: docs.divshot.com/services/prerender – Alcatraz

Answer 1

Firebase core developer here

Firebase announced basic SEO support which makes it work with Googlebot at ng-conf 2015 in March. See this presentation around the 16:30 mark for the announcement.

Firebase is still aiming to get working with pre-rendering tools like prerender.io and Brombone at some point as well, to allow even more sophisticated options for SEO. But this should "just work" if you upgrade to the latest version of the Firebase client (2.2.4 at the time of this post).

Triciatrick

Christmas wish - hoping for full support (Non-Google search engines, Facebook OpenGraph tags, Twitter cards, etc) and not just google's search engine. – Desiccant

Hi @jacobawenger is there any update on this? a firbase hosted SPA is not working well with sharing tools like slack or fb. Are there tools or plugins we can add? – Behold

Check out firebase.googleblog.com/2017/06/…. – Triciatrick

Hi, now it's 2018 is there any update on how to hook prerender.io with a vue js app? I'm literally scraping the internet for a solution – Tedmund

@Triciatrick is there any further update on this? Can/Should we use a plugin like prerender.io for Firebase hosted SPA's? – Chryselephantine

Answer 2

As of October 10, 2014, Firebase seems to officially say "no": https://github.com/firebase/firebase-tools/issues/33

An alternative is Divshot hosting. They offer a Prerender solution that's very easy to implement: http://docs.divshot.com/services/prerender

Alcatraz

Does anyone have feedback from Firebase on prerender? – Bitner