티스토리 날짜 표시 최종 수정일로 나오게 하는 방법

아무리 검색해봐도 없어서 내가 직접 코드를 짜고 포스팅한다. 티스토리에서 날짜 표시를 발행일이 아닌 최종 수정일로 나오게 하는 방법이다. 스킨 소스에 자바 스크립트 코드를 추가하여 간단히 적용할 수 있다.

워드프레스에서 날짜를 최종 수정일로 표시하는 방법은 지난번에 이미 적용을 했었는데, 정작 티스토리에서 해보려다보니 생각보다 어려워서 한참 헤맸다. 티스토리에서는 최초 발행일에 대해서는 치환자가 있는데, 수정 날짜는 치환자가 없어서 별도로 정보를 추출하는 약간의 코딩이 필요하다.

최종 수정일 날짜 정보 추출

일단 발행해놓은 예전 글 하나를 수정해서 다시 공개를 눌러보자. 그러면 이제 최초 발행일과 다른 수정날짜 정보가 생성이 되었다.

view-source:페이지 주소url 형태로 크롬 주소창에 입력하면 해당 페이지의 소스 정보를 볼 수 있다.

<meta property="article:modified_time" content="2023-12-03T23:32:56+09:00"/>

소스를 보면 위와 같은 코드가 들어있는 것을 찾을 수 있는데, modified_time 즉 마지막으로 수정한 날짜와 시간 정보를 표시하는 부분이다.

<!-- BEGIN STRUCTURED_DATA -->
<script type="application/ld+json">
    {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"페이지 주소","name":null},"url":"페이지 주소","headline":"글 제목","description":"디스크립션","author":{"@type":"Person","name":"작성자","logo":null},"image":{"@type":"ImageObject","url":"이미지url 주소","width":"800px","height":"800px"},"datePublished":"20230825T23:34:08","dateModified":"20231203T23:32:56","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"이미지 url주소","width":"800px","height":"800px"}}}
</script>
<!-- END STRUCTURED_DATA -->

또 한가지는 이렇게 STRUCTURED_DATA 라는 부분을 보면, datePublished와 dateModified 두 가지 날짜시간 정보가 포함되어 있는 부분이 있다.

별도의 치환자가 없기 때문에 페이지 소스에서 이러한 정보들을 불러와서 최종 수정일로 표시되도록 만들어주어야 한다.

티스토리 스킨 수정

티스토리 스킨수정에서 다음과 같이 고쳐준다.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var metaModifiedTime = document.querySelector('meta[property="article:modified_time"]').getAttribute('content');
    var jsonLdScript = document.querySelector('script[type="application/ld+json"]');
    var jsonLdData = JSON.parse(jsonLdScript.innerText);

    var lastUpdatedDate = metaModifiedTime || jsonLdData.dateModified;

    // 날짜 형식을 원하는 방식으로 변환 (예: YYYY-MM-DD)
    var formattedDate = new Date(lastUpdatedDate).toLocaleDateString('ko-KR');

    // 최종 수정 날짜를 표시할 요소 찾기
    var lastUpdatedElement = document.querySelector('.last-updated-date');
    if (lastUpdatedElement) {
        lastUpdatedElement.innerText = '최종 수정일 : ' + formattedDate;
    }
});
</script>

먼저 위의 코드를 skin.html에서 </body> 앞쪽에 넣어주도록 한다. modified_time 정보를 불러와서 날짜를 추출하고, 그 정보를 지정해놓은 클래스에 표시하도록 하는 자바스크립트 코드이다.

<최종 수정일 : 2023. 12. 14> 형태로 표시가 되니 표현되는 문구를 바꾸고 싶다면 소스에서 글자 부분을 원하는 대로 고치면 된다. 만약 날짜 부분을 2023-11-26 과 같은 형태로 나타내고 싶다면 아래 코드로 넣는다.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var metaModifiedTime = document.querySelector('meta[property="article:modified_time"]').getAttribute('content');
    var jsonLdScript = document.querySelector('script[type="application/ld+json"]');
    var jsonLdData = jsonLdScript ? JSON.parse(jsonLdScript.innerText) : null;

    var lastUpdatedDate = metaModifiedTime || (jsonLdData ? jsonLdData.dateModified : null);

    if (lastUpdatedDate) {
        // 날짜 형식을 YYYY-MM-DD 형식으로 변환
        var formattedDate = new Date(lastUpdatedDate).toISOString().split('T')[0];

        // 최종 수정 날짜를 표시할 요소 찾기
        var lastUpdatedElement = document.querySelector('.last-updated-date');
        if (lastUpdatedElement) {
            lastUpdatedElement.innerText = 'Last updated on ' + formattedDate;
        }
    }
});
</script>

그 다음 포스팅 작성 날짜가 표시되는 부분의 위치를 찾는다. 페이지에서 크롬 F12를 눌러 개발자도구를 연 뒤 엘리먼트 선택으로 (단축키 Ctrl+Shift+C) 어떤 id나 class 명으로 날짜 표시 부분이 지정되어 있는지 찾는다.

그 부분을 skin.html 에서 위치하는 부분을 찾은 다음에 지우고 아래 코드로 변환해준다.

<span class="last-updated-date"></span>

span 태그 안에 아무런 내용이 없는데, 클래스명으로 지정해놔서 자바스크립트에서 출력하도록 짜놓은 값이 여기에 나타나게 된다.

이렇게 하면 티스토리에서도 최종 수정일 기준으로 날짜를 표시할 수 있다. 단, 글목록 부분에서는 치환자가 달라서 이렇게 스킨 수정을 해도 먹히지 않는다. 글목록에 해당하는 치환자 부분에도 별도로 최종 수정일이 표시되도록 해야하는데, 코드를 짜서 입력해도 바뀌지 않고 날짜가 통째로 안보이는 현상이 생겨서 실패했다.

워드프레스 때처럼 최종 수정일 기준으로 글목록 정렬을 하려는 건 아니니 일단은 이대로 놔둬야겠다. 개별 포스팅 페이지에서는 최종 업데이트 날짜로 보이기에 검색엔진이 크롤링해서 주기적으로 반영할것이다.