Skip to content

Sitemap.xml

sitemap.xml은 웹사이트 내 모든 페이지의 목록을 나열한 파일로 책의 목차와 같은 역할을 합니다. 사이트맵을 제출하면 일반적인 크롤링 과정에서 쉽게 발견되지 않는 웹페이지도 문제없이 크롤링되고 색인될 수 있게 해줍니다.

Single HTML Viewer

페이지 로드시 ./sitemap.xml 를 fetch 하여 모두 읽고, 파싱한 후 읽어서 Unordered List 로 출력해주는 html 파일 샘플 

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