애드센스 SEO 최적화, 티스토리 꾸미는 방법

애드센스 승인 전에는 승인을 위한 글만 작성했다면, 승인 후에는 구글 SEO에 최적화된 글을 작성해야 내 글이 구글 상단에 올라갑니다. 애드센스를 하는 목적은 수익입니다. 그런데 수익이 0.1달러 정도가 지속된다면 내 글이 SEO에 맞는지 살펴봐야 합니다. 글 내용도 중요하지만 글의 형식도 중요합니다. 그래서 오늘 SEO에 최적화된 티스토리 꾸미는 방법에 대해 알려드리겠습니다. 

애드센스 SEO 최적화, 티스토리 꾸미는 방법

사이드바의 프로필을 만들고, 목차 설정에 대해 설명해 드리겠습니다. 그리고 소제목 꾸미는 방법을 알려드리고 리스트 기능에서 색상을 바꿔보도록 하겠습니다. 그리고 형광펜으로 강조하는 방법도 알려드립니다.

블로그가 깔끔하게 정리되어 있으면 가독성이 높아 SEO에도 최적화도 되고 독자들도 체류시간이 높아져서 광고 클릭률이 올라갑니다. 

내가 원하는 색상 추출하기

색상 코드를 추출하는 프로그램은 'oicolorpicker' 를 다운로드합니다. 

다운로드하기 >>

형광펜 만들기

스킨편집 → HTML 편집 → CSS에 들어가서 맨 아래로 내려가서 엔터를 쭉 눌러서 여유공간을 마련합니다. 

그곳에 아래 코드를 복사해서 붙여 넣기 한 다음 저장 버튼을 클릭합니다. 

코드 다운로드 바로 가기

 

티스토리 블로그 꾸미기 (1).txt

0.00MB

 

[볼드 형광펜 코드]
.tt_article_useless_p_margin.contents_style > p > b{
padding: 2px 5px!important;
border-radius: 4px!important;
font-weight: bold;
background-color: rgba(1, 193, 91, 0.12)!important;
}

P태그로 묶여 있는 일반적인 문장안에 굵게 <B> bold를 하는 경우 이런 옵션을 적용해 달라는 코드입니다.

padding은 여백 공간을 잡는 치수이고 border-radius는 끝단을 얼마나 둥글게 만들지 정하는 치수입니다. 이 코드에서는 형광펜에다가 굵게(bold)도 적용하고 있습니다. 형광펜만 칠하고 글자는 굵게 하고 싶지 않으면 'font-weight:normal"로 바뀌면 됩니다. 

background-color가 형광펜 색상으로 위 코드에서는 연한 연두색이 적용되어 있습니다. 원하시는 대로 변경할 수 있습니다. 색상을 rgb로 하는 이유는 투명도 조절이 가능하기 때문입니다. background-color: rgba(1, 193, 91, 0.12)에서 0.12가 투명도를 설정하는 부분입니다. 1이 원래 정한 색상이고 0.12는 내가 정한 색상의 12%만 연하게 출력한다는 내용입니다. 형광펜처럼 그은 것처럼 하려면 투명도를 충분히 설정해야 합니다. 

색상을 정할 때 다운로드 받은 oicolorpicker 프로그램을 열고 자신이 원하는 색상에 마우스를 대고 control x를 누르면 원하는 색상의 rgb가 나옵니다. 그리고 코드로 다시 돌아와서 그 rgb로 변경해 줍니다.

소제목 스타일 변경하기

블로그를 쓸 때는 제목1, 제목 2, 제목 3으로 나뉩니다. 제목 태그에 관해서는 아래 글을 참고하세요.

 

제목 1만 앞에 주황색 바가 생깁니다. 기존의 소제목 스타일을 백업해서 쓰시는 분들은 그대로 사용하면 아래처럼 중첩되는 경우가 있습니다. 

스킨편집 → HTML 편집 → CSS로 들어가서 위에 제가 올려드린 코드 중 소제목 1 주황색바 없애기 코드를 복사해서 붙여 넣기 하면 됩니다.

[소제목 1 주황색 바(bar) 없애기]

기존에 소제목 스타일을 별도로 쓰신다면, 아래 코드를 넣어서 기본적으로 적용되는 스타일을 비활성화시켜주세요!

/* 소제목 주황색 bar 비활성화 */

.entry-content h2::before{
display: none;
}

 

주황색 바 소제목을 사용하고 싶으시면 위 코드는 지워주시고 기본 여백 설정(h3) 코드를 복사해서 '기본 여백설정'과  '소제목 세팅'을 복사해서 css에 붙여 넣기 합니다.

/* 기본 여백 설정 */
.entry-content h3{
margin: 29px 0 22px;
}

 

/* 소제목 세팅 */
.entry-content h2::before{
    background-color: #ff5b00;
}
.entry-content h2 {
    border-bottom: #FFF2CC 6px solid;
    letter-spacing: 1px;
}
.entry-content h3::before{
display: inline-block;
    content: "";
    width: 6px;
    height: 18px;
    background-color: #ff5b00;
    border-radius: 8px;
    margin-right: 16px;
}
.entry-content h4::before{
display: inline-block;
    content: "";
    width: 6px;
    height: 16px;
    background-color: #ff5b00;
    border-radius: 8px;
    margin-right: 16px;
}

여기서도 마찬가지입니다. background-color를 변경하면 내가 원하는 색상으로 변경됩니다. 인터넷 검색하다가 원하는 색상이 있다면 'oicolorpicker'를 사용해서 rgb 번호를 바꿔보세요. 블로그마다 사용하고 있는 로고가 있다면 그 색상으로 통일하는 것도 좋은 방법입니다. 

리스트 색상 변경

위에 올려드린 메모장에서 리스트 변경 코드를 복사해서 css에 붙여 넣기를 합니다.

/* 리스트 색상 변경 */
.entry-content ul li{
    color: #006B3D;
}

이것 또한 원하시는 색상 변경해서 사용하시면 됩니다. 리스트는 중요한 정보를 요약해서 제공할 때 좋은 기능입니다.

• 리스트
• 리스트
• 리스트

프로필 만들기

우선 내 블로그에 사용할 로고 이미지를 준비합니다. 구글에 '이미지 사이즈 변환'이라고 검색하면 'ILoveIMG'라는 사이트가 나옵니다. 

사이트 바로가기>>

내가 원하는 이미지를 드래그 해서 넣고 가고 세로 사이즈를 176PX로 만들어 줍니다. 용량을 큰 이미지를 사용하다 보면 블로그 속도가 저하되고 SEO에 좋지 않습니다. 가급적 사이즈를 맞춰 주세요. 

그리고 구글에서 '이미지 webp 변환'이라고 검색해서 아까 사이즈 줄인 이미지를 webp 이미지로 변환시켜 줍니다. 이미지 용량을 최소화하는 과정입니다. 기존 용량대비 95% 정도 줄어든 사이즈입니다. 

스킨 편집 → html 편집에 들어가서 '파일 업로드'에 들어옵니다. 그리고 변환한 webp 이미지를 추가해 줍니다. 

 

티스토리 관리자 페이지 하단에 블로그탭에 들어옵니다. 

위에 올려 드린 메모장에서 프로필 꾸미기 코드에서 첫번째 빈칸에 내 블로그 이름을 넣어줍니다.

다시 좀 전에 업로드한 이미지로 돌아와 마우스 오른쪽을 클릭해서 링크주소 복사를 눌러줍니다. 

그리고 코드로 돌아와 img src 옆 빈칸에 붙여 넣기를 합니다. 

마지막으로 티스토리 관리자 탭에서 블로그 설명을 복사해서 한 줄씩 넣어주면 됩니다. 한 줄이면 한 줄만 해도 되고 세줄이면 <p>태크를 추가해서 넣어주면 됩니다. 

그리고 전부 드래그해서 복사합니다. 사이드바 탭에 들어옵니다.

html 배너 출력을 클릭하고 사이드바2를 선택합니다.

사이드바 2에서 편집을 누르고 이름에 프로필이라고 작성하고 html 소스에 아까 복사한 코드를 붙여 넣기하고 모듈 저장하기 누르고 확인을 눌러줍니다.

완성입니다. 내 블로그 프로필 사진이 생성되었습니다.

SEO 최적화 블로그 만들기

주의해야 할 점은 프로필 사진을 용량이 큰걸 넣으면 로딩속도가 느려집니다. 최대한 가벼운 이미지이면서 품질도 좋은 이미지를 사용해야 합니다. 

이런 꾸미기 설정을 한다고 해서 수익 증가에 직접적으로 연결되는 건 아닙니다. 하지만 깔끔한 블로그는 독자를 오래 머물게 하는 효과가 있습니다. 광고는 최대한 글 중간에는 많이 넣지 않는 게 독자들이 글을 읽는 데 방해가 되지 않습니다. 결국 독자가 내 블로그에 오래 체류하면 구글 SEO 가 올라가고 수익으로 연결됩니다.