블로그스팟 글 읽기시간 표시 방법 | 가젯 적용 가이드

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

사람들은 불확실한 상황을 꺼려합니다. 식당 대기 시간이나 목적지까지의 거리를 모를 때 집중력이 떨어지듯, 블로그 글도 마찬가지입니다. "이 글을 읽는 데 얼마나 걸릴까?"라는 의문을 해소해 주는 것만으로도 방문자의 체류 시간과 만족도를 획기적으로 높일 수 있습니다.

---

✅ 읽기 시간 표시 기능이 필요한 4가지 이유

• 1. 방문자 만족도 향상: 소요 시간을 미리 알면 독자는 심리적 안정감을 느끼며 글에 더 집중하게 됩니다.
• 2. 이탈률 감소: 끝이 보이는 콘텐츠는 독자가 중도에 포기하지 않고 마지막까지 읽을 확률을 높여줍니다.
• 3. 검색 엔진 최적화(SEO): 글의 체류 시간(Dwell Time)이 늘어나면 구글 및 네이버 검색 노출 순위에 긍정적인 영향을 줍니다.
• 4. 전문적인 디자인: 깔끔한 안내 박스는 블로그의 전반적인 신뢰도와 UI 완성도를 높여줍니다.

 

---

💻 읽기 시간 표시 코드 예제

아래 코드를 복사하여 블로그의 첫 번째 h2 태그 위에 자동으로 표시되도록 설정해 보세요.

<style>
.readtime-box {
  border: 1px solid #eee;
  padding: 15px;
  margin: 20px 0 40px 0;
  background: #fdfdfd;
  border-radius: 12px;
  font-size: 15px;
  color: #444;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.readtime-box b { color: #e67e22; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  const wordsPerMinute = 250; 
  const content = document.querySelector("article") || document.body;
  
  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. 블로그스팟 대시보드에서 [레이아웃] 메뉴로 이동합니다.
2. [가젯 추가]를 클릭한 뒤 [HTML/JavaScript]를 선택합니다.
3. 위의 코드를 복사하여 내용란에 붙여넣고 저장합니다.

💡 레이아웃 설정이 낯설다면? 하단의 "레이아웃 설정방법" 관련 글을 참고하세요.

---

📊 기대 효과: SEO & 완독률

🚀 체류 시간 증가
네이버와 구글 알고리즘은 사용자가 페이지에 오래 머무를수록 '좋은 콘텐츠'로 인식합니다. 예상 시간을 알려주는 것은 완독을 유도하는 가장 쉬운 전략입니다.

🤝 독자 신뢰 형성
작은 배려가 블로그의 브랜딩을 만듭니다. "이 블로그는 정보를 효율적으로 제공한다"는 인상을 심어주어 재방문율을 높입니다.

📌 마치며

블로그 운영의 핵심은 독자 경험(UX)입니다.
지금 바로 읽기 시간 표시 기능을 적용해 보세요. 작은 디테일 하나가 여러분의 블로그를 검색 결과 상단으로 이끌어줄 것입니다.

2026.03.29 - [구글 블로그] - 블로그스팟 레이아웃 설정 방법 | 가젯 추가·HTML 위젯 설치·사이드바 인기글 설정

블로그스팟 레이아웃 설정 방법 | 가젯 추가·HTML 위젯 설치·사이드바 인기글 설정