포스팅을 구글 검색 결과에 노출 및 방문자 데이터 수집하기!

포스팅을 구글 검색 결과에 노출 및 방문자 데이터 수집하기!

이번 포스팅에서는 Gatsby의 plugin을 사용하여 Google Search Console, Google Analytics API를 추가하는 방법에 대해 이야기 할 것이다!

Google Search Console

Google Search Console은 Google의 검색 결과에 내 블로그 글을 노출하게 도와준다.

또한, 무료이며 매우 쉽다.

Google 검색 엔진은 크롤러를 사용하여 정기적으로 Google 색인에 추가할 사이트를 찾는다!

Google Search Console 그럼 링크에 들어가 바로 시작해보자!

URL 접두어에 도메인을 입력해주고 계속 버튼을 누른다!

그럼 소유권 확인 창이 뜨는데 소유권 확인은 총 5가지 방법으로 확인이 가능하다.

그 중 HTML 태그로 소유권을 확인해보겠다.

위의 meta tag를 복사하여 <head>섹션에 붙여넣는다!

블로그의 구성방식에 따라 다르겠지만, 대부분은 Layout의 Helmet 안에 meta tag를 포함한다.

import Helmet from 'react-helmet'

react-helmet module은 document의 head 섹션에 있는 내용을 쉽게 관리하게 도와주는 간단한 component이다!

참고 - 위 사진에서도 알 수 있듯 네이버 검색 엔진도 똑같은 방식으로 등록했지만, 네이버에서 소유권 확인을 못 한다. helmet을 써서 검색 엔진에서 파싱을 못 하는 듯하다…

meta tag를 무사히 저장하고 다시 build 하여 배포한 후 확인 버튼을 누르면 위와 같이 소유권을 확인할 수 있다.

Google Search Console에서 처리하는 데 시간이 조금 걸린다.

며칠 후에 site:binary01.me로 구글에 검색해보자~

Sitemap (option)

Sitemap은 웹사이트의 접근 가능한 페이지의 목록을 제공한다.

검색 엔진의 크롤러가 Sitemap에 접근이 가능하다면 크롤링을 더 효과적으로 할 수 있다.

binary01.me/sitemap.xml <- 블로그의 Sitemap

gatsby-config.js

{
    resolve: 'gatsby-plugin-sitemap',
    options: {
      query: `
        {
          site {
            siteMetadata {
              siteUrl: url
            }
          }
          allSitePage(
            filter: {
              path: { regex: "/^(?!/404/|/404.html|/dev-404-page/)/" }
            }
          ) {
            edges {
              node {
                path
              }
            }
          }
        }
      `,
      output: '/sitemap.xml',
      serialize: ({ site, allSitePage }) => allSitePage.edges.map((edge) => ({
        url: site.siteMetadata.siteUrl + edge.node.path,
        changefreq: 'daily', //페이지가 변경되는 빈도
        priority: 0.7 //해당 사이트의 기타 URL에 대한 특정 URL의 상대적 우선순위
      }))
    }
  },

gatsby-plugin-sitemap를 사용하여 build 시 자동으로 sitemap.xml파일이 생성되게 할 수 있다. 정의한 GraphQL type과 query로 data를 가져오고 각 페이지의 목록을 만들어준다.

마찬가지로, 다시 build 한 후 public 폴더에 sitemap.xml 파일이 생성된 것을 확인하고 위와 같이 Sitemap을 제출한다.

Google Analytics

Google Analytics는 웹사이트의 방문자가 어느 페이지를 방문했고, 얼마나 머물렀는지 등을 확인할 수 있는 웹 로그 분석 툴이다.

Google Analytics 왼쪽 링크도 이동하여 따라 해보자~

계정을 만든 후 웹 사이트 이름, URL 등을 적어준다. 그러면 추적 ID가 위 사진처럼 발급된 것을 확인할 수 있다.

gatsby-config.js

{
  resolve: 'gatsby-plugin-google-analytics',
  options: {
    trackingId: 'UA-15878****-1', //siteConfig.googleAnalyticsId
    head: true
  },
},

plugin을 사용하여, trackingId에 Google Analytics에서 발급받은 추적 ID를 넣어준다.

head: true로 설정함으로써 <head>에 <script>가 자동으로 추가되었다.

gatsby-plugin-google-analytics 링크에서 다른 Option들을 확인할 수 있다.

특정 Post를 클릭하면, Google Analytics에서 현재 활성 사용자가 있는 지 확인할 수 있다!

마무리

이번 포스팅에서는 Disqus API 이야기도 할 예정이었지만, 분량이 좀 많아 다음 포스팅에서 이야기해야 할 것 같다~

한 주를 아무것도 안 하고 푹 쉬었더니, 오히려 게을러 진 거 같다… 😥😥

충분히 쉬었고 이제 달려야겠다!!

다음 포스팅에서는 Disqus API와 Let’s Encrypt로 http에서 https로 전환하는 방법을 다루겠다! 😆😆