[1] 검색 노출을 위한 작업

1. 블로그를 검색 결과에 노출되도록 하기 위해서, 각 검색 엔진의 웹 마스터 도구에 웹 페이지를 등록해야 함
2. Google, Bing, Naver, Daum 등 각종 검색 서비스에는 각각의 웹 마스터 도구가 존재하는데, 이런 웹 마스터 도구가 요구하는 사항에 맞춰 등록해주어야 함.
3. 등록된 사이트는 검색 노출을 최적화 할 수 있도록 여러 모니터링 도구를 제공받을 수 있고, 이에 맞춰 검색 엔진 최적화 작업을 진행할 수 있음.

[2] **Google Search Console 사용하기**

1. 두 가지 옵션 중 한 가지를 선택할 수 있는데, 도메인의 경우에는 모바일 사이트를 따로 제공하는 경우나 http/https를 모두 사용하는 경우와 같을 때를 위한 옵션.
2. 하지만 현재 작업한 블로그 프로젝트는 오직 https 프로토콜만 사용하며, 반응형 디자인이 적용된 페이지를 제공하므로 별도의 모바일 전용 페이지가 존재하지 않음.
3. URL 접두어 옵션을 통해 진행
   1. URL에 https://17-sss.github.io/ 를 입력 → 계속 클릭.
   2. 이후 소유권 확인하기 위한 창이 뜸. 구글 웹 마스터 도구의 경우에는 소유권 확인을 위해 여러 방법을 제공하지만, 이 프로젝트는 HTML 태그를 추가하는 방법으로 소유권 확인을 진행.

      1. 소유권 확인 창

         

      2. 추가 설명에 따르면 Meta 태그를 head 태그 내에 복사/붙여넣기를 하여 배포하면 된다고 나오는데, 이 프로젝트는 Meta 태그를 Template 컴포넌트 한 곳에 모아서 관리를 하기 때문에 추가하기 쉬움. (위 소유권 확인 창에서 HTML 태그 클릭하여 정보확인 후 진행)

      3. Template 컴포넌트에 Meta 태그를 추가한 후, 새로 배포src/components/Common/Template.tsx (네이버 웹 마스터까지 등록해서 하려면 이 코드가 아닌 아래의 코드를 반영하기.)

         ...
         
         const Template: FunctionComponent<TemplateProps> = function ({
           title,
           description,
           url,
           image,
           children,
         }) {
           return (
             <Container>
               <Helmet>
                 <title>{title}</title>
         
                 <meta name="description" content={description} />
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
         
                 <meta property="og:type" content="website" />
                 <meta property="og:title" content={title} />
                 <meta property="og:description" content={description} />
                 <meta property="og:image" content={image} />
                 <meta property="og:url" content={url} />
                 <meta property="og:site_name" content={title} />
         
                 <meta name="twitter:card" content="summary" />
                 <meta name="twitter:title" content={title} />
                 <meta name="twitter:description" content={description} />
                 <meta name="twitter:image" content={image} />
                 <meta name="twitter:site" content="@username" />
                 <meta name="twitter:creator" content="@username" />
         
                 <meta
                   name="google-site-verification"
                   content="웹 마스터 도구가 제공하는 Meta 태그"
                 />
         
                 <html lang="ko" />
               </Helmet>
         
               <GlobalStyle />
               {children}
               <Footer />
             </Container>
           );
         };
         
         export default Template;
         

      4. main 브랜치에 배포하고, dev 브랜치도 커밋하기. (main은 배포 브랜치, dev 브랜치는 코드들)

   3. 소유권 확인은 시간이 좀 지나고 반영됨. 확인 버튼을 누르시면 소유권 확인이 완료되어 해당 속성으로 이동할 수 있는 링크가 뜨며, 추가한 페이지의 대시보드에서 Sitemap 링크를 추가.
      1. 기본적으로 사이트맵 링크는 https://[username].github.io/sitemap/sitemap-index.xml이므로 sitemap/sitemap-index.xml 을 입력한 후 제출

[3] **Naver Search Advisor 사용하기**

1. 로그인 후, "웹 마스터 도구" 클릭.

   

2. Google Search Console에 등록했던 것 처럼 링크 등록하면 소유권 확인 절차를 진행하게 됨.

   

3. 여기서도 Google Search Console에 했던 것처럼 Meta 태그를 추가하는 방법을 선택

4. Template 컴포넌트에 Meta 태그 추가 src/components/Common/Template.tsx

   ...
   
   const Template: FunctionComponent<TemplateProps> = function ({
     title,
     description,
     url,
     image,
     children,
   }) {
     return (
       <Container>
         <Helmet>
           <title>{title}</title>
   
           <meta name="description" content={description} />
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <meta httpEquiv="Content-Type" content="text/html;charset=UTF-8" />
   
           <meta property="og:type" content="website" />
           <meta property="og:title" content={title} />
           <meta property="og:description" content={description} />
           <meta property="og:image" content={image} />
           <meta property="og:url" content={url} />
           <meta property="og:site_name" content={title} />
   
           <meta name="twitter:card" content="summary" />
           <meta name="twitter:title" content={title} />
           <meta name="twitter:description" content={description} />
           <meta name="twitter:image" content={image} />
           <meta name="twitter:site" content="@username" />
           <meta name="twitter:creator" content="@username" />
   
           <meta
             name="google-site-verification"
             content="웹 마스터 도구가 제공하는 Meta 태그"
           />
           <meta
             name="naver-site-verification"
             content="웹 마스터 도구가 제공하는 Meta 태그"
           />
   
           <html lang="ko" />
         </Helmet>
   
         <GlobalStyle />
         {children}
         <Footer />
       </Container>
     );
   };
   
   export default Template;
   

   1. 위 작업 후, main 브랜치에 배포 & dev 브랜치에 코드 변경 사항 커밋하기. (커밋 예시)

      git add .
      git commit -m "Append Meta Tag For Naver Search Advisor"
      git push origin develop
      npm run deploy
      

   2. 변경사항이 반영되면 "소유확인" 버튼을 눌러 계속 진행.

5. 소유권 확인 과정이 마무리되면, Sitemap 제출을 위해 좌측의 요청 → 사이트맵 제출 메뉴를 클릭

   1. 사이트맵 제출 화면이 보인다면 입력 칸에 sitemap/sitemap-index.xml을 작성한 후, 확인 버튼 클릭

참고자료

• 구름 Edu - 누구나 블로그 개발 할 수 있다! React 기반 Gatsby로 기술 블로그 개발하기
  • 웹 마스터 도구에 블로그 등록하기