부트스트랩 5 티스토리 스킨 만들기 8 - 구글 SEO /리스트, 리스트 페이징

구글 SEO

부트스트랩 5 티스토리 스킨 제작에

대한 8번째 포스팅입니다.

지난 포스팅에서 사이드바의 기능들을

몇가지 구현하고 요령을 알았다면

이제 티스토리 치환자 기초 문서를

한 6~70%는 커버한 것이라 봅니다.

좀 더 디자인을 좋게 하기 위해서

홈커버를 꾸미고 옵션을 구현하는데

시간이 들겠지만 그것은 다른 문제입니다.

기본적인 블로그 기능만으로도

구글 SEO의 상위 랭크에 올라가는

포스팅을 할 수 있습니다.

SEO가 한가지 요소로 결정되는 것은

아니지만 일단 심플하기 때문에

페이지 로딩 속도가 빠르고

시장 점유율이 높고 안정적인

부트스트랩을 쓰는 것은 구글 검색엔진의

AI가 해석하기에 나쁘지 않습니다.

페이지 속도에 관해서 덧붙이면

부트스트랩 파일을 받는데 몇백KB가

소요되긴 하지만 사실 한글 블로그의

문제는 한글 폰트 용량이 큽니다.

영어는 폰트 용량이 작습니다.

ABCD... 대문자로 시작해서 ...xyz까지

알파벳은 52개 문자입니다. (아스키코드)

유니코드의 한글은 11172자입니다.

이 11172자를 모두 폰트로 만들면

상당한 메가수가 나가는데 네이버에서

개발한 나눔글꼴 TTF(트루타입폰트)는

최소 1메가에서 8메가까지 나갑니다.

폰트를 잘못 선택하면 영어폰트에 비해

페이지 로딩이 수배에서 몇십배 이상

차이가 날 수 있습니다. 다행히 한국은

인터넷이 빨라서 많은 글자수의 문제가

어느 정도 상쇄되긴 하는데 해외에서

인터넷이 느린 국가에서 블로그를

보는 사람들도 생각을 해야 합니다.

별거 아닌 것 같지만 한국의 재외동포는

2021년 기준으로 730만명이 넘습니다.

구글 입장에서는 한국에 사는 한국인만

문제없으면 OKAY다? 이런 것은 없겠지요.

글로벌 기업으로 페이지 로딩 속도가

빠른 블로그에 좋은 SEO를 주는 것은

당연한 원리라 할 수 있습니다.

구글의 SEO는 포스팅에 200개 이상의

항목을 AI가 분석하여 점수를 매긴다고

하는데 구글 직원도 어떻게 해야

상위 랭크에 가는지 잘 모른다고 합니다.

하지만 상식적으로 평균 페이지 로딩이

3초 걸리는 블로그와 10초 ~30초

다운로드 받느라 이렇게 오래 걸리는

블로그를 비교하면 객관적으로

빠른 것에 점수를 더 주는게 맞습니다.

안그러면 사용자들이 짜증을 낼테니까요.

사실 구글의 검색 시스템이 안정화되고

완성된 것은 오래전인 것 같지만

불과 몇년동안에 발전한 것입니다.

몇년전만 해도 오토포스팅 등에 의한

광고, 스팸 어뷰징이 매우 심했습니다.

구글 검색엔진의 성능이 좋아지면서

이런 잡것들을 싹다 밀어내버렸지요.

물론 그 사이에 블로그 기술도 발전하고

무엇보다 일반 블로그 유저들이

양질의 컨텐츠를 많이 쏟아내서

지금의 최고의 퀄러티가 유지되고 있습니다.

뉴스 기사나 이런 트렌드 부분은

신뢰도 높은 국영 언론사가 거의

다 차지하고 있지만 아직까지 정보성

포스팅 부분은 개인 블로그가 압도적입니다.

벽이 아예 없다고는 할 수 없지만

틈새 시장을 노리면 지금 시작하는

개인들도 해볼만 하다는 거죠.

또 과거에 문서가 완성된 분야도

시간이 지나면 물갈이(?)가 일어나므로

글을 쓰려는 의지가 있으면

누구나 도전해볼 만 합니다.

개인적 경험에서 보면

구글의 문서는 보통 2년 정도

주기로 업데이트한 문서를

상위에 올려주는 것 같습니다.

뭐 그렇다고 완전히 위키피디아나

이런 기관들 보다 상위 랭크에 오르기가

쉽지는 않지만 키워드에 따라 틈새를

공략할 수도 있고 위키의 근처까지라도

갈 수 있다면 대단한 성공입니다.

스킨 제작에 왜 이런 이야기를 하냐면

티스토리는 콘텐츠가 가장 중요하지만

스킨도 또 관련이 있기 때문입니다.

직접 스킨을 만들고 보완한다면

좀 더 유리하게 블로그를

운영할 수 있을 것 입니다.

또 그 과정에서 SEO에 대한

지식과 경험치도 업그레이드 됩니다.

리스트, 리스트 페이징

리스트는 글목록을 말합니다.

리스트 페이징은 리스트 아래에

이동하는

커뮤니티에서는 게시판이라고 하는

그것과 닮았습니다. 티스토리의

카테고리, 검색, 태그에 연결됩니다.

리스트는 좀 화려하게 할려면

썸네일을 넣는게 좋긴 한데

썸네일은 나중에 추가하도록 하고

우선 기본 텍스트 리스트로 만들겠습니다

썸네일 리스트는 홈커버에서도

다루게 될 내용입니다.

아래 소스 코드입니다.

그룹치환자 <s_list> 이고 <s_list_rep>에서

반복합니다. rep 는 반복이라고 말했지요.

얼마나 반복하는가? 는 index.xml의

entriesOnList 가 기본값이고

스킨편집에서 설정할 수 있습니다.

div는 부트스트랩 5의 card 를

사용했습니다. 카드를 너무 많이

사용하는게 아니냐는 생각도 드는데

그냥 뭐든간에 박스로 꽂아넣기가

좋습니다. 리스트도 그냥 하면 되고,

복잡한 리스트라면 테이블을

사용할 수도 있겠지만 리스트를

가지고 그렇게 세분화 하기엔

웬지 번거롭기 때문에 card가 편합니다.

꼭 카드가 아니라도 상관없습니다.

저 모양이 쉽게 나오기 때문에

card를 쓴 것 뿐이니까 뭐 container를

써도 되고 p 태그를 써도 되고

그건 자유입니다. 이렇게 말하는 건

블로그 포스팅은 리스트를 보고

클릭하는 빈도수가 낮습니다.

많은 사람이 실시간으로 보는 커뮤니티의

게시판은 글목록이 중요하지요.

하지만 블로그는 기본적으로 검색 유입,

그 다음에 중간 중간의 관련 링크를

클릭하면서 읽는 시스템입니다.

글목록에 너무 힘을 주면 어쨋거나

그것도 페이지 로딩에 영향을 미치기도

하고 차라리 홈커버 리스트에 좀 더

비중을 두고 만드는게 좋지 않을까-

하는 개인적 취향입니다.

<!-- category list, search result s-->
<s_list>
    <div class="card shadow-sm mb-3">
        <div class="card-header">
            "" 해당 글  건
        </div>
        <ul class="list-group list-group-flush">
            <s_list_rep>
                <!-- li 반복 -->
                <li class="list-group-item d-flex justify-content-between custom-admin">

                    <!-- 
                        <s_list_rep_thumbnail> 
                            리스트 썸네일 사용시 
                        </s_list_rep_thumbnail>
                    -->

                    <a href="">
                         
                    </a>
                    <span></span>
                </li>
            </s_list_rep>
        </ul>
    </div>
</s_list>
<!-- category list, search result e-->

간단한 코드이지만 필요한 부트스트랩

클래스가 적당히 들어가 있습니다.

이 치환자들의 내용은

티스토리 치환자 문서 를 읽어보면

어렵지 않게 알 수 있을겁니다.

전체 소스코드 - 깃허브

다음은 페이징 치환자 입니다.

리스트, 글, 방명록 공통입니다.

역시 s_paging_rep 에 보면

반복하고 있습니다.

티스토리 서버에서 알아서

페이징을 뿌려주기 때문에

스킨은 모양만 잡아주면 됩니다.

<!-- 페이징 치환자 (리스트, 글, 방명록 공통) -->
<!-- paging s -->
<s_paging>
    <div class="mb-3 text-center">
        <a  class="btn btn-outline-primary" role="button">◀</a>

        <div class="btn-group">
            <s_paging_rep>
                <a  class="btn btn-outline-primary me-1"></a>
            </s_paging_rep>
        </div>
        <a  class="btn btn-outline-primary" role="button">▶</a>
    </div>
</s_paging>
<!-- paging e -->

역시 부트스트랩을 사용하고 있고

div에 꼭 container 클래스를

꼭 쓸 필요는 없습니다.

치환자를 보면 처럼

어중간하게 나오는 것들이 있는데

결국은 서버가 문자열 치환으로

html문서를 만들어서 클라이언트에

보내는 시스템으로 배치를 적당히

하면 됩니다. class로 적용하면 되니까

부트스트랩도 사용할 수 있습니다.

여기서는 버튼 콤포넌트를

사용해서 모양을 냈습니다.