DEV Community

Cover image for Next.js: How to Submit Your Sitemap to Google
Dave Gray
Dave Gray

Posted on • Originally published at davegray.codes on

Next.js: How to Submit Your Sitemap to Google

I previously discussed how to build a sitemap in Next.js, but I didn't discuss the crucial next step: How to submit your sitemap to Google.

Let me guide your through this process step-by-step:

1. Pick How You Want to Submit Your Sitemap

Google provides a list of different ways you can submit your sitemap to their crawler for indexing.

  • In the Search Console
  • Programmatically using their Search Console API
  • Listing your sitemap in your robots.txt file
  • Broadcasting with WebSub in Atom or RSS

I chose to use two of the above methods. When I created my robots.txt file, I did list the sitemap in the file. With this approach, we just wait until Google discovers our site and reads the robots.txt file. No doubt this works, but I wanted to be a little more proactive, too.

I wanted to see what the Google Search Console had to offer, so I signed up with my Google account. At this point, I received a message stating I needed to verify site ownership.

2. Verifying Site Ownership

Google allows you to choose a verification method to confirm site ownership. Several options are provided. Choosing one may depend on your hosting situation or the tech you are using with your blog.

  • HTML file upload
  • HTML tag
  • Google Analytics tracking code
  • Google Tag Manager
  • Google Sites, Blogger, or Domains account
  • Domain name provider

For my Next.js blog, I chose the HTML tag site verification option. This requires adding an additional metadata tag in the <head> section of your site's non-logged in home page.

To provide for verification metadata, Next.js supports a verification object in the metadata type it creates your project's metadata tags from. My discussion of creating a metadata object for my Next.js blog might help you understand the overall approach.

I put the following code in the root layout.tsx file of my project as part of the larger metadata object Next.js creates.

verification: {
    google: "YOUR-VERIFICATION-CODE-PROVIDED-BY-GOOGLE"
  },
Enter fullscreen mode Exit fullscreen mode

After adding the new verification metadata to your site and redeploying to the web, you can open DevTools to inspect your site. You should see a meta tag somewhere in the <head> element of your home page like this:

<meta name="google-site-verification" content="YOUR-VERIFICATION-CODE-PROVIDED-BY-GOOGLE">
Enter fullscreen mode Exit fullscreen mode

Now you can go back to the search console to tell Google to verify your site ownership. Google should be able to verify your site ownership very quickly.

3. Submit Your Sitemap

You have now verified the ownership of your site, and you can submit your sitemap in the Google Search Console.

Now the wait begins for your site to be indexed. I know you may be anxious ( just like I was ) to see results, but Google will usually take a few days before it crawls and indexes your site.

Go back to the Search Console in a couple of days to see if Google has visited your site. The Search Console has an Indexing section where it will tell you the last date your sitemap was read by Google, the status, number of discovered pages, and let you dive into reports for single pages, too.


Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Top comments (0)