티스토리 블로그를 운영하면서 가장 원하는것은 엄청난 광고 수익, 엄청난 조회수, 여러 검색 플랫폼에서의 상위 노출등을 하고 싶어 하는것으로 생각해 볼 수 있습니다.
광고수익과 조회수, 그리고 상위 노출은 상관관계가 전혀 없다고 할 수 없는것이 광고수익은 조회수에 정비례해서 증가할 가능성이 많고 조회수는 상위 노출이 되었을때 증가할 가능성이 많다고 할 수 있기 때문입니다.
따라서 상위 노출이 된다면 조회수가 상위 노출이 되지 않았을때보다 많아지게 되고 조회수가 증가한만큼 광고 수익이 증가할 가능성이 많다는것입니다.
따라서 티스토리 블로그를 운영하면서 광고 수익을 증가 시키기 위한 고민을 하다 보면 조회수를 증가 해야 한다는것을 생각해 볼 수 있고, 조회수를 증가 시키기 위해서는 상위 노출이 되어야 한다고 생각해 볼 수 있는데 어떻게 상위 노출을 시켜야 하는지에 대해서는 검색 SEO를 최적화 해야 가능하다 라고 말할 수 있겠습니다.
그런데 이런 검색 SEO는 각 검색 플랫폼마다 최적화의 구조가 조금씩 서로 다르기 때문에 모든 검색 플랫폼에서 최적화 시키기는 매우 어렵다고 볼 수 있겠죠.
그럼 어떤 검색 플랫폼을 기준으로 seo최적화에 맞춰 글을 작성할것인지 정해야 하는데 네이버의 경우에는 네이버 이외의 검색 노출은 배척시키는 로직이 적용되는 경향이 매우 강하고, 다음의 경우에는 티스토리 자체가 기본적으로 다음 또는 카카오 기반의 블로그이기 때문에 기본적으로 노출이 되면서도 저품질의 영향을 가장 많이 받고 있기 때문에 구글에서의 상위 노출을 목표로 구글의 기준에서 seo가 최적화 된 글을 작성하는것이 가장 효과적일 수 있다는 생각을 해볼 수 있습니다.
이번 내용에서는 구글의 상위 노출을 위한 관점에서 seo최적화 방법중 목차를 작성하는 방법에 대한 이야기를 함께 공유해 보도록 하겠습니다.
■ 목차.
1. 목차 작성이 필요한 이유.
2. 목차 작성 방법.
2-1. 목차 수동 작성 방법.
2-2. 목차 자동 작성 방법.
3. 선택적 필요에 따라서 작성하는 목차.
1. 목차 작성이 필요한 이유.
목차를 작성하는 가장 큰 이유로는 결과적으로 구글 검색 상위 노출을 위한 seo최적화에 있다고 할 수 있겠습니다.
그럼 구글 상위 노출의 seo최적화와 목차를 작성하는 상관 관계는 무엇인가? 생길 수 있을텐데 목차를 작성하는것은 주로 책, 백과사전과 같은 글에서 사용되는것을 발견할 수 있는데, 목차의 역활은 전체적인 글이 무엇을 말하려고 하는지 또는 어떤 이야기들로 주제를 설명하려고 하고 있는지에 대한 가이드 역활로 볼 수 있습니다.
이러한 역활을 하는 목차는 기본적으로 구글의 알고리즘이 목차가 작성된 글을 좋아하는것으로 알려져 있고, 구글 검색시 긍적적인 부분으로 작용하는것으로 구글봇으로 하여금 전체적인 글의 맥락을 전달하여 구글에서의 상위 노출에 목적과 이유가 있다고 할 수 있겠습니다.
2. 목차 작성 방법.
목차를 작성하는 방법은 아주 간단하게 글을 작성하는 중간중간의 소제목들로 작성해 주면 되는것으로 작성할 수 있습니다.
여기에 방문자로 하여금 가독성을 높이기 위해 목차에 하이퍼링크를 작성해 주어 목차를 클릭했을때 해당 제목으로 이동할 수 있도록 각 목차마다 하이퍼링크를 html태그로 작성해 주어 이동 될 수 있도록 수동으로 작성하는 방법과 자동으로 작성되는 방법으로 나누어 확인해 보도록 하겠습니다.
2-1. 목차 수동 작성 방법.
목차를 수동으로 작성한다는것은 타이핑으로 목차를 작성한 후에 html모드에서 작성된 목차마다 내부 소제목으로 이동 할 수 있도록 링크 태그를 작성해 주는것입니다.
목차를 작성하는것 자체는 어려운 부분이 없을것으로 내부 링크를 만들어 작성하는 방법에 대해서만 알아보도록 하겠습니다.
"2-1. 목차 수동 작성 방법." 이라는 목차 타이틀을 작성 했을 경우 html모드로 확인을 해 보게 되면 <p data-ke-size="size16"> 2-1. 목차 수동 작성 방법.</p> 이렇게 작성된 것을 <a href="#A"> 2-1. 목차 수동 작성 방법. </a>로 입력하여 하이퍼링크로 텍스트가 작성 되도록 해주고 해당 목차를 클릭하여 이동되어야할 소제목 부분에는 <p id="A"> 2-1. 목차 수동 작성 방법. </p> 또는 <h2 id="A"> 2-1. 목차 수동 작성 방법. </h2>와 같이 입력해 주어 클릭했을때 이동 할 수 있도록 태그를 작성해 주는것으로 완성 시킬 수 있겠습니다.
| ▼ 목차에 하이퍼링크 태그 작성. <p data-ke-size="size16"><a href="#A"> 2-1. 목차 수동 작성 방법.</a></p> ▼ 목차와 연결되는 본문 내용중의 소제목 태그 작성. <h4 id="A" data-ke-size="size20"><b>2-1. 목차 수동 작성 방법.</b></h4> |
여기서 A는 자신이 알아보기 편한것으로 숫자 또는 문자등으로 자유롭게 변경하여 이동되어야할 소제목의 id태그와 동일하게 작성해 주시면 되겠습니다.
2-2. 목차 자동 작성 방법.
목차를 자동으로 생성한다는것은 본문안에 글을 작성 하면서 특정 규칙에 의해서 자동으로 소제목으로 작성한 부분이 목차로 작성되고 작성된 목차에 소제목으로의 링크가 걸리게 되어 클릭 했을때 소제목 부분으로 이동 될 수 있도록 작성하는것입니다.
크게 어려운것은 없으니 순서대로 잘 따라 오시면 누구든지 간단하게 자동 목차 작성을 할 수 있도록 html과 css를 수정 할 수 있으니 다음 순서에 따라서 적용 시켜 보시면 좋겠습니다.
①. 다음의 파일을 다운로드 하여 티스토리 블로그 관리자 메뉴에서 스킨편집 → html편집 → 파일업로드로 이동하여 해당 파일 2개를 업로드 합니다.
②. 다음의 2개의 html코드를 티스토리 블로그 관리자 메뉴 스킨 편집 → html편집으로 이동하여 <head>와 </head>사이, 그리고 <body>와 </body> 사이에 아래의 코드를 각각 입력해 주도록 합니다.
| <head>와 </head> 사이 다음 코드 입력. <!-- 목차 스크립트 시작--> <script type="text/javascript" src="./images/jquery.toc.min.js"></script> <!-- 목차 스크립트 종료 --> <body>와 </body> 사이 다음 코드 입력. <!-- 목차 스크립트 시작--> <script src="./images/jquery.toc.min.js"></script> <script> // 목차 생성 $(document).ready(function() { var $toc = $("#toc"); $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"}); if($('.another_category').length > 0) { $toc.find('li:last').remove(); } }); </script> <!-- 목차 스크립트 종료 --> |
③. 다음의 css코드를 티스토리 블로그 관리자 메뉴 스킨편집 → html편집 → css탭으로 이동하여 css코드 가장 하단에 다음의 코드를 복사하여 삽입해 주도록 합니다.
| /* 목차 스타일 */ .book-toc { position: relative; width: fit-content; border: 1px solid #b0d197; padding: 10px 20px 10px 15px; z-index: 1; } .book-toc:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #b0d197; z-index: -1; opacity: 0.1; } .book-toc p { font-weight: bold; font-size: 1.2em !important; color: #396120; } #toc * { font-size: 20px; color: #000 !important; } #toc { margin-bottom: 0; } #toc a:hover { color: #000; } #toc ul { margin-top: 5px; margin-bottom: 0px; } #toc > li { padding-left: 0; text-indent: 0; list-style-type: decimal; margin-bottom: 10px; } #toc > li > a { text-decoration:none; } #toc > li > ul { padding-left: 20px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: decimal; margin-bottom: 0; margin-top: 5px; } #toc > li > ul > li > a { font-size: 1em; text-decoration:none; } #toc > li > ul > li > ul { padding-left: 10px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: decimal; margin-bottom: 0; margin-top: 3px; } #toc > li > ul > li > ul > li > a { font-size: 0.875em; text-decoration:none; } |
④. ①번부터 ③번까지 완료 했다면 자동 목차가 생성되도록 하기 위한 코드 수정은 완료 한것으로 글을 작성하기 전에 html모드에서 다음의 코드를 삽입하고 목차가 생성되어야 하는 소제목 부분을 제목2 또는 제목3으로 적용하게 되면 목차가 자동으로 생성되는것을 확인 할 수 있습니다.
| <!-- 목차 코드 시작 --> <p data-ke-size="size16">목차</p> <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul> </div> <!-- 목차 코드 종료 --> |
목차를 자동으로 생성하기 위해서 글쓰기시마다 ④번의 코드를 html모드에서 작성해주는것이 귀찮거나 번거롭다면 티스토리 블로그 관리자 메뉴 서식관리에서 해당 코드를 미리 작성하여 저장해 두고 글을 작성할때 목차를 자동으로 생성해야할 글에서 저장된 서식을 불러와서 글을 작성하면 편하게 목차 자동 생성 코드를 자유롭게 이용할 수 있겠습니다.
3. 선택적 필요에 따라서 작성하는 목차.
목차를 작성하는 이유는 앞서도 설명했듯이 구글의 seo최적화로 검색 상위 노출을 위한것이지만 목차를 작성했다고 해서 반듯이 상위 노출이 되는것은 아닙니다.
따라서 중요한것은 무엇보다도 본문 내용이 품질이 우수한 정보를 전달할 수 있는 정보성 글이여야 한다는 기본 전제로 작성이 되어야 하고 아무리 좋은 글을 작성 하더라도 가독성이 떨어진다면 체류시간과 이탈률에 부정적인 영향으로 작용할 수 있다고 할 수 있습니다.
결론적으로 글을 작성할때 목차를 항상 필수적으로 작성할 필요는 없고 가독성을 해치지 않는 범위라는 관점에서 봤을때 짧은글에서는 목차를 작성함으로 인하여 가독성을 해칠 우려가 있을 수 있기 때문에 짧은글에서의 목차 작성은 가독성을 해치는 불필요한 요소로 작성할 수 있다는점을 참고 하셔서 목차를 작성해 주는것이 좋겠습니다.
'애드센스,티스토리 수익' 카테고리의 다른 글
| 티스토리 애드센스 승인 글쓰기 방법. (0) | 2022.11.02 |
|---|---|
| 티스토리 북클럽 스킨 사이드바 인기글, 최신글 노출 순서 변경 분리 방법. (0) | 2022.11.01 |
| 티스토리 블로그 본문 기본 색상 변경 방법. (0) | 2022.10.31 |
| 애드센스 상단 광고 좌, 우 1개씩 2개 삽입 하는 방법. (0) | 2022.10.28 |
| 티스토리 블로그 애드센스 본문 광고 코드 사라지는 현상 해결 방법. (0) | 2022.10.28 |
댓글