Firebase – The SEO Tool for Progressive Web Apps

Firebase is the Google platform that allows webmasters to set up and manage indexing and deep linking for their native apps, chat-bots and, now, PWA’s. 

Firebase – the basics.

Firebase’s first product was the Firebase Real-time Database, an API that synchronizes application data across iOS, Android, and Web devices, and stores it on Firebase’s cloud. The product assists software developers in building real-time, collaborative applications.

After the launch of two products: “Firebase Hosting,” and “Firebase Authentication” in 2014, Google acquired Firebase.

In May 2016, at Google I/O, the company’s annual developer conference, Firebase expanded its services to become a unified platform for mobile developers. Firebase now integrates with various other Google services, including Google Cloud PlatformAdMob, and Google Ads to offer broader products and scale for developers. Google Cloud Messaging, the Google service to send push notifications to Android devices, was superseded by a Firebase product, Firebase Cloud Messaging, which added the functionality to deliver push notifications to iOS and Web devices.

Direct communication with a PWA specialist at Google a few years ago revealed that Google didn’t crawl the ServiceWorker itself, but crawled the API to the ServiceWorker. It’s likely that when webmasters register their ServiceWorker with Google, Google is actually creating an API to the ServiceWorker, so that the content can be quickly and easily indexed and cached on Google’s servers.

Since Google has already launched an Indexing API and appears to now favor API’s over traditional crawling, we believe Google will begin pushing the use of ServiceWorkers to improve page speed, since they can be used on non-PWA sites, but this will actually be to help ease the burden on Google to crawl and index the content manually.

Cindy Krum
Click here to head over to the Firebase Console.

Why can’t PWA’s be indexed normally?

JavaScript.

PWA’s rely heavily on dynamically generated front-ends using JavaScript such as React, based on ES6. ES6 has recently become legible to Google alone, no other Search Engine is yet capable of properly crawling JavaScript, and even Googlebot has frequent errors when parsing and trying to trace the routes of JavaScript.

Static content, generated in simple HTML, is what Google originally trained their bots to work with due to its large influence in the 2.0 and 3.0 web. However, in 2019 it’s become apparent that dynamic web apps will quickly begin taking over, and Googlebot has to be able to adjust as a result. These are 10 quick tips for on-page SEO if you’re still running a static site.

In 2011 Search Engines created a universal markup schema which would aid bots in the understanding of static sites: Structured Data Markup. Schema.org helped pave the way for JSON-LD identification which carries over for PWA’s as they are <header> based scripts. Ensure that your PWA includes these for better identification.

Let’s think of what a bot sees when PageSource is called on an HTML based site.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SEOSPIDRE</title>
  </head>
  <body>
    <h1> This is important text!</h1>
  </body>
</html>

All the information is static and legible to bots. By programming them to scan between h1 tags, h2 tags, p tags, and img sources, its very easy to determine what the information means.

However, if we consider a dynamic React based site:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="/overlay.js"></script>
  </body>
</html>

Having only a script running prevents any valuable information being directly displayed to Google. Any other Search Engine will not be able to trace the source and “read” the JavaScript, but Googlebot can to some extent.

Using Firebase for your PWA.

Here are some of the major advantages of Firebase (as stated on the Google Dev site) for your PWA:

  • Firebase Hosting: Free SSL Certification for your custom domain and Firebase subdomain
  • Firebase Hosting: Supports HTTP/2 and can cache static and dynamic content on a global CDN
  • Firebase Authentication: Enables you to sign in users across devices securely
  • Firebase Authentication: Maintain’s user authentication state, even offline
  • FirebaseUI: Implements best practice for authentication flow
  • Firebase JavaScript SDK: Is modular, and you can dynamically import libraries
  • Cloud Firestore: You can store and access data in real time and offline
  • Firebase Cloud Messaging: Enables push notifications
  • Cloud Functions for Firebase: Automate re-engagement messages based on cloud events

Getting started:

Firebase can be added to the following systems:

  • Apps
    • iOS
    • Android
    • Flutter
    • Web
  • Games
    • C++
    • Unity
  • Servers
    • Node.js
    • Java
    • Python
    • Go
    • C#

Step 1: Create a Firebase project

  1. In the Firebase console, click Add project, then select or enter a Project name.If you have an existing Google Cloud Platform (GCP) project, you can select the project from the dropdown menu to add Firebase resources to that project.
  2. (Optional) If you created a new project, you can edit the Project ID. Firebase automatically assigns a unique ID to your Firebase project. Visit Understand Firebase Projects to learn about how Firebase uses the project ID.
  3. Click Continue.
  4. (Optional) Set up Google Analytics for your project, which enables you to have an optimal experience using any of the following Firebase products:
    1. Firebase Crashlytics
    2. Firebase Cloud Messaging
    3. Firebase Remote Config
    4. Firebase Predictions
    5. Firebase In-App Messaging
    6. Firebase A/B Testing
  5. Click Create project (or Add Firebase, if you’re using an existing GCP project).

Firebase automatically provisions resources for your Firebase project. When the process completes, you’ll be taken to the overview page for your Firebase project in the Firebase console

Step 2: Register your web app

After you have a Firebase project, you can add your web app to it.

Visit Understand Firebase Projects to learn more about best practices and considerations for adding apps to a Firebase project.

  1. In the Firebase console’s project overview page, click the Web icon (code) to launch the setup workflow.If you’ve already added an app to your Firebase project, click Add app to display the platform options.
  2. Enter your app’s nickname.The nickname is an internal, convenience identifier and is only visible to you in the Firebase console.
  3. (Optional) Set up Firebase Hosting for your web app.
    • You can set up Firebase Hosting now or later. You can also link your Firebase Web App to a Hosting site at any time in your Project settings.
    • If you choose to set up Hosting up now, select a site from the dropdown list to link to your Firebase Web App.
      • This list displays your project’s default Hosting site and any other sites that you’ve set up in your project.
      • Any site that you’ve already linked to a Firebase Web App is unavailable for additional linking. Each Hosting site can only be linked to a single Firebase Web App.
  4. Click Register app.

Step 3: Add Firebase SDKs and initialise Firebase

You can add any of the supported Firebase products to your app. There are 4 methods to initialising Firebase:

From Hosting URL’s:

1. To include only specific Firebase products (for example, Authentication and Cloud Firestore), add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="/__/firebase/6.4.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/6.4.0/firebase-auth.js"></script>
  <script src="/__/firebase/6.4.0/firebase-firestore.js"></script>
</body>

2. Initialise Firebase in your app (no need to include your Firebase config object when using reserved Hosting URLs):

<body>
  <!-- Previously loaded Firebase SDKs -->

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>
</body>

From the CDN:

1. To include only specific Firebase products (for example, Authentication and Cloud Firestore), add the following scripts to the bottom of your <body> tag, but before you use any Firebase services:

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.4.0/firebase-firestore.js"></script>
</body>

2. Initialize Firebase in your app:

<body>
  <!-- Previously loaded Firebase SDKs -->

  <script>
    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };

    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>
</body>

Using module bundlers:

1a. Install the Firebase JavaScript SDK. If you don’t already have a package.json file, create one by running the following command from the root of your JavaScript project:

$ npm init

1b. Install the firebase npm package and save it to your package.json file by running:

$ npm install --save firebase

2. To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:

// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";

// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";

3. Initialize Firebase in your app:

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Node.js apps:

1a. Install the Firebase JavaScript SDK. If you don’t already have a package.json file, create one by running the following command from the root of your JavaScript project:

$ npm init

1b. Install the firebase npm package and save it to your package.json file by running:

$ npm install --save firebase

2. To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:

Use only one of the following options:

  • You can require modules from any JavaScript file
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
var firebase = require("firebase/app");

// Add the Firebase products that you want to use
require("firebase/auth");
require("firebase/firestore");
  • You can use ES2015 to import modules
// Firebase App (the core Firebase SDK) is always required and
// must be listed before other Firebase SDKs
import * as firebase from "firebase/app";

// Add the Firebase services that you want to use
import "firebase/auth";
import "firebase/firestore";

3. Initialize Firebase in your app:

// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Step 5: Access Firebase in your app

The Firebase JavaScript SDK supports the following Firebase products. Each product is optional and can be accessed from the firebase namespace.

Learn about the available methods in the Firebase JavaScript reference documentation.

Conclusion

Voila! Having Firebase enabled for whatever functionality will enable your PWA to be much better crawled and indexed by Google. As said by Cindy Krum, it appears as if Google creates its own API from the Firebase database into your PWA. This allows it to crawl dynamic pages registered on Firebase far more efficiently and with greater accuracy.

Following the above 5 step process to get your web app onto Google Firebase is a step forward for the forward facing end of your site. Having a complete site isn’t enough, you need to ensure you build some internet presence by adopting best practice!

Paul Shapiro agrees that all SEOs should have a background, or some experience in technical SEO / programming in order to stay competitive in todays changing landscape. These are his top 4 tips.

Leave a Reply