티스토리 블로그 애드 센스 수익을 가져다 주는 목차의 내부링크 연결 방법(HTML 수정)

 

티스토리 블로그 애드 센스 수익이 높은 블로그를 보면 굉장히 사용자 친화적이라는 느낌을 받습니다. 사용자 친화적으로 블로그를 만드는 것은 어렵지 않습니다. 바로 목차를 통해 내용을 미리 알려주고 원하는 내용으로 바로 이동이 가능하도록 내부링크를 걸어주는 것만으로도 사용자에게 편의를 제공해 줄 수 있습니다. 지금부터 내부링크를 통해 사용자 친화적인 블로그를 만들어서 애드 센스 수익을 높여드릴 수 있도록 방법을 알려드리겠습니다.

 

 

 

목차와 소제목 내부링크 연결방법

블로그 안에 내부링크를 연결하는 방법은 상당히 간단합니다. 바로 HTML의 형식을 조금만 변경해 주면 내부연결이 완료됩니다. 블로그 안에 내부링크를 연결할 때는 아래와 같은 형식을 적용합니다. 따라만 하셔도 바로 적용이 가능합니다.

 

ㆍ목차에 걸 링크 형식

  - HTML : "<a href="#A01"> 목차내용 <a>"

 

ㆍ내부에 연결될 형식 (목차 → 소제목으로 이동)

 -  HTML : "<p id=A01></p>"

 

여기서 중요한 점은 연결하고자 하는 위치를 일치시켜주어야 한다는 것입니다. 만약 목차에 #A01로 입력하였다면 내부 연결을 원하는 위치에도 A01을 입력하여야 이동이 가능합니다.

 

 

 

만약 id 값을 잘못부여하게 된다면 이동이 원활하게 되지 않거나, 원하지 않는 다른 위치로 이동하게 되는 경우가 발생하게 되니 주의하시기 바랍니다. 글 작성이 완료된 후에는 정확하게 반영이 되었는지 꼭 확인하시기 바랍니다. 

 

※ 여기서 A01은 작성자의 임의대로 부여한 것입니다. 연결하고자 하는 목차와 소제목이 여러 개인 경우 A01, A02, A03 등 순서대로 연결하기 위해 설정한 방법이오니, 사용하시는 분이 기억하기 쉬운 id값을 부여해 주어도 상관없습니다.

본인이 확인하기 쉬운 고유번호(문자)를 사용하여 적용하시기 바랍니다. 

 

 

내부링크 연결 예제

기본적인 연결원리를 알았다면 실제 예제를 통해 연결해 보아야겠죠. 아래 예제를 통해 직접 연결하는 방법을 터득해 보도록 하겠습니다. 아래의 목차 1~3번을 내부링크를 통해 연결해 보도록 하겠습니다.

 

① 티스토리 오른쪽 상단에 있는 "기본모드"를 "HTML"로 변경하여 줍니다.

 

<기본모드 &rarr; HTML 변환>

---

② 미리 글을 써 놓았던 부분에 링크 연결할 HTML 태그를 입력해 줍니다.

 

<내부 링크 적용>

 

두 번째 목차에 위치한 "내부링크 연결의 장ㆍ단점"을 클릭하면 해당 소제목으로 이동할 수 있도록  "<a href="#A01"> 목차내용 <a>" 형태로 변경해 줍니다.

 

목차를 미리 작성해 놓았기 때문에 실질적으로는 href="#A01"만 입력해 주면 됩니다.

---

③ 이동을 원하는 위치에 id값을 입력해 줍니다.

 

<이동 위치에 id값 입력>

 

내부링크 연결의 장ㆍ단점이라는 소제목과 연결하기 위해 id값을 입력해 주었습니다.

소제목을 의미하는 h3뒤에 id값을 입력하여야 연결하고자 하는 소제목으로 이동이 가능합니다.

 

 

③ 다시 HTML모드에서 기본모드로 전환 후 목차와 소제목 간의 링크연결이 되었는지 확인합니다.

 

<링크연결 확인>

 

정상적으로 링크가 연결되었다면 위 이미지와 같이 파란색 음영과 밑줄이 들어가 있는 것을 확인할 수 있습니다. 

하지만 목차이기 때문에 파란색으로 그냥 두 명 통일성을 헤칠 수 있기 때문에 동일하게 검은색으로 변경해 주는 것이 좋습니다. 

 

<검정색으로 변경>

 

style="color : #333333;"를 href 앞에 입력하여 글자색을 검은색으로 통일시켜 주겠습니다. 다시 기본모드로 돌아가서 글자색이 잘 변화되었는지 확인하는 작업을 거칩니다.

 

<글자색을 검정색으로 변경>

 

링크로 연결되어 파란색이었던 글자색이 다시 검은색으로 변화된 것을 확인할 수 있습니다. 확실히 글자색이 통일되니, 가시성이 좀 더 좋아진 것을 느낄 수 있습니다. 이로써 "내부링크 연결의 장ㆍ단점"이라는 목차의 내용을 클릭하면 해당 소제목으로 화면이 이동되는 효과를 누릴 수 있습니다.

 

 

 

내부링크 연결 팁

첫 번째 Tip!

내부링크를 연결하기 위해서는 HTML로 이동하여 작업하여야 합니다. 하지만 HTML을 공부한 적이 없다면 다소 복잡한 형식에 흠칫 놀라실 수 있습니다. 그렇기 때문에 저는 블로그에 글을 모두 작성을 완료해 놓은 상태에서 내부 링크를 연결하곤 합니다. 그래야 조금 더 수월하게 내부링크를 연결할 수 있기 때문입니다. 

두 번째 Tip!

내부링크를 연결하게 되면 연결 부분이 화면에 가장 위쪽으로 정렬되어 보이기 때문에 공백이 없어서 답답하다고 느낄 수 있습니다. 그렇기 때문에 연결링크를 소제목 바로 위에 연결시켜 주면 브라우저 바로 밑에 여백이 생기기 때문에 조금은 답답함을 벗을 수 있습니다. 따라서 제목 부분의 여백을 위해 소제목 한 단계 위에 해당 id를 넣어 연결해 주면 시각적으로 안정된 블로그가 될 수 있습니다.

 

 

 내부링크 연결의 장ㆍ단점

장점

구글 SEO의 상위노출을 위해서는 목차가 중요한 역할을 합니다. 목차를 생성하게 되면 글을 읽는 방문자가 글의 흐름을 이해하기 쉽기 때문에 체류시간을 높일 수 있다는 장점이 존재합니다. 

 

또한 목차는 장문의 글을 효과적으로 전달하기 위한 방법으로 사용됩니다. 심도 있는 내용을 다룰 경우 글의 길이가 굉장히 길어질 수 있기 때문에 방문자가 원하는 내용만 확인할 수 있도록 내부링크(목차링크)를 통해 원하는 내용만 확인할 수 있도록 편의를 제공할 수 있습니다. 이는 페이지 이탈률을 감소는 물론 체류시간에도 긍정적인 영향을 미칩니다.

 

위 두 가지 요소가 애드 센스 수익과 직결된다는 것을 블로그를 어느 정도 운영해 온 분이시라면 잘 알고 계신 내용이라고 생각됩니다. 가장 쉽게 적용할 수 있는 방법들부터 나의 블로그에 적용해 봄으로써 애드 센스 수익을 높여보는 노력이 필요합니다.

 

단점

티스토리 블로그를 운영하는 이유의 8~9할은 애드 센스를 통한 광고수익을 얻기 위해서일 것입니다. 따라서 포스팅 하나에도 상당히 많은 시간과 노력이 들어가기 때문에 내부링크를 통해 특정 페이지로 이동하는 것을 원치 않는 블로거가 존재할 수 있습니다. 즉, 블로그 글 중간중간 적절한 위치에 광고를 삽입하였으나, 내부링크로 특정 페이지로 이동될 경우 광고를 지나치게 된다는 단점이 존재한다는 것입니다.

 

 

 

다만, 이는 단편적인 단점일 뿐이라고 생각합니다. 어차피 사람들이 나의 블로그에 체류하는 시간은 굉장히 짧습니다.  서두를 읽다가 나에게 불필요하다고 느낄 경우에는 그 즉시 페이지를 이탈해 버리기 때문입니다.

 

이를 방지하기 위해서라도 목차를 통해 블로그의 내용을 전반적으로 제시하고, 원하는 페이지로 이동시켜 줌으로써 오히려 체류시간이 늘어나게 되는 효과를 가져올 수 있습니다. 

 

짧게 보면 애드 센스 수익에는 단점으로 비추어질 수 있으나 장기적으로 볼 때에는 오히려 애드 센스 수익에 긍정적인 영향을 미칠 수 있다는 점을 꼭 기억하시고 사용자 친화적인 블로그로 성장해 나가시면 좋을 것 같습니다.

 

마치며

지금까지 블로그의 목차와 내용을 연결하는 방법에 대해 알아보았습니다. 티스토리 블로그를 운영하시는 분들의 목적이 수익화에 있다는 것은 잘 알고 있습니다. 하지만 나의 수익을 위해서 블로그에 방문해 주시는 고객분들에게 불편을 주어서는 안 된다고 생각합니다. 그분들의 시간도 소중하기 때문이죠. 블로그에 방문해 주시는 분들께 긍정적인 경험을 제공해 준다면 장기적인 관점에서 보았을 때 나의 블로그에도 도움이 된다는 생각으로 편의성에도 신경 쓰고 있습니다.

 

단기적인 관점에서 조금의 손해는 볼 수 있겠으나, 장기적인 관점에서 도움이 된다면 우리는 무엇을 선택해야 할까요?

모두에게 윈윈이 될 수 있는 방향으로 블로그를 개선해 나가기 위해 작은 팁들을 적용시켜 보시죠!

 

▼▼▼함께 읽으면 좋은 글▼▼▼

티스토리 링크버튼 디자인 손쉽게 적용하는 방법(CSS코드 추가)

다음 티스토리 블로그 저품질, 누락 원인 및 조치 방법! (저품질, 글누락, 통누락, 펍밴 탈출!)

애드센스 수익을 극대화 시키는 10가지 방법!