Firebase

How to configure Firebase Hosting with SEO-friendly URLs?

Unlock the secrets to SEO-friendly URLs on Firebase Hosting. A simple, step-by-step guide to help your site shine in search results. Enhance your website visibility effortlessly.

Developer profile skeleton
a developer thinking

Overview

Firebase Hosting is a go-to tool for developers looking to host their web apps quickly and securely. While it's great for both static and dynamic content, making sure your URLs are SEO-friendly can be a bit tricky; it demands attention to many tiny details. Things like proper URL structure, the right meta tags, and using server-side rendering can make a big difference. This guide aims to make the whole process easier. You'll learn how to tweak your Firebase.json file and functions index.js setup. Plus, it will highlight why having search engine friendly URLs matters for boosting your site's visibility and attracting more traffic.

Get a Free No-Code Consultation
Meet with Will, CEO at Bootstrapped to get a Free No-Code Consultation
Book a Call
Will Hawkins
CEO at Bootstrapped

How to configure Firebase Hosting with SEO-friendly URLs?

Required Preparations

First things first, make sure you've got the Firebase CLI (Command Line Interface) installed. Also, you should have a Firebase project set up with Firebase Hosting enabled.

Step 1: Install Firebase Functions and Express

Firebase Functions are great for server-side rendering, and you'll need the Express library to set up your Firebase functions to respond with SEO-friendly URLs.

npm install firebase-functions@latest express --save

Step 2: Initialize your Functions

Run this command to get Firebase Functions going with Javascript:

firebase init functions

Step 3: Start with a Basic Express App

Head over to your functions folder, where you'll find the index.js file. Import Express like this:

const functions = require('firebase-functions');
const express = require('express');
const app = express();

Next, set up a simple function to respond at the root of your URL.

app.get('/', (req, res) => {
  res.send('Hello from Firebase!');
});

Finally, export your app as a function that responds to HTTP requests:

exports.app = functions.https.onRequest(app);

Step 4: SEO-friendly routes

To create SEO-friendly URLs, define a clean URL structure for each page of your site using Express routes.

app.get('/user/:id', (req, res) => {
  res.send(`This is the page of user with id ${req.params.id}`);
});

The :id is a URL parameter that you can access within your function through req.params.

Step 5: Connect Firebase Hosting with your Function

Add a rewrite in your firebase.json file to link your Express app with your website's URL.

{
  ...
  "hosting": {
    ...
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ]
  }
}

Step 6: Deploy

Now it's time to deploy your Firebase Function and Hosting files. During the deploy process, Firebase will connect your function with your hosting setup.

firebase deploy --only functions,hosting

After deployment, your SEO-friendly URLs are live. Google can now crawl your pages through those clean URLs, giving you a stronger SEO presence.

Explore more Firebase tutorials

Complete Guide to Firebase: Tutorials, Tips, and Best Practices

Explore our Firebase tutorials directory - an essential resource for learning how to create, deploy and manage robust server-side applications with ease and efficiency.

Why are companies choosing Bootstrapped?

40-60%

Faster with no-code

Nocode tools allow us to develop and deploy your new application 40-60% faster than regular app development methods.

90 days

From idea to MVP

Save time, money, and energy with an optimized hiring process. Access a pool of experts who are sourced, vetted, and matched to meet your precise requirements.

1 283 apps

built by our developers

With the Bootstrapped platform, managing projects and developers has never been easier.

hero graphic

Our capabilities

Bootstrapped offers a comprehensive suite of capabilities tailored for startups. Our expertise spans web and mobile app development, utilizing the latest technologies to ensure high performance and scalability. The team excels in creating intuitive user interfaces and seamless user experiences. We employ agile methodologies for flexible and efficient project management, ensuring timely delivery and adaptability to changing requirements. Additionally, Bootstrapped provides continuous support and maintenance, helping startups grow and evolve their digital products. Our services are designed to be affordable and high-quality, making them an ideal partner for new ventures.

Engineered for you

1

Fast Development: Bootstrapped specializes in helping startup founders build web and mobile apps quickly, ensuring a fast go-to-market strategy.

2

Tailored Solutions: The company offers customized app development, adapting to specific business needs and goals, which ensures your app stands out in the competitive market.

3

Expert Team: With a team of experienced developers and designers, Bootstrapped ensures high-quality, reliable, and scalable app solutions.

4

Affordable Pricing: Ideal for startups, Bootstrapped offers cost-effective development services without compromising on quality.

5

Supportive Partnership: Beyond development, Bootstrapped provides ongoing support and consultation, fostering long-term success for your startup.

6

Agile Methodology: Utilizing agile development practices, Bootstrapped ensures flexibility, iterative progress, and swift adaptation to changes, enhancing project success.

Yes, if you can dream it, we can build it.