What to do with the heroku subdomain for SEO after getting a custom domain?

Question

I've been working on a website for a couple of months and it started to get some viewership after making improvements to SEO, while it was still accessible only through a .heroku.com domain. I thought to myself that it was time to purchase a .com domain on namecheap, since that will make the site seem more legit and might lead to more clicks.

I finished the setup and my site can both be found at example.com and example.herokuapp.com. At first all of the search results in google still lead to the .herokuapp.com site and I was on the first page for many queries that I care about. But now my page is nowhere to be found. I believe this might be because google sees this as duplicate content and punishes me harshly for it.

I basically want all of the links in google to lead to the regular .com site and not have the herokuapp.com site accessible anymore or completely hide it from all search engines. I stumbled upon a few possible solutions, but none of them seem very clean or practical since my site already consists of over 400 pages. (How to get rid of Heroku App domain in the search resutls)

What would be the best way to go about this ?

Answer 1

Finally got it working thanks to @Stephen Ostermiller's great advice.

The following solution will work if your back-end is running on Node.js with Express. First we will create a 301 redirect for all the necessary pages. Here is the code for the about page as an example:

/// About Page //// 
router.get("/about", function(req, res){
    const host = req.hostname;
    const url = req.url;
    if(host === "example.herokuapp.com"){
        res.redirect(301, "http://www.example.com" + url);
    } else{
        res.render("about");
    }
});

It is also just as easy to implement for get requests that have to complete a query within your database and pass a variable:

/// Kanji Index Route///
router.get("/", function(req, res){
    /// Get all kanjis from db///
    Kanji.find({}, function(err, allKanjis){
        if(err){
            console.log(err);
        } else {
            const host = req.hostname;
            const url = req.url;

            if(host === "example.herokuapp.com"){
                res.redirect(301, "http://www.example.com" + url);
            } else{
                res.render("main/kanjis", {kanjis : allKanjis});
            }
        }
    });
});

the req.url seems to only grab the last part of the path, so make sure to keep that in mind when typing out the route for your redirect.

After setting up all of the 301 redirects, follow the guide on how to use Google Change of Address Tool.

It will take a while for google to update, so I cannot confirm the results as of yet. But I believe this will solve the issue.