티스토리 블로그 , 글 페이지에 글 수정 날짜 표시하는 방법

글 수정 날짜 표시 방법

티스토리 블로그의 글을 작성하거나 홈페이지의 글을 작성한 후 추가적으로 글을 수정하는 경우가 있습니다. 이 때 마지막으로 수정한 날짜를 표시해주는 간단한 글 수정날짜 표시 코드 작성 방법입니다. 글을 작성하고 정보가 변경되거나 글의 내용이 수정될 경우 해당 글의 수정 날짜를 방문자에게 안내하는 것은 글의 신뢰도를 높이는 중요한 요소입니다.

한 번 작성한 글이 오랜 기간 동안 업데이트되지 않으면 방문자는 정보의 신뢰도에 의문을 갖게 되며, 최신 정보로 업데이트한 작업의 보람이 없어질 수 있습니다. 따라서 글을 작성한 후 업데이트가 이루어진 경우 방문자에게 적극적으로 글을 수정한 날짜를 알리는 것은 글의 신뢰도를 높이는 중요한 방법이며, 검색 엔진 최적화에도 긍정적인 영향을 미칩니다.

글을 최초 작성하거나 수정하면 해당 정보는 HTML 메타 데이터에 기록됩니다. 이 기록을 통해 검색 엔진은 문서의 최초 발행일과 수정된 날짜에 대한 정보를 수집할 수 있습니다.

그러나 대부분 글 페이지에 발행일은 표시되어 있지만 수정 날짜는 표시되지 않는 경우가 있어, 방문자가 실제로 언제 수정되었는지를 알 수 없는 경우가 있습니다. 따라서 검색 엔진이 수집하는 메타 데이터 정보를 기반으로 글수정 날짜를 표시해주는 코드 적용 방법입니다.

코드 작성

메타 데이터 정보 수집

글수정 날짜를 표시하기 위해서 메타테그의 정보를 불러오는 코드입니다.

// 페이지가 로드되면 실행될 함수를 등록합니다.
document.addEventListener('DOMContentLoaded', function() {
    // 메타 태그에서 수정 날짜 가져오기
    const metaModifiedTime = document.querySelector('meta[property="article:modified_time"]')?.getAttribute('content');
    
    // JSON-LD 스크립트에서 수정 날짜 가져오기
    const jsonLdScript = document.querySelector('script[type="application/ld+json"]');
    const jsonLdData = JSON.parse(jsonLdScript?.innerText || '{}');

수정 날짜 변환

메타태그의 정보를 글 수정날짜 형태의 코드로 변환해서 년,월.일로 표시를 해줍니다.

// 메타 태그에서 가져온 수정 날짜 또는 JSON-LD 데이터에서 가져온 수정 날짜를 최종 수정 날짜로 결정합니다.
    const lastUpdatedDate = metaModifiedTime || jsonLdData.dateModified;

    // 최종 수정 날짜가 존재할 경우, 해당 날짜를 한국식 날짜 형식으로 포맷팅하여 페이지의 특정 요소에 표시합니다.
    if (lastUpdatedDate) {
        const formattedDate = new Date(lastUpdatedDate).toLocaleDateString('ko-KR', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        });

        const lastUpdatedElement = document.querySelector('.last-updated-date');
        if (lastUpdatedElement) {
            lastUpdatedElement.innerText = `최종 수정일: ${formattedDate}`;
        }
    }
});

글 수정 날짜 출력

글페이지 수정된 날자를 표시해 주고 싶은곳에 아래 수정된 날자의 정보 코드를 넣어주시면 글페이지의 수정된 날짜의 정보가 보이게 됩니다.

<span class="Last-Published-Date"></span>

전체 코드

아래는 글수정 날짜를 표시해주는 전체 코드입니다 이코드를 HTML 코드 BODY 부분 상단에 넣어주시면 됩니다.

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

    if (lastUpdatedDate) {
        const formattedDate = new Date(lastUpdatedDate).toLocaleDateString('ko-KR', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        });

        const lastUpdatedElement = document.querySelector('.last-updated-date');
        if (lastUpdatedElement) {
            lastUpdatedElement.innerText = `최종 수정일: ${formattedDate}`;
        }
    }
});

</script>

적용 방법

스크립트 코드 적용

위에 글수정 날짜 표시 전체 코드를 HTML BODY부분에 적당한 위치에 넣어주시면 됩니다.

HTML코드 적용 예시

표시 코드 적용

티스토리 블로그는 HTML 코드 편집에서 검색을 하셔서 아래 글 제목 코드를 검색하시거나 글 페이지 부분의 코드에 글 페이지 수정 날짜를 표시하고 싶은곳에 넣어주시면 됩니다.

✔ 검색 코드 예시

<h1>티스토리 블로그 , 글 페이지에 글 수정 날짜 표시하는 방법</h1>

✔ 적용 코드 예시

<span class="Last-Published-Date"></span>

✔ 코드 예시

글수정 코드 표시 설정

위와 같은 방법으로 글수정한 날짜를 간단한 코드를 이용해서 방문자에게 글의 정보에 대한 신뢰도를 높이고 검색엔진의 최적화에 긍정적인 요소를 부여해서 검색 노출에 조금이라도 도움이 됬으면 합니다.