What is an HTML Sitemap?
An HTML sitemap is essentially a page on your website that lists all the other pages, typically organized in a hierarchical or categorized manner. Unlike XML sitemaps, which are primarily designed for search engines, HTML sitemaps are crafted with human users in mind. They serve as a navigational aid, helping visitors easily find specific content or navigate through the site’s structure. You can see our HTML Sitemap here.
HTML Sitemaps: Enhancing Website Navigation and SEO
In the vast realm of the internet, where websites compete for attention amidst billions of pages, ensuring your online presence stands out is crucial. One often-overlooked yet powerful tool in achieving this is the humble HTML sitemap. While it might not boast the glitz and glamour of flashy graphics or interactive content, its role in enhancing both user experience and search engine optimization (SEO) cannot be underestimated.
Enhanced User Experience
The primary benefit of an HTML sitemap lies in its ability to improve user experience. Consider a scenario where a visitor lands on your website with a specific goal in mind but struggles to find the relevant page through the main navigation menu or search bar. An HTML sitemap acts as a safety net, offering an alternative route for users to locate desired content quickly.
By providing a comprehensive overview of your website’s structure and content hierarchy, an HTML sitemap empowers users to navigate with ease, reducing frustration and increasing engagement. Whether it’s a new visitor exploring your site for the first time or a returning user seeking specific information, having a clear and accessible roadmap can significantly enhance their browsing experience.
SEO Benefits
Beyond its impact on user experience, an HTML sitemap also plays a crucial role in SEO. While search engine crawlers are adept at discovering and indexing web pages, they can sometimes overlook certain content, especially if it’s buried deep within a website’s architecture. By including a well-structured HTML sitemap, you provide search engines with another pathway to crawl and index your site, ensuring that all pages are duly recognized and ranked.
Additionally, HTML sitemaps serve as a strategic tool for distributing link equity throughout your website. By including internal links to all your pages within the sitemap, you can help spread authority and relevance across the site, potentially boosting the visibility and ranking of individual pages in search engine results pages (SERPs).
Best Practices for HTML Sitemaps
To reap the full benefits of an HTML sitemap, it’s essential to adhere to best practices:
- Keep it Updated: Regularly review and update your HTML sitemap to reflect any changes in your website’s structure or content.
- Prioritize User Experience: Organize the sitemap in a user-friendly manner, making it easy for visitors to navigate and find what they’re looking for.
- Include Relevant Links: Ensure that all important pages are included in the sitemap, with descriptive anchor text that accurately reflects the content.
- Optimize for Search Engines: Leverage keywords and strategic internal linking within the sitemap to enhance its SEO value.
In conclusion, while often overshadowed by more flashy website elements, the humble HTML sitemap serves as a silent yet powerful ally in enhancing both user experience and SEO. By providing visitors with a clear navigation pathway and aiding search engine crawlers in discovering and indexing content, HTML sitemaps play a vital role in maximizing the reach and effectiveness of your online presence.
Red Fox HTML Sitemap Generator – Automated Solution
Some WordPress SEO plugins provide the ability to create and activate HTML Sitemaps that are updated as you add, or delete, pages of your site. Rank Math, my favourite, can do this. However, it’s sorting capabilities didn’t match what I needed. Namely; I wanted the ability to sort the pages shown in the sitemap of the site in a similar order to that which I’ve set in the menu. This very much aligns with the philosophy of “Prioritize User Experience” above. So, I set about creating a means to achieve this and have expanded this solution to also work with the the following other SEO plugins; SEO Framework (v5+) and Yoast SEO (v22+). Rank Math requires v1.0+.
The following code will need to be added to the functions.php file for your active theme or child theme. Be aware that updating your theme at a later date will overwrite the functions.php file, adding to a custom child theme is safer. Alternatively, and my preferred method, use the Code Snippets plugin to add the code to your WordPress install no matter the theme and is preserved across theme updates.
Adding the shortcode, further down this page, to your page text or code block should display the HTML Sitemap at that location. Use CSS to style the list if you feel this is necessary.
By default the following are displayed; Pages, Blog Posts, Project Items (Divi), Woocommerce Products. You can edit this as well as the display names for each in the allowed post types array around line #30 of the code (commented as: Array of allowed post types and their display order).
Code For Your functions.php File
<?php
// Created by Red Fox New Media
// Function to check if plugin is active
function is_the_plugin_active($plugin) {
return in_array($plugin, (array) get_option('active_plugins', array()));
}
// Function to retrieve plugin data (renamed to avoid conflict)
function get_custom_plugin_data($plugin) {
if (function_exists('get_plugin_data')) {
return get_plugin_data($plugin);
} else {
include_once(ABSPATH . 'wp-admin/includes/plugin.php');
return get_plugin_data($plugin);
}
}
function nested_html_sitemap_shortcode() {
// Define an array of supported plugins and their minimum versions
$supported_plugins = array(
'Yoast SEO' => array('file' => 'wordpress-seo/wp-seo.php', 'min_version' => '22.0'),
'Rank Math' => array('file' => 'seo-by-rank-math/rank-math.php', 'min_version' => '1.0'),
'SEO Framework' => array('file' => 'autodescription/autodescription.php', 'min_version' => '5.0')
);
$query = '';
global $wpdb;
// Array of allowed post types and their display order
$allowed_post_types = array(
'page' => 'Pages',
'post' => 'Blog Posts',
'project' => 'Projects',
'product' => 'Products'
);
// Iterate through supported plugins
foreach ($supported_plugins as $plugin_name => $plugin_info) {
$plugin_file = WP_PLUGIN_DIR . '/' . $plugin_info['file'];
// Check if plugin is active
if (is_the_plugin_active($plugin_info['file'])) {
// Get plugin data
$plugin_data = get_custom_plugin_data($plugin_file);
$plugin_version = $plugin_data['Version'];
// Check if plugin version is supported
if (version_compare($plugin_version, $plugin_info['min_version'], '>=')) {
// Execute relevant database query based on the active plugin
if ($plugin_name === 'Yoast SEO') {
// Execute Yoast SEO database query
// Query to retrieve posts sorted by menu order for allowed post types
$query = "SELECT
{$wpdb->prefix}posts.*
FROM {$wpdb->prefix}posts
INNER JOIN {$wpdb->prefix}yoast_indexable
ON {$wpdb->prefix}posts.ID = {$wpdb->prefix}yoast_indexable.object_id
WHERE
{$wpdb->prefix}posts.post_type IN ('" . implode("','", array_keys($allowed_post_types)) . "')
AND {$wpdb->prefix}posts.post_status = 'publish'
AND ({$wpdb->prefix}yoast_indexable.is_robots_noindex <> 1
OR {$wpdb->prefix}yoast_indexable.is_robots_noindex IS NULL)
GROUP BY wp_posts.ID
ORDER BY FIELD({$wpdb->prefix}posts.post_type, '" . implode("','", array_keys($allowed_post_types)) . "'), CASE WHEN {$wpdb->prefix}posts.menu_order = 0 THEN 1 ELSE 0 END, {$wpdb->prefix}posts.menu_order, {$wpdb->prefix}posts.post_date DESC";
} elseif ($plugin_name === 'Rank Math') {
// Create Rank Math database query
// Query to retrieve posts sorted by menu order for allowed post types
$query = "SELECT
{$wpdb->prefix}posts.*
FROM {$wpdb->prefix}posts
INNER JOIN {$wpdb->prefix}rank_math_analytics_objects
ON {$wpdb->prefix}posts.ID = {$wpdb->prefix}rank_math_analytics_objects.object_id
WHERE
{$wpdb->prefix}posts.post_type IN ('" . implode("','", array_keys($allowed_post_types)) . "')
AND {$wpdb->prefix}posts.post_status = 'publish'
AND {$wpdb->prefix}rank_math_analytics_objects.is_indexable <> 0
GROUP BY {$wpdb->prefix}posts.ID
ORDER BY FIELD({$wpdb->prefix}posts.post_type, '" . implode("','", array_keys($allowed_post_types)) . "'), CASE WHEN {$wpdb->prefix}posts.menu_order = 0 THEN 1 ELSE 0 END, {$wpdb->prefix}posts.menu_order, {$wpdb->prefix}posts.post_date DESC";
} elseif ($plugin_name === 'SEO Framework') {
// Execute SEO Framework database query
// Query to retrieve posts sorted by menu order for allowed post types
$query = "SELECT
p.*
FROM
{$wpdb->prefix}posts p
LEFT JOIN
{$wpdb->prefix}postmeta pm ON p.ID = pm.post_id
AND pm.meta_key = '_genesis_noindex'
WHERE
p.post_status = 'publish'
AND p.post_type IN ('page', 'post')
AND (pm.meta_value <> '1' OR pm.meta_value IS NULL)
ORDER BY FIELD(p.post_type, 'page', 'post'), CASE WHEN p.menu_order = 0 THEN 1 ELSE 0 END, p.menu_order, p.post_date ASC -- Sort by post type, menu order and then post date DESC";
}
} else {
// Plugin version is not supported
return "The installed version of $plugin_name is not supported.";
}
//} else {
// // None of the supported plugins are active or installed
// return "No supported SEO plugin is active or installed.";
}
}
$posts = $wpdb->get_results($query);
// Organize posts by post type
$posts_by_type = array();
foreach ($posts as $post) {
$posts_by_type[$post->post_type][$post->post_parent][] = $post;
}
// Generate the nested bulleted list
$output = '';
foreach ($allowed_post_types as $post_type => $post_type_title) {
if (isset($posts_by_type[$post_type])) {
$output .= '<h2>' . $post_type_title . '</h2>';
$output .= '<ul>';
// Sort posts by menu order (with menu order greater than zero)
$sorted_posts = array_filter($posts_by_type[$post_type][0], function($post) {
return $post->menu_order > 0;
});
// Sort posts with menu order of zero by post date, most recent first
$zero_menu_order_posts = array_filter($posts_by_type[$post_type][0], function($post) {
return $post->menu_order == 0;
});
usort($zero_menu_order_posts, function ($a, $b) {
return strtotime($b->post_date) - strtotime($a->post_date);
});
// Combine sorted posts
$sorted_posts = array_merge($sorted_posts, $zero_menu_order_posts);
foreach ($sorted_posts as $post) {
$output .= build_nested_html_sitemap_item($post, $posts_by_type);
}
$output .= '</ul>';
}
}
return $output;
}
function build_nested_html_sitemap_item($post, $posts_by_type) {
$output = '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a>';
// Check if the current post has children
if (isset($posts_by_type[$post->post_type][$post->ID])) {
$output .= '<ul>';
// Sort children posts in the same way as top-level list
$sorted_posts = array_filter($posts_by_type[$post->post_type][$post->ID], function($post) {
return $post->menu_order > 0;
});
// Sort posts with menu order of zero by post date, most recent first
$zero_menu_order_posts = array_filter($posts_by_type[$post->post_type][$post->ID], function($post) {
return $post->menu_order == 0;
});
usort($zero_menu_order_posts, function ($a, $b) {
return strtotime($b->post_date) - strtotime($a->post_date);
});
// Combine sorted posts
$sorted_posts = array_merge($sorted_posts, $zero_menu_order_posts);
foreach ($sorted_posts as $child_post) {
$output .= build_nested_html_sitemap_item($child_post, $posts_by_type);
}
$output .= '</ul>';
}
$output .= '</li>';
return $output;
}
add_shortcode('rfnm_html_sitemap', 'nested_html_sitemap_shortcode');Shortcode
[rfnm_html_sitemap]Do You Need Help Adding an HTML Sitemap
If adding an HTML Sitemap to your WordPress website sounds like something that would be advantageous but the above is too technical, or you want the code above adapted for an alternative SEO plugin other than those catered for, then please get in touch, selecting the WP Clinic service on the form, and I’d be happy to assist.
0 Comments