Introduction
A sitemap is a list of URL links of all the pages of a website. There are two kinds of sitemaps – XML sitemaps and HTML sitemaps. XML sitemaps are used by web crawlers (usually by search engine bots) to index sites and search for content. HTML sitemaps, on the other hand, are used by people to navigate the contents of a webite. Both are important.
In this tutorial, we will learn how to generate and make use of both types. For XML sitemaps we will use Yoast SEO and Google XML Sitemaps to generate sitemaps. Then we will learn how to use webmaster tools – Google Search Console and Bing Webmaster Tools – to inform search engines about the these sitemaps Lastly, we will learn to generate and use an HTML sitemap with WP Sitemap Page.
With that, let’s begin!
Generating and Using XML Sitemaps
In this section, we will be learning how to create and use XML sitemaps. First, with Yoast SEO, then with Google XML Sitemaps.
Using Yoast SEO to Generate a Sitemap
In this subsection, we will learn how to create a sitemap with Yoast SEO.
Installing Yoast SEO
To be able to use Yoast SEO, it needs to be installed and activated. Here’s how to do that. From the admin dashboard, hover over “Plugins” and then click “Add New”. You will be redirected to the “Add Plugins” page. Type “Yoast SEO” in the “Search plugins” textbox. Once the result’s show up, look for “Yoast SEO”
Click “Install Now” on the plugin’s section to install.
Click “Activate” after.
Yoast SEO can now be used.
Generating an XML Sitemap with Yoast SEO
We can now generate an XML sitemap with Yoast SEO. To do so, hover over “SEO” and click “General”
This will redirect to the “General – Yoast SEO” dashboard page. From there click on “Features”. You will see the different features that Yoast SEO has.
Look for the “XML sitemaps” feature.
Click on the question mark icon on the right of the “XML sitemaps” label.
This will reveal the XML sitemaps feature’s help panel. Click on “See” the XML sitemap.” link
This will show the WordPress site’s XML sitemap.
Alternatively, the sitemap can be seen by appending the site’s root page with “/sitemap_index.xml”. In the example below, “localhost/wp-test” is the root of our site. so we appended the URL accordingly
Click on a sitemap link to view the URLs that it contains.
Using Google XML to Generate a Sitemap
In this subsection, we will learn how to create a sitemap with Google XML
Installing Google XML Sitemaps
To install Google XML, search for it in the “Add Plugins” page.
Click “Install Now” in the “Google XML Sitemaps” section
Then click “Activate”
Generating an XML Sitemap with Google XML Sitemap
The Google XML Sitemap automatically creates an XML sitemap, when the plugin is activated.
To view the generated sitemap, from the admin dashboard, hover over “Settings” then click “XML-Sitemap”
This will redirect to the “XML Sitemap Generator” page. The URL to the sitemap can be found near the top of the page. To make it easier, press CTRL + F and look for this string: “The URL to your sitemap index file is:”.
Copy and paste that URL to a web browser’s address bar and press ENTER. In our example, the URL is: http://localhost/wp-test/sitemap.xml. We will copy and paste that address on our browser, and then we will press ENTER.
Alternatively, the “/sitemap.xml” string can be appended to the WordPress site’s root URL. In the example below our site’s root url is “localhost/wp-test”. We will append the sitemap string. Thus;
Click on a sitemap link to view the URLs that it contains.
(Optional) Google XML Sitemap Settings
The plugin can be further configured. To do so, click on the “XML-Sitemap” link found in the main dashboard’s “Settings” tab.
Below are the plugin’s basic options:
The plugin can also be configured to include additional pages.
The plugin can also be configured to specify which contents to include in the XML Sitemap.
It also allows for exclusion of content in the XML sitemap.
Lastly, we can assign the priorities of the XML sitemap’s content.
To save the plugin’s configuration settings, click the “Update Options” button at the bottom of the page.
For further settings be sure to check the page.
Informing a Search Engines of XML an Sitemap
In this section, we will learn how to inform a search engine of a WordPress site’s XML sitemaps
Downloading and Activating the “Insert Headers and Footers” plugin
Prior to letting search engines know of the XML sitemap. We will embedded our WordPRess
We need to install and activate the Insert Headers and Footers plugin. It will be used to embedded tags needed for site ownership verification. Search for the plugin in the “Add Plugins” page.
Click, “Install Now” in the “Insert Headers and Footers” section.
Click ‘Activate’
Informing Google of the XML Sitemap
(Optional) Using Ngrok to expose a local server
This subsection is optional but very important.
Google Search Console is a service offered by Google to help webmasters index a site and optimize its visibility. It is where XML Sitemaps are submitted to so that Google can crawl and index a site. However, Google Search Console cannot work with locally deployed WordPress sites. There is a way to work around this however. We can use Ngrok. Ngrok is a free tool (a tunneling service tool) which allows us to access a site as if it was deployed on a production server. (There is also a paid version, but for development purposes the free version is sufficient). Here is how to set it up. (Take note that you have to sign up for an Ngrok account to be able to maximize Ngrok’s use). Copy the directory of Ngrok in your Environment System Variables (particularly the “Path” system variable. After doing that, Ngrok can be access from the command line. It’s documentation page can be access by this link. Here is the link to the official tutorials, only accessible once you’ve signed up, to help get started.
(Note: you may experience issues when trying to access the XML sitemap using the tunneling service’s generated URL. This seems to be due to XML sitemap’s xsl file. Most modern web browsers show an error message or a blank page. This does not happen with Internet Explorer 11.) We suggest using that browser for testing purposes)
Informing Google of a WordPress Site’s XML Sitemap
In this subsection, we will use the Google Search Console to let Google know of a WordPress site’s sitemap.
First, create a Google Account. After that, go to the Google Search Console page.
Once there, click on the the “URL prefix” property type.
Enter your site’s URL then click “Continue”
Next, we will need to verify our ownership of the site. We need to choose a verification method. We will choose the “HTML tag” verification found under the “HTML file” option.
Copy the code on the first step.
Next, open a new tab or window. In the new tab or window navigate to the WordPress admin dashboard. From the Admin dashboard, hover over “Settings” and click “Insert Headers and Footers”
You will be redirected to the “Insert Headers and Footers” settings page.
Paste the code that was copied from the Google Search Console page inside the “Scripts in Header”
Click the “Save” button on the bottom of the page, to apply the settings.
Next, return to the Google Search Console page then click “Verify”.
If the site’s ownership was successfully verified, a windows showing a message confirming the verification will appear.
We can now add an XML sitemap. Click the “Go to Property” button. It will redirect to the Google Search Console dashboard.
Click on the “Sitemaps” link on the side of the page.
We will be redirected to the Google Search Console’s Sitemap page. Add the URL of the sitemap, inside the “Add a new sitemap” section. After that, click “Submit”.
If the XML sitemap was successfully submitted, a message saying the sitemap was submitted successfully will be shown.
We’ve successfully submitted the sitemap to Google.
Informing Bing of a WordPress Site’s XML Sitemap
in this subsection, we will learn to inform Bing of a WordPress site’s XML sitemap.
Go to the Bing webmaster tools page. Sign up for an account, if you don’t have one. After signing up for an account (or logging in), you will be redirected to the “My Sites” page of the Bing webmaster tool.
Type the URL of the site, whose XML Sitemap you will let Bing know of, on the “Add a Site” section of the page. Click “Add” after.
The page will redirect to the “Add a Site” page.
Type the address of the sitemap’s URL in the “Add a sitemap” field.
Click “Save” at the bottom of the page.
It will redirect to the “Verify Ownershop” page. There are multiple ways to verify ownership.
We will use the second method – copying a meta tag on a web page. Copy the meta tag.
Open a new tab or page and open the WordPress admin dashboard. From there, hover over “Settings” and click the “Insert Headers “
It will redirect to the “Insert Headers and Footers” settings. Paste the meta code that was copied from the inside the “Scripts in Header” section of the page.
Click the “Save” button on the bottom of the page.
Now go back to Bing webmaster and click “Verify”.
After verifying it will redirect to the Bing webmaster Dashboard. Here you can see different site statistics.
We’ve successfully submitted the sitemap to Bing.
Generating and Using HTML Sitemaps
In this section, we will learn how to create and use HTML Sitemaps. To do that, we will use the WP Sitemap Page plugin.
Installing WP Sitemap Page
We need to install the plugin first. From the admin dashboard, hover over “Plugins” and click “Add New”. You will be redirected to the “Add Plugins” page. Type “WP SItemap Page” in the “Search plugins…” textbox.
Click on “Install Now” on the “WP Sitemap Page” section.
After that, click “Activate”
Using WP Sitemap Page to DIsplay an HTML Sitemap
To display an HTML sitemap, copy this shortcode:
[wp_sitemap_page]Code language: JSON / JSON with Comments (json)and paste it on a page or post in its respective block editor. In our example below, we pasted the shortcode in a page’s block editor.
Here is what the generated HTML sitemap looks like.
For more shortcodes, view the “How to use” tab in the WP Sitemap Page. To get there, from the admin dashboard, hover over “Settings” then click the “WP Sitemap Page”. This will redirect to the “WP Sitemap Page” Click on “How to use”, a list of shortcodes will be presented.
Below are the different shortcodes.
We have created and used an HTTL Sitemap using WP Sitemap Page.
Conclusion
We’ve finished the tutorial. We’ve learned a lot about XML and HTML sitemaps. We’ve learned what they are for, how to generate them and how to use them.
