Next.js app doesn't show up on Google? (2023)

Introduction

I had this problem with the first couple of projects that I learned with. I didn't really focus on and think about Google search, I just assumed that I didn't have website authority and that's why my website wasn't showing up on Google when I searched for it. Instead, I would simply type my website's URL directly to access it. However, if you type "site:yourwebsite.com" in Google search and nothing shows up, you might have the same problem as me - your website is not indexed by Google.

How to verify your app inside Google Search Console?

It's really simple. Follow these steps to index your website:

Go to the Google Search Console.
Click on the "Start Now" button.
In the top-left corner, click on "Add property".
When adding your website to the Google Search index, you have two options: "Domain" and "URL prefix".

1. "Domain"

The recommended one by Google and more comprehensive approach is the "Domain" option. By selecting this method, your website's main domain, along with all its associated subdomains, will be included in the analytics. For instance, if your domain is "yourwebsite.com," the analytics will encompass data from subdomains like "yourwebsite.com" and others. The verification process for the "Domain" option involves DNS verification.

2. "URL prefix"

On the other hand, the "URL prefix" option provides more flexibility, allowing you to verify your domain through a couple of different methods. However, it's essential to note that the "URL prefix" option only covers the specific subdirectory or path you choose for verification, and it does not include other subdomains of your website.

In summary, while both options allow you to verify your website, the "Domain" option is generally recommended for a more comprehensive analysis of your entire website and its subdomains.

Domain verification

Type your domain name in the provided field and click "continue."

You will be directed to a modal that looks like this:

Vercel - "Domain" verification

Open a new tab and search for "Vercel" on Google. Click on the project you want to verify.
Navigate to the "Settings" section.
In the project settings, navigate to the "Domains" section.
Click on the "Edit" option.
Next, click on "View DNS Records & More for yourwebsite.com →"
Click on "Add" to create a new TXT record.
In the "Value" field, paste the verification code obtained from the Google Search Console.
Return to the Google Search Console and click "verify." It might take a couple of minutes and a few attempts, but your website should be successfully verified.

NameCheap - "Domain" verification

Sign in to your NameCheap account, navigate to your "Domain List" and click on the "MANAGE" button next to the domain you want to verify.
On the domain management page, click on "Advanced DNS".
Look for the option to "add new record" and select it.
Choose the TXT Record and copy the TXT value provided inside the Google Search Console. Then, paste the copied TXT value into the appropriate field in your NameCheap account.
Save all the changes you made.
Now, return to the Google Search Console and click the "verify" button. It may take a few tries, but your domain should be successfully verified within a couple of minutes.

URL prefix verification

Let's walk through the "URL prefix" verification process step-by-step:

Paste your website URL into the provided input field.
Select the HTML option, which, in my opinion, is the easiest one for Next.js websites.

Copy the provided meta tag, now, open your project's _document.js file and paste the copied meta tag into it.

 //PAGES ROUTER
 import { Html, Head, Main, NextScript } from "next/document";

 export default function Document() {
   return (
     <Html lang="en">
       <Head>
 //
         <meta
           name="google-site-verification"
           content="ewawsLX9_9TZyMFjdeqxxGSWXpYSk6vUaAgtwwqakFE"
         />
 //
       </Head>
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
   );
 }

 //APP ROUTER
 export const metadata = {
   other: {
     name: "google-site-verification",
     content: "ewawsLX9_9TZyMFjdeqxxGSWXpYSk6vUaAgtwwqakFE",
   },
 };

That's it! Once you've completed these steps, go back to the Google Search Console and click on "verify." It may take a couple of tries, but usually, within a few minutes, your website should be successfully verified.

How to index your website URLs manually.

Okay, now you've verified it, but we still haven't covered how to index it.

Go to the Google Search Console.

click on the "URL inspection tool".
Type any URL that you want to index and click on the search icon.

Wait for a little bit, and that's it – your website URL is indexed. It usually takes around one day for Google crawlers (bots, spiders, robots... They have a lot of synonyms 😂) to crawl your website.

How to index your website URLs - the automatic and better way.

Learn how to index your website and make it visible to people using 'next-sitemap' sitemaps with the best industry standards. For more information on implementing this with Next.js, read my other blog article.

Filip Trivan's blog