호스팅 중인 블로그에 더 많은 유저의 유입을 원한다면 사이트맵을 검색 엔진에 등록하자. 유저 유입의 가능성을 높일 수 있다.

개츠비로 작성한 사이트는 플러그인으로 쉽게 사이트맵을 생성할 수 있다.

검색 엔진은 여러 알고리즘을 사용해 검색어와 적합한 사이트 분류, 노출 순위 조정 등의 작업을 한다. 여기에 사용되는 것들 중 하나가 사이트맵이다. 사용자로부터 사이트맵이 등록되면 검색 엔진은 해당 사이트를 더 효율적으로 크롤링 및 분석한다.

사이트맵의 내용

사이트맵은 기본적으로 주소와 구조를 포함하는데 이 외에도 이미지, 동영상, 뉴스 등을 포함할 수 있다. 또한 노출이 필요없는 중요하지 않는 페이지가 있다면 사이트맵에서 제외하면 된다.

사이트맵 샘플

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
      <loc>http://www.example.com/</loc>
      <lastmod>2005-01-01</lastmod>
      <changefreq>monthly</changefreq>
      <priority>0.8</priority>
   </url>
</urlset>

필수 태그 : urlset, url, loc
선택 태그 : lastmod, changefreq, priority
규격 링크 : https://www.sitemaps.org/protocol.html

참고

검색 엔진에 사이트맵을 등록한 것만으로 내 사이트를 모든 내용이 검색 엔진에 노출되고, 드라마틱하게 유저 유입이 증가되지는 않는다. 검색 엔진의 사이트 노출은 다양한 요소와 많은 알고리즘으로 동작하고 사이트맵 처리에도 여러 예외가 있기 때문이다. 노출을 높일 수 있는 방법을 찾아 지속적으로 관리하는 것이 필요하다.

개츠비 사이트맵 적용하기

이제 본론인 개츠비 플러그인을 적용해보자.

플러그인

이름 : gatsby-plugin-sitemap
링크 : https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/

플러그인 설치

npm install --save-dev gatsby-plugin-sitemap

플러그인 설정

gatsby-config.js 파일을 수정

module.exports = {
  // siteMetadata에 siteUrl을 추가. siteUrl 추가를 원하지 않은 경우 사이트맵 플러그인 설정에서 resolveSiteUrl를 사용해도 된다.
  siteMetadata: {
    ...
    siteUrl: 'https://www.example.com',
  },

  // 사이트맵 플러그인 추가
  plugins: [
      ...
      'gatsby-plugin-sitemap',
  ]  
}

사이트맵 생성

npm run build

사이트맵 확인하기

경로 : public/sitemap/sitemap-index.xml
생성된 사이트맵의 경로를 구글 검색 콘솔에서 등록하면 된다.

추가 : 사이트맵에 <lastmod> 추가하기

위의 설정만으로도 사이트맵은 생성되고 이렇게 생성되는 사이트맵은 <loc>, <changefreq>, <priority> 태그들을 포함한다. 이 절에서는 플러그인 설정을 수정해서 사이트맵에 <lastmod> 태그를 추가하는 것을 해볼 것이다. 기본 예제는 공식사이트의 사이트맵 플러그인 설명에서 제공하고 있다.

나는 마크다운과 gatsby-transformer-remark 플러그인을 사용하고 있기 때문에, 마크타운에 lastmod에 사용할 값을 추가하고 이를 graphql로 조회해서 사이트맵에 추가하는 작업을 했다.

마크타운 파일

---
title: 테스트 페이지
lastmod: 2022-09-10---
...

플러그인 설정 (gatsby-config.js)

module.exports = {
  ...
  plugins: [
    ...
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }  
            allMarkdownRemark {
              nodes {
                fields {
                  slug
                }
                frontmatter {
                  lastmod                }
              }
            }
          }
        `,
        resolveSiteUrl: () => 'https://www.example.com',
        resolvePages: ({ allMarkdownRemark: { nodes: allMarkdownPages } }) => {
          const pages = allMarkdownPages.map((page) => {
            return {
              path: page.fields.slug,
              modified: page.frontmatter.lastmod,            }
          })
          return [...pages]
        },
        serialize: ({ path, modified }) => {
          return {
            url: path,
            lastmod: modified,            changefreq: 'daily',
            priority: 0.7,
          }
        },
      },
    },
  ...
  ],
}

결과 (sitemap 내용 일부)

<?xml version="1.0" encoding="UTF-8"?>
<urlset
	xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
	xmlns:xhtml="http://www.w3.org/1999/xhtml"
	xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
	xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>https://www.example.com/test/01</loc>
		<lastmod>2022-09-10T00:00:00.000Z</lastmod>
		<changefreq>daily</changefreq>
		<priority>0.7</priority>
	</url>
</urlset>

개츠비(Gatsby) 사이트맵 적용하기

사이트맵

왜 필요한가

사이트맵 이란