Sitemap HTML berbeda dari XML sitemap. HTML sitemap adalah halaman yang bisa dilihat user, membantu navigasi sekaligus SEO.
HTML vs XML Sitemap
Perbedaan
XML Sitemap:
- For search engines
- Machine readable
- sitemap.xml
- Not visible to users
HTML Sitemap:
- For users
- Human readable
- Regular webpage
- Helps navigation
Apakah Masih Relevan?
HTML sitemap benefits:
1. Helps user navigation
2. Internal linking
3. Crawl discovery
4. Accessibility
5. SEO value (links)
Yes, still relevant in 2026.
Benefits HTML Sitemap
User Benefits
For visitors:
- Find content easily
- Overview of site structure
- Quick access to pages
- Alternative navigation
SEO Benefits
For search engines:
- Internal link equity
- Discover deep pages
- Understand structure
- Crawl path to all pages
Creating HTML Sitemap
Basic Structure
<!DOCTYPE html>
<html>
<head>
<title>Sitemap - Site Name</title>
<meta
name="description"
content="Complete sitemap
of all pages on our website."
/>
</head>
<body>
<h1>Sitemap</h1>
<section>
<h2>Main Pages</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</section>
<section>
<h2>Blog Posts</h2>
<ul>
<li><a href="/blog/post-1/">Post Title 1</a></li>
<li><a href="/blog/post-2/">Post Title 2</a></li>
</ul>
</section>
</body>
</html>
Organized by Category
<h1>Sitemap</h1>
<nav class="sitemap">
<section>
<h2>Products</h2>
<ul>
<li>
<a href="/products/category-1/">Category 1</a>
<ul>
<li><a href="/products/category-1/item-1/">Item 1</a></li>
<li><a href="/products/category-1/item-2/">Item 2</a></li>
</ul>
</li>
<li>
<a href="/products/category-2/">Category 2</a>
<ul>
<li><a href="/products/category-2/item-1/">Item 1</a></li>
</ul>
</li>
</ul>
</section>
<section>
<h2>Resources</h2>
<ul>
<li><a href="/blog/">Blog</a></li>
<li><a href="/guides/">Guides</a></li>
<li><a href="/faq/">FAQ</a></li>
</ul>
</section>
</nav>
Styling HTML Sitemap
Basic CSS
.sitemap {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.sitemap section {
margin-bottom: 30px;
}
.sitemap h2 {
font-size: 1.5rem;
border-bottom: 2px solid #eee;
padding-bottom: 10px;
margin-bottom: 15px;
}
.sitemap ul {
list-style: none;
padding: 0;
}
.sitemap li {
margin-bottom: 8px;
}
.sitemap a {
color: #333;
text-decoration: none;
}
.sitemap a:hover {
color: #0066cc;
text-decoration: underline;
}
Multi-Column Layout
.sitemap-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.sitemap-column section {
break-inside: avoid;
}
WordPress Implementation
Using Plugin
Plugins:
1. Simple Sitemap (free)
2. WP Sitemap Page
3. SEO plugins (some include)
Shortcode:
[simple-sitemap]
Custom Function
function generate_html_sitemap() {
$output = '<div class="html-sitemap">';
// Pages
$output .= '<h2>Pages</h2>';
$output .= wp_list_pages(array(
'title_li' => '',
'echo' => false
));
// Posts by category
$categories = get_categories();
foreach ($categories as $category) {
$output .= '<h2>' . $category->name . '</h2>';
$output .= '<ul>';
$posts = get_posts(array(
'category' => $category->term_id,
'numberposts' => -1
));
foreach ($posts as $post) {
$output .= '<li><a href="' . get_permalink($post) . '">'
. $post->post_title . '</a></li>';
}
$output .= '</ul>';
}
$output .= '</div>';
return $output;
}
add_shortcode('html_sitemap', 'generate_html_sitemap');
Hugo Implementation
Sitemap Template
<!-- layouts/_default/sitemap.html -->
{{ define "main" }}
<h1>Sitemap</h1>
<section>
<h2>Pages</h2>
<ul>
{{ range where .Site.Pages "Section" "" }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</section>
{{ range .Site.Taxonomies.categories }}
<section>
<h2>{{ .Page.Title }}</h2>
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
</section>
{{ end }} {{ end }}
Content File
---
title: "Sitemap"
url: "/sitemap/"
layout: "sitemap"
---
Best Practices
Organization
Group logically:
- By section
- By category
- By hierarchy
- Alphabetically (optional)
Make it easy to scan.
Link to Important Pages
Prioritize:
- High-value pages
- Deep pages (hard to find)
- Orphan pages
- Key landing pages
Not necessarily every page.
Keep Updated
Maintenance:
- Add new pages
- Remove deleted pages
- Update categories
- Automate if possible
Page Limits
Considerations:
- Very large sites: Split by section
- Too many links: Prioritize
- User experience: Keep manageable
Goal: Helpful, not overwhelming.
Linking to HTML Sitemap
Footer Link
<footer>
<nav>
<a href="/sitemap/">Sitemap</a>
<a href="/privacy/">Privacy</a>
<a href="/terms/">Terms</a>
</nav>
</footer>
Standard footer placement.
XML Sitemap Reference
In robots.txt:
Sitemap: https://example.com/sitemap.xml
HTML sitemap doesn't go in robots.txt.
Accessibility
Screen Reader Friendly
<nav aria-label="Site map">
<h1>Complete Site Map</h1>
<section aria-labelledby="pages-heading">
<h2 id="pages-heading">Pages</h2>
<ul>
<li><a href="/about/">About Us</a></li>
</ul>
</section>
</nav>
Proper landmarks and labels.
Skip Links
<a href="#sitemap-content" class="skip-link"> Skip to sitemap content </a>
<main id="sitemap-content">
<!-- Sitemap content -->
</main>
HTML Sitemap Checklist
Structure:
☐ Logical organization
☐ Clear categories
☐ Hierarchical layout
☐ All important pages included
Technical:
☐ Valid HTML
☐ Accessible markup
☐ Mobile responsive
☐ Fast loading
SEO:
☐ Linked from footer
☐ Proper title/meta
☐ Internal links working
☐ Updated regularly
Maintenance:
☐ Add new pages
☐ Remove deleted pages
☐ Check for broken links
☐ Review organization
Kesimpulan
HTML sitemap masih valuable untuk user navigation dan SEO. Create organized, well-structured sitemap page dan link dari footer. Keep it updated seiring website berkembang.
Ditulis oleh
Hendra Wijaya
Artikel Sebelumnya
Cara Membuat SEO Report untuk Klien
Artikel Selanjutnya
Cara Membuat Sitemap XML untuk Website: Tutorial Lengkap