Skip to content
Search

Sitemap.xml

lastmod 2025-04-11created 2025-02-125 edits

sitemap.xml is a file that lists all pages in a website, serving like a book's table of contents. Submitting a sitemap allows web pages that are not easily found during normal crawling to be crawled and indexed without problems.

Single HTML Viewer

A sample html file that, on page load, uses fetch to read all of ./sitemap.xml, parses it, and outputs it as an Unordered List 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>사이트맵 뷰어</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        ul {
            list-style-type: none;
            padding-left: 20px;
        }
        li {
            margin: 10px 0;
            padding: 5px;
            border-left: 2px solid #007bff;
            padding-left: 10px;
        }
        a {
            color: #007bff;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .loading {
            text-align: center;
            padding: 20px;
            font-style: italic;
            color: #666;
        }
        .error {
            color: #dc3545;
            padding: 10px;
            background-color: #f8d7da;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>사이트맵 뷰어</h1>
        <div id="sitemapContent">
            <div class="loading">사이트맵을 불러오는 중...</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sitemapContent = document.getElementById('sitemapContent');

            fetch('./sitemap.xml')
                .then(response => response.text())
                .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
                .then(data => {
                    sitemapContent.innerHTML = '';
                    const urls = data.getElementsByTagName('url');
                    if (urls.length === 0) {
                        // sitemap index인 경우 처리
                        const sitemaps = data.getElementsByTagName('sitemap');
                        if (sitemaps.length > 0) {
                            const ul = document.createElement('ul');
                            Array.from(sitemaps).forEach(sitemap => {
                                const loc = sitemap.getElementsByTagName('loc')[0]?.textContent;
                                if (loc) {
                                    const li = document.createElement('li');
                                    const a = document.createElement('a');
                                    a.href = loc;
                                    a.textContent = loc;
                                    li.appendChild(a);
                                    ul.appendChild(li);
                                }
                            });
                            sitemapContent.appendChild(ul);
                            return;
                        }
                    }

                    // 일반 sitemap 처리
                    const ul = document.createElement('ul');
                    Array.from(urls).forEach(url => {
                        const loc = url.getElementsByTagName('loc')[0]?.textContent;
                        if (loc) {
                            const li = document.createElement('li');
                            const a = document.createElement('a');
                            a.href = loc;
                            a.textContent = decodeURIComponent(loc);
                            // 추가 정보가 있다면 표시
                            const lastmod = url.getElementsByTagName('lastmod')[0]?.textContent;
                            if (lastmod) {
                                const span = document.createElement('span');
                                span.textContent = ` (마지막 수정: ${lastmod})`;
                                span.style.color = '#666';
                                span.style.fontSize = '0.9em';
                                li.appendChild(a);
                                li.appendChild(span);
                            } else {
                                li.appendChild(a);
                            }
                            ul.appendChild(li);
                        }
                    });
                    sitemapContent.appendChild(ul);
                })
                .catch(error => {
                    sitemapContent.innerHTML = `
                        <div class="error">
                            사이트맵을 불러오는 중 오류가 발생했습니다.<br>
                            sitemap.xml 파일이 현재 디렉토리에 있는지 확인해주세요.<br>
                            오류 메시지: ${error.message}
                        </div>
                    `;
                });
        });
    </script>
</body>
</html>

See also

Favorite site

author Zer0 sitemap