드디어 블로그에도 사이트맵이 반영됐다.

블로그 개시 이후 네이버 웹마스터 도구와 구글 서치 콘솔에 사이트 등록을 해놨는데 구글은 모든 페이지가 정상적으로 수집되는 반면, 네이버는 메인 페이지 말고 수집이 안 되는 문제가 있었다.

robots.txt 도 문제 없고, 웹페이지 수집 요청을 해도 안 되고 해서 골치를 겪다가 사이트맵이 문제인가 싶어 사이트맵 등록을 부랴부랴 했는데 이게 문제가 맞는진 모르겠다.

각설하고, Express 사용 시 사이트맵을 동적으로 사용하는 방법에 대해 알아보자.

Express를 사용 한 사이트맵 생성은 너무 간단하기 때문에 설명이 딱히 필요 없다.

app.get('/sitemap.xml', async (req, res) => {
  const host = req.get('host');

  // 이 사이트는 블로그이기 때문에 블로그 게시글을 API를 통해 가져오는 부분
  const response = await fetch('path-to-fetch-posts');

  const responseJson = await response.json();

  res.header('Content-Type', 'application/xml');
  res.send(generateSitemap(req.protocol, host, responseJson));
});

function generateSitemap(protocol: string, host: string | undefined, posts: any[]) {
  const currentDate = new Date().toISOString();

  // 사이트맵 선언
  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';

  // 여는 태그
  xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n';

  // 메인 페이지 url
  xml += '  <url>\n';
  xml += `    <loc>${protocol}://${host}</loc>\n`;
  xml += `    <lastmod>${currentDate}</lastmod>\n`;
  xml += `    <priority>1</priority>\n`;
  xml += '  </url>\n';

  // 각 게시글 url
  posts.forEach((_post) => {
    xml += '  <url>\n';
    xml += `    <loc>${protocol}://${host}/${_post.id}</loc>\n`;
    xml += `    <lastmod>${currentDate}</lastmod>\n`;
    xml += `    <priority>0.8</priority>\n`;
    xml += '  </url>\n';
  });

  // 닫는 태그
  xml += '</urlset>';

  return xml;
}

Express를 알고 사이트맵이 어떻게 구조화 되어 있는지 안다면 아마 쉽게 수정해서 쓸 수 있을 것이다.

근데 요즘은 이 정도의 정보는 AI 한테 물어보지 않을까? 🤔