HTML Sitemaps Guide

Create user-friendly HTML sitemaps to improve navigation and user experience

What are HTML Sitemaps?

HTML sitemaps are human-readable pages that display your website's structure and content hierarchy. Unlike XML sitemaps (for search engines), HTML sitemaps help visitors navigate your site and discover content they might otherwise miss.

ProRank SEO's HTML sitemap feature provides a highly customizable solution with shortcode support, widget integration, and advanced styling options to match your site's design.

Quick Start

Basic Implementation

The simplest way to add an HTML sitemap to your site:

Navigate to ProRank SEO → Technical SEO → Sitemaps
Click on the HTML Sitemap tab
Enable "Enable HTML Sitemap"
Create a new page or edit an existing one
Add the shortcode: [prorank_sitemap]
Publish or update the page

Shortcode Usage

Basic Shortcode

[prorank_sitemap]

Displays sitemap with default settings from your configuration

Advanced Examples

<!-- Two-column grid layout with dates -->
[prorank_sitemap columns=&quot;2&quot; style=&quot;grid&quot; show_date=&quot;true&quot;]

<!-- Pages and posts only, exclude specific IDs -->
[prorank_sitemap include=&quot;pages,posts&quot; exclude_ids=&quot;10,25,301&quot;]

<!-- Categories with post counts and excerpts -->
[prorank_sitemap include=&quot;categories&quot; show_excerpt=&quot;true&quot;]

<!-- Full featured example -->
[prorank_sitemap 
  include=&quot;pages,posts,categories&quot; 
  exclude=&quot;tags&quot; 
  columns=&quot;3&quot; 
  style=&quot;grid&quot;
  show_date=&quot;true&quot;
  show_excerpt=&quot;false&quot;
  heading_tag=&quot;h3&quot;
]

Shortcode Parameters

Parameter	Type	Description	Example
include	string	Comma-separated sections to include (pages,posts,categories,tags,authors)	include="pages,posts"
exclude	string	Comma-separated sections to exclude	exclude="tags"
exclude_ids	string	Comma-separated post/page IDs to exclude	exclude_ids="123,456"
columns	number	Number of columns (1-4)	columns="2"
style	string	Display style: "list" or "grid"	style="grid"
show_date	boolean	Show publish date (true/false)	show_date="true"
show_excerpt	boolean	Show post excerpts (true/false)	show_excerpt="true"
heading_tag	string	HTML tag for headings (h2-h6)	heading_tag="h3"

Configuration Options

General Settings

•
Enable HTML Sitemap:Master toggle for HTML sitemap functionality
•
Sitemap Page:Select a page to automatically insert the sitemap shortcode
•
Auto-insert Shortcode:Automatically add shortcode to selected page
•
Include Sections:Choose which content types to display

Display Options

Option	Available Values	Description
Display Style	List, Grid	Choose between vertical list or grid layout
Number of Columns	1-4	Split content into multiple columns
Heading Tag	H2-H6	HTML tag for section headings
Sort Order	Title, Date, Modified, Menu Order	How to sort items within sections
Show Post Count	Yes/No	Display number of posts in categories/tags
Show Date	Yes/No	Display publish date for posts
Show Excerpt	Yes/No	Display post excerpts
Exclude Empty Terms	Yes/No	Hide categories/tags without posts

Widget Integration

ProRank HTML Sitemap Widget

Add HTML sitemaps to your sidebar, footer, or any widget area:

Go to Appearance → Widgets
Find "ProRank HTML Sitemap" widget
Drag to desired widget area
Configure widget settings:
- Widget Title (default: "Sitemap")
- Sections to display
- Display options
Save widget settings

Widget settings are independent from main sitemap settings, allowing different configurations for different areas.

Custom Styling

ProRank SEO provides multiple ways to customize your HTML sitemap appearance:

1. Built-in Custom CSS

Add custom CSS directly in the Advanced tab:

.prorank-html-sitemap {
  font-family: &apos;Inter&apos;, sans-serif;
  line-height: 1.6;
}

.prorank-html-sitemap h2 {
  color: #1a73e8;
  border-bottom: 2px solid #1a73e8;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.prorank-html-sitemap ul {
  list-style-type: none;
  padding-left: 0;
}

.prorank-html-sitemap li {
  padding: 8px 0;
  border-bottom: 1px solid #e0e0e0;
}

.prorank-html-sitemap li:hover {
  background-color: #f5f5f5;
  padding-left: 10px;
  transition: all 0.3s ease;
}

.prorank-html-sitemap .post-count {
  color: #666;
  font-size: 0.9em;
  margin-left: 5px;
}

.prorank-html-sitemap .post-date {
  color: #999;
  font-size: 0.85em;
  margin-left: 10px;
}

2. CSS Classes Reference

.prorank-html-sitemap - Main container
.prorank-sitemap-section - Each section wrapper
.prorank-sitemap-heading - Section headings
.prorank-sitemap-list - Item lists
.prorank-sitemap-item - Individual items
.prorank-sitemap-grid - Grid layout container
.post-count - Post count numbers
.post-date - Publication dates
.post-excerpt - Post excerpts

Content Sections

Default Sections

✓ Pages: All published pages
✓ Posts: Blog posts
✓ Categories: Post categories
✓ Tags: Post tags

Additional Sections

• Authors (Core+): Author archive pages
• Custom Post Types: Products, portfolios, etc.
• Custom Taxonomies: Product categories, etc.

Exclusion Options

Excluding Content

Control what appears in your HTML sitemap:

Global Exclusions (Settings)

• Exclude specific post/page IDs (comma-separated)
• Exclude empty categories and tags
• Exclude entire content sections

Per-Shortcode Exclusions

<!-- Exclude specific IDs -->
[prorank_sitemap exclude_ids=&quot;10,25,301&quot;]

<!-- Exclude entire sections -->
[prorank_sitemap exclude=&quot;tags,authors&quot;]

Best Practices

Avoid

⚠ Including too many items (keep under 500)
⚠ Showing draft or private content
⚠ Duplicating XML sitemap structure
⚠ Using overly complex layouts
⚠ Forgetting mobile responsiveness
⚠ Including thin or low-value pages

Use Cases

Common Implementations

E-commerce Sites

Display product categories, featured products, and important pages:

[prorank_sitemap include=&quot;pages,product_cat,product&quot; columns=&quot;3&quot; style=&quot;grid&quot;]

News/Blog Sites

Show recent posts with dates and categories:

[prorank_sitemap include=&quot;posts,categories&quot; show_date=&quot;true&quot; show_excerpt=&quot;true&quot;]

Corporate Sites

Focus on service pages and key information:

[prorank_sitemap include=&quot;pages&quot; exclude_ids=&quot;privacy,terms&quot; style=&quot;list&quot;]

SEO Benefits

How HTML Sitemaps Help SEO

1.
Improved Crawlability:Provides additional internal links for search engine crawlers
2.
Better User Experience:Helps visitors find content quickly, reducing bounce rate
3.
Link Equity Distribution:Passes PageRank to deeper pages in your site structure
4.
Content Discovery:Helps users and search engines find orphaned pages