loading...

Setting up redirect on firebase

iggredible profile image Igor Irianto Updated on ・2 min read

I recently redid my nuxt personal site (hosted on firebase) and changed some URLs. One of them are links to my blogs. Before, I had my blogs at /blog/my-blog, now it is spelled /blogs/my-blog.

New URL

For example, my old redux URL was https://irian.to/blog/redux-101/.

The problem

When I search for my article for "site:irian.to redux 101", google shows the old URL instead of the new one. When user clicks at the link google provides about that redux article (or any blog I made), they will go to incorrect /blog/redux-101 URL.

Old Google Result

The Solution

Here are the steps I did to configure redirect on firebase, where I host my site. The solution is very simple and I hope it will help others in the future!

First, per firebase docs, I need to add a redirect attribute in my firebase.json. So here is what I did:

// firebase.json
    ...
    "redirects": [
      {
        "source": "/blog/:slug",
        "destination": "/blogs/:slug",
        "type": 301
      }
    ],

The 301 is for redirect.

Then I deployed it (firebase deploy). The code above takes the old URL (source) and redirect it to correct one (destination). So whenever user goes irian.to/blog/some-blog, he/she will be automatically get redirected to irian.to/blogs/some-blog instead.

That's it!

Whenever I click on google link (the old link with /blog), it now redirects to the new one.

URL redirects 301

Other firebase redirects

In addition to redirection above, firebase allows several redirect configs. Here are some:

  • Basic redirect: whenever user goes to mysite.com/old, they will be redirected to mysite.com/new using:
{
    "source": "/old",
    "destination": "/new",
    "type": 301
}
  • Different URL: If you decided to give a URL a new domain, you should use 302 to redirect and inform user that this address is in a new URL.
{
    "source": "/myproject",
    "destination": "https://myawesomeprojectsite.com/",
    "type": 302
} 
  • Multiple redirects: If you have multiple URLs, like: mysite.com/menu, mysite.com/menu/sushi, mysite.com/menu/beverage, etc., and want to redirect all of them o mysite.com/foodie. You can do it with ** and {/**}.
{
    "source": "/menu{,/**}"
    "destination": "/foodie"
    "type": 301
},

Thanks for reading. Happy coding! πŸ’»

Source:

Posted on by:

iggredible profile

Igor Irianto

@iggredible

Husband πŸ‘«. Programmer πŸ’». Vim πŸ€“. Web Development should be explained as simple as possible, but no simpler πŸ’‘

Discussion

markdown guide
 

Most people fail to retain links after a domain update, move or framework core version change.

For SEO purposes this is incredibly important, and your solution is explicitly handy for Firebase users.

Great work!

 

Thanks Patrick! Hopefully others who are in my shoes won't have to go through the same pain.