Introduction

It goes without saying that getting indexed on search engines is very important for attracting visitors to your website.

Although Google is by far the most popular search engine, it's still important to get your website indexed and crawled by Bing.

In this article, we'll get your Next.js website indexed on Bing by registering it using the Bing Webmaster Dashboard and create a sitemap.xml file they can use when crawling your website.

Before going through this guide, the assumption is that you have a Next.js website created and deployed to a production environment. You can't get your Next.js website indexed on search engines until you have done those two things.

Let's get started!

Get Indexed On Bing

To get your Next.js web application indexed on the Bing search engine, we'll follow these general steps:

  1. Create a new property on the Bing Webmaster Dashboard website.
  2. Add a property verification tag to your website.
  3. Add a sitemap.xml file to your website and deploy your code changes to production.
  4. Run the property verification process via the Bing Webmaster Dashboard website.

We'll go through each of those steps in the sections below.

Create A New Bing Property

First, open a new browser window and go to the Bing Webmaster Tools website.

If you already have an account, login to it.

If you don't have an account, create one by clicking the "Sign Up" link and go through the signup process.

Once you're signed in or have successfully created a new account, you'll be redirected to a dashboard.

In the top left-hand section, there should be an input field labeled "Add A Site". Enter your website URL into that input and press the "Add" button.

Bing Webmaster Tools - Add New Property

On the proceeding page, you'll also be asked to enter the URL of a sitemap.xml file. Later on in this guide, we'll create and deploy a sitemap.xml file for your website that will reside at a URL of https://example.com/sitemap.

So, you can enter that value into the sitemap field and press the "Add" button.

Bing Webmaster Tools - Add New Property

Now, you'll need to verify with Bing that you own the website property.

After submitting the form, you should have been re-directed to a page labeled as "Verify ownership for: example.com". They give you three options to verify that you own the property. We'll choose the "Copy and paste a <meta> tag in your default webpage" method.

Scroll to that section of the page and copy the <meta> tag they provide.

Bing Webmaster Tools - Verify Property Ownership

Keep this page in your browser open. We'll come back to it and begin the verification process after we add the verification <meta> tag to your website.

Add the Property Verification Tag To Your Website

On your development machine, navigate to your Next.js project directory.

Via your code editor, open the homepage for your site (should be the /pages/index.js file) and add the <meta> tag from Bing anywhere inside the <Head> component in the file.

When you're done editing, make sure you save the file. The <meta> verification tag should look similar to this:

    
      <Head>
        . . .
        <meta name="msvalidate.01" content="VERIFICATION_ID" />
        . . .
      </Head>
    
  

Make sure you save the file after making those changes.

Before we deploy this change to production, let's also create a sitemap.xml file for your Next.js website.

Add a Sitemap.xml File to Your Website

Now we need to create a sitemap.xml file for your website.

The sitemap.xml is an XML file that holds a complete list of all the page URLs for a given website, along with other additional details for those pages (metadata, last updated date, etc.). Its main purpose is to inform search engines about the pages on your website that you want them to crawl and have displayed in search results.

In the next steps, we'll add the file to your website and make them accessible at the root URL (i.e. www.example.com/sitemap.xml).

First, let's create the sitemap.xml file for your website.

We'll want to store the sitemap.xml file in a /public directory positioned in the root of your project directory.

If you don't already have that directory, create one with this command:

    
      mkdir public
    
  

Then, create a new file in the /public directory called sitemap.xml:

    
      cd public && touch sitemap.xml
    
  

Next.js serves all the files in the /public directory from the root URL of your application. So, this file will be accessible at www.example.com/sitemap.xml in the browser.

Open the new /public/sitemap.xml file in your code editor and add this code to the file:

    
      <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
          <url>
              <loc>https://example.com</loc>
              <changefreq>daily</changefreq>
              <priority>0.7</priority>
          </url>
      </urlset>
    
  

For demonstration purposes, we'll only add the homepage to the sitemap. In the future, you'll want every URL on the website to be included in this file.

Before moving on, make sure you've replaced the https://example.com with your domain in the /public/sitemap.xml file.

Save the changes you made to the sitemap.xml file and open your browser window to http://localhost:3000/sitemap.xml.

You should see the contents of your XML file displayed on the page.

Sitemap.xml File Displayed in your Browser

Now, you need to deploy the changes you've made to production to make your sitemap.xml file and <meta> verification tag viewable to the world.

When you've finished your deployment process, visit your website in a browser and verify that the sitemap.xml file is served at this URL: https://example.com/sitemap.xml.

And verify that the verification tag is visible when you view the HTML document for your homepage in the Developer Tools.

You should see the Bing verification <meta> tag in the <head> section of your page.

If everything looks good, let's tell Bing about the <meta> verification tag and sitemap.xml file you just created.

Run the Property Verification Process

Now we can tell Bing to run their script that goes to your website, finds the <meta> tag, and verifies that the ID matches the one in their system.

Go to the browser page you left open in the Bing Webmaster area.

Press the "Verify" button inside the "Copy and paste a <meta> tag in your default webpage" section of the page.

Bing Webmaster Tools - Verify Property Ownership

If the verification was successful, you'll be redirected to the dashboard page for your property.

Bing Webmaster Tools - Property Dashboard Page

If you receive an error or the verification fails, make sure the <meta> tag is deployed on your website with the ID matching what Bing provided you with.

Make sure you keep the <meta> tag in the code of your website. This will ensure that your website remains verified with Bing.

The sitemap.xml file should be automatically registered with Bing. You can verify this in the dashboard for your website.

Bing is now going to be crawling your website moving forward.

Conclusion

There you have it! Your website should now be set for indexing by Bing.

Thanks for reading and happy coding!