모바일 티스토리 블로그 확대 축소 viewport, 애드센스 클릭율 높이기 유도

01

of 04

티스토리 블로그 모바일 사용 시 불편한 점

글 작성자 입장이 아닌 글을 보는 방문자 입장에서 모바일로 티스토리 블로그에 접속해서 글을 볼 때 가장 큰 불편한 점은 이미지 확대가 안된다는 것이다.

네이버 블로그의 경우 이미지를 선택하면 확대나 축소가 가능해서 작은 이미지의 경우 확대해서 확인할 수 있는데 티스토리 블로그는 이미지 확대가 되지 않는다. 이게 별거 아닌 거 같지만 은근히 불편하다.

그래서 티스토리 블로그 모바일로 접속했을 때 확대 / 축소하는 기능을 넣으려 한다.

02

of 04

viewport 찾기

티스토리 설정 → 꾸미기 → 스킨 편집 → html 편집에 접속한다.

상단의 head 태그 안의 meta name=”viewport” 부분을 확인하면 아래 이미지처럼 되어 있다.

※ 모바일 확대 OFF 코드 (고정)

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
Code language: HTML, XML (xml)

03

of 04

viewport 수정하기

• initial-scale : 초기 줌 배율 설정
• maximum-scale : 최대 줌 배율 설정
• minimum-scale : 최소 줌 배율 설정
• user-scalable : 사용자가 확대 / 축소 가능 여부

아래 이미지처럼 viewport 부분을 수정해 준다.

※ 모바일 확대 ON 코드

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
Code language: HTML, XML (xml)

04

of 04

결과 확인

이제 핸드폰에서 손가락으로 확대 축소를 할게 있게 변경되었다. 단순히 이미지만 확대를 하는 게 아닌 화면 전체를 확대 / 축소할 수 있다.

※ 확대 / 축소가 되면 좋은 이유

보통 블로그 글 작성시 표 같은 건 실제 표로 작성하는 것보단 이미지로 만들어 작성해야 모바일로 볼 때 편하게 볼 수 있다. 이렇게 표를 이미지로 올릴 경우 글자 크기가 작아져서 확대를 해서 보는 경우가 많다. 이렇게 되면 당연히 핸드폰 화면을 손으로 터치해야 한다. 단순히 터치가 아니고 손가락 두 개를 사용해서 확대 축소를 하게 된다.

티스토리 블로그를 수익형으로 운영하는 분이라면 이 부분을 노려야 한다. 이미지로 만든 표 위 혹은 아래에 광고를 넣어서 광고클릭을 유도할 수 있다.