블로그 운영/블로그 현황

새로운 블로그로 이사중, 고민사항 정리(Redirect 등)

ProDA 2022. 9. 8.

새로운 블로그로 이사중이다.

 

Oracle cloud intance에 워드프레스를 설치하고 .com 도메인을 구매하여 연결했다.

새로운 블로그 주소는 https://prodskill.com/ 이다.

새로운 블로그
새로운 블로그 https://prodskill.com/

 

 

워드프레스 설치와 환경구성은 이 글이 큰 도움이 되었다.

IT REPORT WORLD | 0. 오라클 클라우드에서 Ubuntu LEMP(Linux+Nginx+MariaDB+PHP7)에 WORDPRESS 설치하기 (tistory.com)

 

0. 오라클 클라우드에서 Ubuntu LEMP(Linux+Nginx+MariaDB+PHP7)에 WORDPRESS 설치하기

많은 분들이 개인 홈페이지 구축 또는 쇼핑몰 사이트를 운영하기 위하여 호스팅 사이트에서 WORDPRESS를 이용하고 있습니다. 호스팅 사이트를 이용하다보면 php 환경 및 DB 환경 등 여러 환

itreport.tistory.com

 

 

환경구성은 어느정도 되었고, 마무리하면서 몇가지 고민했던 사항에 대해 정리해 둔다.

 

목차


     

    1. 새로운 블로그 이름

    이 블로그를 처음 만들때는 그동안 취미삼아 써둔 글과 만들어 둔 DA(Data Architecture) 관련 도구를 소개하는 의미에서 "취미로 코딩하는 DA"로 이름을 작성했었다. "코딩"의 의미를 "취미"에서 "생산성"으로 확장하여 새로운 블로그의 이름은 "생산성 Skill"로 정했다.

     

     

    2. 글 옮기기

    이 블로그(티스토리)의 글 중 엑셀 VBA와 DA 도구에 관련된 글들은 새로운 블로그(https://prodskill.com/)로 옮길 생각이다. 모든 글을 옮길 건 아니라서, 자동으로 하기보다는 시간 날때 조금씩 한땀한땀 수작업으로 옮기는 중이다.

     

     

    3. 이 블로그(티스토리) 계속 유지 여부

    아직은 정하지 않았다. 일단 새로운 블로그(https://prodskill.com/)로 모든 글을 옮길 때까지는 계속 유지할 예정이다.

     

     

    4. Redirect

    이 블로그를 방문하면 새로운 블로그와 새로운 글로 자동으로 Redirect하고자 다음과 같이 작업해 두었다.

    (2022-09-14, Redirect를 비활성화해두었다. 아래 내용은 현재 동작하지 않는다. 다시 동작하도록 하면 내용 변경해 두겠다.)

    (2022-10-10, Redirect를 다시 활성화했다.)

     

    4.1. slug mapping json 파일 작성

    key는 이 블로그의 slug인 글 번호, value는 새 블로그의 slug로 설정한 json 파일을 만들고 티스토리 스킨 편집에서 upload해 두었다.

    slug_map = {
      "2": "job-scheduling-using-1d-bin-packing-algorithm-1/"
     ,"3": "job-scheduling-using-1d-bin-packing-algorithm-2/"
     ,"4": "job-scheduling-using-1d-bin-packing-algorithm-3/"
     ...
    }
    
    * 참고: 일부 발췌한 내용이고, 글을 옮길때마다 계속 추가됨

    * upload 파일명: /images/slug_map.json

     

    4.2. 스킨 HTML 수정

    현재 사용하고 있는 미넴스킨을 기준으로 다음과 같이 수정해 놓았다.

    4.2.1. 안내 문구 표시 영역 설정

    스킨 HTML 파일 2200행에 다음과 같이 <div> 태그를 추가했다.

    <div id="redirect-notice" style="display:none;"></div>

     

    스킨 HTML 내용에 안내 문구 표시 영역 <div> tag 추가

     

    4.2.2. 안내 문구 표시, Redirect 구현(JavaScript)

    slug mapping json 파일에 새 블로그의 글 주소가 지정되어 있는 경우에 다음과 같이 처리하는 코드를 JavaScript로 구현했다.

    • slug mapping json 파일에 새 블로그의 글 주소가 지정되어 있는지 확인
    • 새 블로그의 글이 있다면 안내 문구를 표시하고 5초 후 해당 글로 Redirect
      (새 블로그로 이전 완료후 5초 지연시간 제거 예정)
    • 5초 내에 "(이동취소)"를 클릭하면 Redirect하지 않도록 처리
    • 초기(홈) 화면과 글 화면의 안내 문구를 조금 다르게 표시

     

    slug mapping json 파일에 새 블로그의 글 주소가 지정되어 있지 않은 경우, 즉 아직 글을 새 블로그로 옮기기 전이거나 옮기지 않을 글인 경우는 안내 문구를 표시하지 않는다.

     

    Redirect를 구현하는데 다음 글을 참고하였다.

    92. (javascript/자바스크립트) 로컬에 json 파일 저장 및 저장된 json 파일 로드 실시 (tistory.com)

     

    92. (javascript/자바스크립트) 로컬에 json 파일 저장 및 저장된 json 파일 로드 실시

    /* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* ===============..

    kkh0977.tistory.com

     

    구현한 JavaScript 코드는 다음과 같다. JavaScript는 잘 알지 못해서 동작하도록만 구현했다. 잘 만들어진 코드인지는 모르겠다.

      <script type="text/javascript" src="./images/slug_map.json"></script>
      <script>
        /* Redirect 처리 (참고: https://kkh0977.tistory.com/975)
        [JS 요약 설명]
        1. window.onload : 웹페이지 로드 완료 상태를 나타냅니다
        2. JSON.stringify : json 형식 데이터를 문자열로 나타내줍니다
        3. JSON.parse : json 데이터를 파싱해서 사용합니다
        4. 참고 : 로컬에 저장되는 json 파일에서 특정 변수명을 지정해줘야 정상적으로 json 파일을 로드할 수 있습니다    
        */
    
        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            doCheckRedirect();
        };
    
        function sleep(msec) {
          return new Promise(resolve => setTimeout(resolve, msec));
        } // 함수정의
    
        /* Redirect 대상 페이지인지 확인하고 처리 */
        function doCheckRedirect(){
          // console.log("");
          // console.log("[doCheckRedirect] : [start]"); 
          // console.log("");
    
            var new_dom = "https://prodskill.com/"
            var new_url = "";
            var cur_slug = window.location.pathname.substring(1);
            // console.log("cur_slug: " + cur_slug);
            if (!cur_slug || cur_slug == null) {  // 초기 화면
              // console.log("new_slug: " + "");
              new_url = new_dom;
            }
            var isHome = (new_url == new_dom)
            if (cur_slug) { // 주소 있음
              //로컬 assets 파일에 저장된 json 파일 읽기
              var jsonData = JSON.parse(JSON.stringify(slug_map));
              new_slug = jsonData[cur_slug];
              if (new_slug) { // maching되는 new_slug가 있는 경우
                var new_url = new_dom + new_slug;
              }
            }
            if (new_url != "") {
              // console.log("new_slug: " + new_slug);
              // console.log("new_url: " + new_url);
              // ---------- redirect-notice 설정 ----------
              doRedirectTimeoutID = setTimeout(function() {
                doRedirect(new_url);
                }, 5000);
    
              var msg_element = document.getElementById("redirect-notice");
              msg_element.style.display = "block";
              if (isHome) { // 홈 화면의 메시지
                msg_element.innerHTML = `
    <p>새로운 블로그로 이사중입니다. 아직은 완료되지 않았고, 글을 하나씩 천천히 옮기고 있습니다.</p>
    <p>5초후 자동으로 이동합니다. <button id="redirect-cancel" type="button" style="color: red; font-size: 0.85em;" onclick="cancelRedirect(${doRedirectTimeoutID})">(이동취소)</button></p>
    <p>&nbsp;</P>
    <p data-ke-size="size14"> ▶ 새로운 블로그 주소: <a href="${new_dom}">${new_dom}</a><p>
    `;
              }
              else {
                msg_element.innerHTML = `
    <p>새로운 블로그로 이 글을 옮겼습니다.</p>
    <p>5초후 자동으로 이동합니다. <button id="redirect-cancel" type="button" style="color: red; font-size: 0.85em;" onclick="cancelRedirect(${doRedirectTimeoutID})">(이동취소)</button></p>
    <p>&nbsp;</P>
    <p data-ke-size="size14"> ▶ 새로운 블로그 주소: <a href="${new_dom}">${new_dom}</a><p>
    <p data-ke-size="size14"> ▶ 새로운 글 주소: <a href="${new_url}">${new_url}</a><p>
    `;
              }
            }
        };
    
          function doRedirect(new_url) {
            window.location.replace(new_url);
            //console.log("doRedirect new_url: " + new_url);
          }
    
          function cancelRedirect(id) {
            clearTimeout(id)
            // console.log("이동이 취소되었습니다.");
            var btn_element = document.getElementById("redirect-cancel");
            btn_element.style.color = "blue";
            btn_element.innerHTML = "(이동이 취소되었습니다.)";
          }
      </script>

     

    위 구현에 따라 다음과 같이 안내문구가 표시된다.

     

    ▼ 블로그 홈 안내문구

    블로그 홈 안내문구
    블로그 홈 안내문구

     

    ▼ 블로그 홈 안내문구에서 "이동취소"를 클릭한 경우

    블로그 홈 안내문구에서 &quot;이동취소&quot;를 클릭한 경우
    블로그 홈 안내문구에서 "이동취소"를 클릭한 경우

     

    ▼ 각 글 안내문구

    각 글 안내문구
    각 글 안내문구

     

     

    ▼ 각 글 안내문구에서 "이동취소"를 클릭한 경우

    각 글 안내문구에서 &quot;이동취소&quot;를 클릭한 경우
    각 글 안내문구에서&nbsp;"이동취소"를&nbsp;클릭한&nbsp;경우

     

     

    5. 새 블로그 Google search console에 등록(중복 콘텐츠 방지)

    이 블로그의 글을 당분간 유지한 상태에서 새 블로그를 Google search console에 등록하면 중복 콘텐츠로 검색결과에서 제외될 수 있다.

    * 참고: 중복 콘텐츠 방지 | Google 검색 센터  |  문서  |  Google Developers

     

    중복 콘텐츠 방지 | Google 검색 센터  |  문서  |  Google Developers

    중복 콘텐츠는 도메인 내 또는 도메인 간에 일치하는 콘텐츠를 의미합니다. 중복 콘텐츠가 웹사이트의 검색엔진 최적화에 미칠 수 있는 영향과 이를 방지하는 방법을 알아보세요.

    developers.google.com

     

    위 문서 내용 중 일부를 아래에 발췌해 둔다.

    Google은 고유한 정보가 포함된 페이지의 색인을 생성하고 이러한 페이지를 표시하기 위해 노력하고 있습니다. 예를 들어 필터링이란 각 문서에 '일반' 버전과 '인쇄' 버전이 있고 어느 버전도 noindex 태그로 차단되지 않은 경우 Google에서 하나만 선택하여 표시하는 것을 말합니다. 또한 드문 경우지만 중복 콘텐츠가 Google 순위를 조작하거나 사용자를 속이기 위해 표시되는 것으로 판단될 경우 Google에서 관련 사이트의 색인 및 순위를 적절하게 조정할 수도 있습니다. 그 결과, 사이트 순위가 하락하거나 사이트가 Google 색인에서 완전히 삭제되어 검색결과에 더 이상 나타나지 않을 수도 있습니다.

     

    새 블로그로 옮긴 글이 중복 콘텐츠로 판단되지 않도록 하기 위해 다음과 같이 하려고 한다.

    1. google search console에서 이 블로그 속성(https://prodtool.tistory.com) 삭제
    2. 이 블로그 방문자를 새 블로그로 Redirect (목차 <4.2.2>에서 구현함)
    3. google search console에서 새 블로그 속성(https://prodskill.com) 추가
    4. 기존 블로그 글 색인 방지(<meta noindex> 태그 사용)

     

    기존 블로그 속성을 삭제하더라도 구글 검색에서 영구적으로 제외되는 것은 아니고, 시간이 지나면 다시 색인된다고 하여 <meta noindex>로 재색인되지 않도록 할 생각인다.

     

    * 참고: 이 자료도 나중에 읽고 내용을 보완할 예정이다.

    표준 태그를 사용해 중복 URL 통합 | Google 검색 센터  |  문서  |  Google Developers

    자바스크립트 검색엔진 최적화의 기본사항 이해하기 | Google 검색 센터  |  문서  |  Google Developers

     

    댓글

    💲 추천 글