방문자 체류시간 늘리는 방법: 블로그 읽기 시간 표시 코드 - 구글 블로그 꾸미기 20

MikiLoves
MikiLoves
Update:

📌 블로그 글 읽기 시간 자동 표시하기 (블로그스팟 가젯 적용 방법)

사람들은 불확실한 상황을 싫어합니다.
식당 앞에서 얼마나 기다려야 하는지 모르는 상황이 싫고, 내가 가야하는 거리가 얼마인지 모르는 것도 싫습니다. 그런 불확실한 상황에서는 집중력이 떨어집니다.

블로그 글도 그렇습니다.
이 글이 얼마나 긴지, 얼마나 읽어야 할지 모르는 상황에는 무작정 스크롤을 내립니다.
그러다 눈에 띄는 부분이 생기면 그제서야 집중을 합니다.  

블로그를 운영하다 보면 방문자들이 글을 얼마나 길게 읽을 수 있을지 고민하게 됩니다.
긴 글일수록 시작하기 전에 부담을 느끼고, 짧은 글은 금방 스크롤하고 나가 버리기도 하죠. 

이런 경우 글 상단에 “이 글은 약 ○분 읽기 분량입니다.” 라는 안내 문구를 보여주면, 방문자에게 친절하면서도 가독성을 크게 높일 수 있습니다.

오늘은 Blogger(블로그스팟)나 개인 블로그에서 활용할 수 있는 읽기 시간 자동 표시 가젯 코드를 소개하고, 설치 방법과 SEO 효과까지 함께 정리해 보겠습니다.

읽기 시간 표시


✅ 블로그 읽기 시간 표시 기능이 필요한 이유

  • 방문자 만족도 향상: 독자는 글을 읽기 전, 소요 시간을 보고 마음의 준비를 할 수 있습니다. 
    알고 기다리는 시간은 모르고 기다리는 시간보다 불안하지 않듯이, 글의 분량을 인지하면 더 집중해서 읽는 방문자를 기대할 수 있습니다. 

  • 이탈률 감소: 예상 시간을 알고 있으면 끝까지 읽어볼 확률이 높아집니다. 그렇다고 너무 긴 글을 작성하고 예상시간이 길어진다면? 조기 이탈할 수 있으니 밸런스 조절이 필요합니다. 
     

  • 네이버 SEO에 긍정적: 블로그 검색 노출에 중요한 지표인 체류 시간이 늘어납니다.
    그렇게 노출 순위가 높아지면 더 많은 독자를 유입시킬 수 있습니다. 

  • 디자인 요소: 깔끔한 박스형 안내 문구는 시각적으로도 안정감을 줍니다.

💻 읽기 시간 표시 코드 예제

아래 코드를 블로그스팟(Blogger) HTML 편집에 추가하면, 첫 번째 h2 태그 바로 위에 자동으로 박스가 삽입되어 읽기 시간이 표시됩니다.

<style>
.readtime-box {
  border: 1px solid #ddd;
  padding: 14px;
  margin-bottom: 60px;
  background: #fafafa;
  border-radius: 10px;
  font-size: 15px;
  color: #333;
  font-family: 'Noto Sans KR', sans-serif;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const wordsPerMinute = 250; // 평균 읽기 속도
  const content = document.querySelector("article") || document.body;

  // textContent 사용 → 속도 개선
  const text = content.textContent || "";
  const wordCount = (text.match(/\S+/g) || []).length;

  const images = content.querySelectorAll("img").length;
  const imageTime = images * 12; // 이미지당 12초 가산

  let minutes = Math.ceil((wordCount / wordsPerMinute) + (imageTime / 60));

  const box = document.createElement("div");
  box.className = "readtime-box";
  box.innerHTML = `이 글은 <b>약 ${minutes}분 읽기</b> 분량의 글입니다.`;

  const firstH2 = content.querySelector("h2");
  if (firstH2) {
    firstH2.parentNode.insertBefore(box, firstH2);
  } else {
    content.insertBefore(box, content.firstChild);
  }
});
</script>

🛠️ 설치 방법

  1. 블로그스팟 설정 → 레이아웃 → Main Body  → Main  → Html/자바스크립트 를 추가합니다.

  2. 위의 코드를 입력하고 저장합니다. 

  3. 저장 후 블로그 글을 열어보면, 첫 번째 소제목(h2) 위에 작은 박스 형태로 예상 읽기 시간이 표시됩니다.

예상 읽기 시간 디스플레이



     가젯(위젯)추가를 많이 해보신 분이라면 바로 이해가 가시겠지만, 만약 위의 내용이 생소하고,
     이해가 어려우시면 아래 참조 글을 읽어주세요.  

📊 SEO & 활용 효과


이 기능은 단순히 방문자 편의성을 넘어서 네이버 검색 최적화(SEO)에도 도움을 줍니다.


완독률 향상
"3분만 투자하면 읽을 수 있다"는 안내는 독자가 글을 끝까지 읽게 만드는 강력한 동기부여가 됩니다.


체류 시간 증가 → SEO 강화
글을 끝까지 읽는 독자가 많아지면 블로그의 평균 체류 시간이 늘어나고, 이는 검색엔진이 긍정적으로 평가하는 신호가 됩니다.
네이버와 구글 모두 사용자 만족도와 체류 시간을 중요하게 보기 때문에, 검색 순위에도 유리하게 작용할 수 있습니다. 


독자 신뢰도 상승
독자가 예상할 수 없는 불확실성을 줄여주면, "이 블로그는 친절하다"는 인상을 주게 됩니다.
이는 재방문과 구독으로 이어지며, 장기적인 블로그 성장에 중요한 역할을 합니다.

📌 마무리

블로그 읽기 시간 자동 표시 가젯은 간단한 코드 삽입만으로 방문자 경험을 크게 개선할 수 있는 실용 기능입니다.
네이버 블로그, Blogger, 개인 블로그 어디서든 적용할 수 있으니 꼭 활용해 보세요.
가독성 향상, 체류 시간 증가, SEO 최적화까지 1석 3조의 효과를 얻을 수 있을 것입니다.

블로그 운영에서 중요한 건 독자의 경험입니다.
작은 디테일 하나라도 독자가 글을 더 편안하게 읽을 수 있도록 돕는다면, 그 효과는 검색엔진 노출과 블로그 성장으로 돌아옵니다.

읽기 시간 표시 기능은 그중에서도 가장 쉽고 확실한 개선 방법입니다.
한 번 적용해 보시고, 글을 끝까지 읽는 독자가 얼마나 늘어나는지 직접 확인해 보세요.

Related Posts

로드 중…

댓글 쓰기