Salin dan Bagikan
SEO
Cara Membuat Sitemap HTML untuk SEO - Panduan lengkap cara membuat sitemap HTML untuk membantu user dan search engine navigate website …

Cara Membuat Sitemap HTML untuk SEO

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.

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>
  <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.

<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.

Artikel Terkait

Link Postingan : https://www.tirinfo.com/cara-membuat-sitemap-html-seo/

Hendra WIjaya
Tirinfo
3 minutes.
7 January 2026