It goes without saying that getting indexed on search engines is very important for attracting visitors to 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:
- Create a new property on the Bing Webmaster Dashboard website.
- Add a property verification tag to your website.
- Add a
sitemap.xmlfile to your website and deploy your code changes to production.
- 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.
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
So, you can enter that value into the sitemap field and press the "Add" button.
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.
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.
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.
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:
Then, create a new file in the
/public directory called
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
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.
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.
If the verification was successful, you'll be redirected to the dashboard page for your property.
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.
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.
There you have it! Your website should now be set for indexing by Bing.
Thanks for reading and happy coding!