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 pagesNot necessarily every page.
Keep Updated
Maintenance: - Add new pages - Remove deleted pages - Update categories - Automate if possiblePage Limits
Considerations: - Very large sites: Split by section - Too many links: Prioritize - User experience: Keep manageableGoal: 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.xmlHTML 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 includedTechnical: β 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.
