블로그스팟에 글자 수 카운터 추가하기

블로그에 글을 쓰다 보면 어쩔 수 없이 SEO를 생각하기 마련입니다. 내 글이 구글 1페이지에 노출되고, 많은 사람이 보는 것 만큼 기분 좋은 일이 없습니다. SEO 하면 가장 먼저 떠오르는 것은 글자 수인데, 블로그스팟은 워드프레스처럼 내가 쓴 글이 몇 자나 되는지 바로 알 수 없습니다. 그렇다고 매번 글 전체를 복사하여 글자 수를 세는 사이트에 붙여넣을 수도 없는 노릇입니다.

티스토리는 확장 프로그램을 이용해서 내가 쓴 글이 몇 자인지 금방 알 수 있습니다. 크롬에서만 작동하며, 확장 프로그램 링크는 아래와 같습니다. 이 글의 주제는 이것이 아니기에 자세한 설치 방법이나 사용 방법은 생략하겠습니다. 확장 프로그램을 많이 사용해 보신 분이라면 쉽게 사용할 수 있을실 겁니다.

워드프레스는 기본으로 제공하는 블록 에디터에 글자 수(문자수) 등을 비롯해 다양한 정보를 제공해 줍니다.

그렇지만 워드프레스와 티스토리만큼 블로그스팟의 확장성은 뛰어납니다. 자바스크립트와 몇 줄의 HTML만 있으면 글자 수 카운터를 글 제목 바로 아래에 추가할 수 있습니다. 우선 이 글 아이디어를 주신 "물 속에는 상어가 있다!" 님께 감사드립니다. 코드와 아이디어를 많이 참고했습니다. 원본 글 링크는 아래와 같습니다.

글자 수 카운터 추가하기

이 예시는 블로그스팟의 기본 테마인 Contempo를 기준으로 합니다. 블로그스팟 블로그를 운영하는 분들이 가장 많이 쓰실 테마일 것 같기도 하고, 언제나 기본에 충실하기 위해서입니다. Contempo 테마 대신 다른 테마를 사용하신다면, 일단 글을 쭉 읽어 보시고 아래의 "다른 공식 테마를 사용한다면" 부분을 참고해 주세요.

HTML을 수정하지만, 겁먹진 마세요. 따라하기만 한다면 아무 문제는 발생하지 않습니다. 글자 수 카운터를 나중에 제거하고 싶다면 추가한 코드를 단순히 삭제하고 테마를 다시 저장하면 됩니다.

우선 코드부터 올리겠습니다. 추가해야 하는 코드는 두 종류입니다. 위 코드는 글자 수가 들어갈 곳을 결정하고 아래 코드는 실제로 글자 수를 계산하는 코드입니다.

<span expr:class='&quot;item-control &quot; + data:post.adminClass'/>

<script type='text/javascript'>
//<![CDATA[
    (function(e){
        const wrap = e.querySelector('.item-control');
        const postLength = e.querySelector('.post-body').innerText.replace(/\s+/g,' ').length;
        wrap.innerHTML += `${postLength}자`;
    }(document));
//]]></script>

글자 수 카운터를 추가하는 방법은 간단합니다.. 블로그 관리 창에서 테마 탭으로 들어간 다음 메뉴를 클릭하시고, HTML 편집 버튼을 누릅니다. 아래 스크린샷에서 1번으로 표시된 부분을 누르고 드롭다운 메뉴를 연 다음, 2번으로 표시된 부분을 누르면 됩니다.

우선 Ctrl + F를 눌러 <b:include data='post' name='postBody'/>을 검색합니다.

왼쪽 위에 검색 창이 열립니다. 위 글자를 붙여넣고 검색하면 됩니다.

저의 경우에는 3803번째 줄에 해당 코드가 검색됩니다. 몇 줄 정도 차이나는 건 신경쓰지 않으셔도 됩니다.

해당 코드 바로 위에 첫 번째 코드를 복사해서 붙여넣으세요.

그런 다음 맨 아래로 스크롤을 내립니다. 두 번째 코드를 아래와 같이 적당한 위치에 복사해서 붙여넣습니다. 디스켓 아이콘을 눌러 저장합니다. 이렇게 하면 설치가 끝났습니다.

이제 블로그 글을 보면 날짜 오른쪽에서 블로그 글의 글자 수를 볼 수 있습니다. 블로그 관리자만 글자 수를 볼 수 있습니다. 블로그 관리자가 아닌 사람한테는 글자 수가 감추어집니다. 다만 감추어지기만 하는 것이어서 CSS를 해제하면 볼 수 있습니다.

제 테스트용 블로그에 글자 수 카운터를 실제로 추가한 모습입니다.

주의사항

해당 코드는 공백을 포함한 글자 수를 셉니다. 공백을 포함하지 않는 글자 수를 세려면 아래 코드를 사용하세요. replace 부분이 조금 바뀌었습니다.

<script type='text/javascript'>
//<![CDATA[
    (function(e){
        const wrap = e.querySelector('.item-control');
        const postLength = e.querySelector('.post-body').innerText.replace(/\s+/g, '').length;
        wrap.innerHTML += `${postLength}자`;
    }(document));
//]]></script>

다른 공식 테마를 사용한다면

Soho 테마를 사용하신다면 <b:include data='post' name='postBody'/>을 검색한 뒤 두 번째 결과 위에 글자 수가 들어갈 곳을 결정하는 코드를 붙여넣으세요. 대략 3500번째 줄 근처입니다.

Emporio 테마를 사용하신다면 <b:include data='post' name='super.post'/>을 검색한 뒤 그 위에 글자 수가 들어갈 곳을 결정하는 코드를 붙여넣으세요. 대략 4070번째 줄 근처입니다.

실제 사용 예

이 블로그에서 실제로 이 코드를 사용하고 있습니다. 제 글 중 하나를 예로 들어 보면 카시오 공학용 계산기 FAQ 글은 2023년 12월 기준으로 5790자인 것을 확인할 수 있습니다.

글을 쓰면서 미리보기를 누르면 지금까지 글을 몇 자 적었나 쉽게 확인할 수 있어서 편리합니다. 티스토리나 워드프레스 만큼은 아니여도 그에 준하게 편리한 것이 구글 블로그스팟입니다.

적정한 블로그 글의 글자 수?

여기서부터는 여담입니다. 구글은 블로그 글의 글자 수가 랭킹 기준이 아니라는 것을 공개했습니다. 그래서 얼마나 글을 써야 하는지 저도 헷갈립니다. 일단 2000자 정도는 쓰면 괜찮을 것 같습니다. 각 글마다 2000자 이상 쓰려고 노력하고 있습니다.