Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firebase hosting SEO for SPA's

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.

like image 856
Dan Kanze Avatar asked Sep 02 '14 17:09

Dan Kanze


2 Answers

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).

like image 83
jwngr Avatar answered Oct 11 '22 16:10

jwngr


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

like image 30
Dustin Avatar answered Oct 11 '22 15:10

Dustin