기본 콘텐츠로 건너뛰기

구글 블로그 자동 목차 넣는 방법

블로그를 운영하는 사람들에게 SEO는 상당히 중요한 부분이기도 합니다. SEO는 검색엔진 최적화를 의미하는 것이기 때문이죠. 일반적으로 포스팅의 목차는 SEO에 긍정적인 영향을 준다고 합니다.

티스토리, 워드프레스와 같은 블로그 사이트에서 자동 목차를 이용합니다. 그만큼 많은 정보가 공유되기 때문에 손쉽게 자동 목차를 넣을 수 있습니다.

구글 블로그인 블로그스팟의 경우, 국내에서는 아직 많은 정보가 공유되지 않아 어려운 부분도 있습니다. 또한, 아주 간소한 기능만 제공하기 때문에 처음 시작하는 것이 쉽지 않게 느껴질 수 있습니다.

이번에는 구글 블로그 포스팅에서 자동으로 목차가 적용될 수 있도록 설정하는 방법을 알아보도록 합니다. HTML, CSS, 글 템플릿 기능을 이용합니다.

    포스팅에서 목차가 중요할까.

    포스팅에서 목차는 여러 의미에서 중요하게 다뤄지곤 합니다. 가장 대표적으로 SEO에 긍정적인 영향을 줄 수 있다고 알려져 있습니다. 다만, 많은 사용자들의 추측에 가까운 것이기에 목차는 선택사항이 아닐까 생각합니다.

    그럼에도 포스팅에 자동 목차를 넣는 이유는 다음과 같습니다.

    1. 사용자에게 긍정적인 페이지 경험을 줄 수 있습니다.
      • 아무리 잘 정리한 글이라도 방문자가 원하는 내용은 내용의 일부일 수 있습니다. 빠르게 원하는 정보를 얻을 수 있다면, 방문자는 해당 사이트에 긍정적인 이미지를 가질 수 있습니다. 이는 방문자의 재방문으로 이어질 수 있습니다.
    2. 글의 내용이 잘 정리되어 전달될 수 있습니다.
      • 원하는 정보를 얻기 위해 검색을 통해 방문한 사람은 지쳐있을 수 있습니다. 아주 잠깐이지만 글을 훑어 보는 것조차 피로감을 느낄 수 있습니다. 목차가 있다면 이런 피로감을 줄여줄 수 있습니다.
      • 해당 페이지에서 제공하는 내용을 빠르게 파악할 수 있으며, 원하는 내용을 보다 쉽게 찾아 볼 수 있습니다.

    목차는 방문자에게 긍정적인 이미지를 주며, 해당 사이트에 재방문할 수 있는 여지를 남겨줄 수 있습니다. 또한, 글의 구성을 한눈에 파악할 수 있다는 장점이 있습니다.

    html, css등에 경험이 없다면 조금 어렵게 느껴질 수 있습니다. 단계별로 차근차근 진행하면 도움이 될 것입니다.

    HTML 코드 넣기

    먼저, HTML 코드를 넣습니다. 구글 블로그 테마에서 html 편집을 이용합니다. 해당 기능에는 기본 html 코드와 css 및 script코드가 포함되어 있습니다.

    </head>태그 위에 아래의 코드를 넣어줍니다.

    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'>
//<![CDATA[
//*************Table of Content (TOC) plugin by anantvijaysoni.in
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}}
//]]>
</script>


     1. 구글 블로그 html 편집 찾기


    2. </head>찾기


    ※ html 주석 처리 방법 : <!--내용-->

    CSS 코드 넣기

    위에서 언급한 방법을 이용해 구글 블로그 html 편집 페이지에서 css를 수정 및 보완할 수 있습니다. 여기서는 주어진 코드를 넣어주는 것으로 목차에 css를 적용할 수 있습니다.

    .avsTOC{border:1px solid #595757;
box-shadow:1px 1px 0 #656565;
background-color:#EFEDED;
color:#656565;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:oswald, arial;display: block;
width: 70%;}
.avsTOC ol,.avsTOC ul {margin:0;padding:0;}
.avsTOC ul {list-style:none;}
.avsTOC ol li,.avsTOC ul li {padding:15px 0 0;
margin:0 0 0 30px;font-size:15px;}
.avsTOC a{color:#656565;text-decoration:none;}
.avsTOC a:hover{text-decoration:underline; }
.avsTOC button{background:#EFEDED;
font-family:oswald, arial; font-size:20px;
position:relative;
outline:none;cursor:pointer; border:none;
color:#656565;padding:0 0 0 15px;}
.avsTOC button:after{content: "\f0dc";
font-family:FontAwesome; position:relative;
left:10px; font-size:20px;}

    html 편집페이지에서 ]]></b:skin>를 찾아줍니다. 해당 부분 위에 CSS코드를 입력합니다.



    ※ CSS 주석 처리 방법 : /*내용*/

    <data:post.body/> 수정

    해당 부분을 수정하는 이유는 정확하게 모릅니다. 단지, 수정해야만 목차를 넣을 수 있다고 합니다. 우선 적용을 위해 해당 부분을 수정합니다. 만약, 저와 같은 초보라면, 기존 내용을 주석으로 처리한 후 입력하는 방법을 사용하는 것을 추천합니다.


    글 템플릿에 자동 목차 넣기

    기본적으로 글을 작성할 때, 필요한 위치에 목차를 넣는 방법을 사용할 수 있습니다. 다만, 조금 귀찮은 부분이 있습니다.

    글을 작성하는 과정에서 개인의 성향에 따라 글의 양식이 정해지게 됩니다. 즉, 목차의 위치도 대략적으로 비슷하게 됩니다. 글 템플릿을 이용하면, 지정된 위치에 자동으로 목차를 넣을 수 있습니다.

    단, 목차에 적용되는 소제목이 없는 글의 경우 빈 목차 영역만 보여지게 됩니다. 소제목이 없는 경우라면 목차 부분을 삭제한 후, 저장하는 것이 좋겠죠.


    1. 글 템플릿 설정 페이지


    2. 원하는 위치에 코드 넣기

    - 목차가 페이지에 적용되기 위해서는 두가지의 코드를 넣어야 합니다. 목차를 넣을 위치에 사용되는 코드가 있으며, 글의 마지막에 넣어줘야하는 스크립트코드가 있습니다. 목차를 넣고 싶은 위치에 다음과 같은 코드를 넣습니다.
    <div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

    - 글 템플릿에 입력된 내용 중 가장 아래에 다음과 같은 코드를 넣습니다.

    <script>avsTOC();</script>

    마무리.

    위의 과정을 통해 본 포스팅에 적용된 목차와 같은 모습을 볼 수 있습니다. 일반적으로 목차는 서론이 끝난 후 많이 넣기도 합니다. 개인의 취향, 필요성에 따라 달리 사용할 수도 있습니다. 

    마지막 '글 템플릿'에 넣은 두 코드를 이용해 원하는 위치에 목차를 넣어줄 수 있습니다. 글 템플릿을 잘 활용하면 보다 빠르고 쾌적하게 구글 블로그 포스팅을 이어갈 수 있습니다.

    라벨:

    댓글

    댓글 쓰기

    이 블로그의 인기 게시물

    애드센스 보고서 보는 방법(날짜별, 일별)

    애드센스를 운영하다보면 차트를 수시로 보게 됩니다. 수익이 많이 잡히는 것이 아니어도, 단 1클릭만 발생하면 체크하는 자신을 발견할 수 있습니다. 많은 경험이 있는 사람들은 '그 시간에 1개의 포스팅을 해라'라는 이야기를 하기도 합니다. 너무나 좋은 이야기임에 분명하지만, 사람의 마음이 또 그렇지 않습니다. 오늘은 얼마의 수익이 발생했는지 확인하고 싶어지기 때문이죠. 애드센스 홈페이지에 방문한 후, '보고서'를 통해 수익을 확인할 수 있습니다. 보고서는 기본적으로 '지난 7일'을 기준으로 합니다. 전체 수익을 보여주게 되는데요. 전체적인 통계를 보는 방법으로 괜찮습니다. 하지만, 하루 수익을 보기 위해서는 별도의 설정이 필요합니다. 수익이 발생하여 기쁜 마음과 궁금증으로 애드센스를 보기도 하지만, 분석을 위해서 보는 경우도 있습니다. 7일을 기준으로 보고서를 보는 경우 수익변화를 분석하는데 도움이 되지 않을 수 있습니다. 자주 이용하는 방법은 일별 수익 변화이기 때문이죠. 이번에는 애드센스 보고서 설정을 통해 수익 변화를 살펴보는 방법을 알아봅니다. Contents 애드센스 보고서 보는 방법 가장 먼저 애드센스 보고서 보는 방법을 알아볼 필요가 있습니다. 애드센스 메인 홈페이지에 접속하도록 합니다. 기본적으로 왼쪽 바이드바에는 여러 기능이 있습니다. 만약, 사이드바에서 아이콘만 보인다면 상단에 있는 햄버거 버튼(가로줄 세개) 아이콘을 클릭합니다. 위 사진을 참고하면 됩니다. 스크롤을 내리면 '보고서' 라는 메뉴를 찾을 수 있습니다. 여기서 본격적으로 '오늘', '지난 7일', '최근 30일', '이번달', '지난달', '맞춤 설정' 등을 진행하여 보고서 양식을 확인할 수 있습니다. 애드센스 보고서 설정하기 보고서 페이지 상단에 있는 기본 설정 탭을 이용합니다. ● 오늘 가장 먼저 활용할 방법은 '오늘...
    댓글 쓰기
    Read more »

    구글 블로거 파비콘 넣는 방법(파비콘 쉽게 만들기)

    웹사이트는 다양한 요소를 기준으로 SEO 점수를 측정합니다. 일부 스팸 사이트의 경우, 세밀한 설정을 생략한 후 다량으로 생성되는 콘텐츠만 이용하기도 하죠. 사이트를 상징할 수 있는 것으로 대표되는 것은 파비콘, 로고, 도메인이 있습니다. 구글 블로거에서 파비콘을 넣는 방법을 알아봅니다. 또한, 보다 쉽게 파비콘을 만드는 방법도 살펴봅니다. Contents 구글 블로거 파피콘 등록하는 방법 ① 블로거 설정 메뉴 구글 블로거에는 다양한 기본 설정을 조절할 수 있는 메뉴가 있습니다. 여기서 파비콘을 등록할 수 있습니다. ② 파비콘 등록하기 설정에 있는 파비콘 메뉴를 선택합니다. 새로운 창이 뜨면서 파비콘을 등록할 수 있는 페이지를 볼 수 있습니다. ③ 파일 선택 및 저장 준비된 파비콘 이미지를 '파일 선택' 기능을 이용해 선택합니다. 페이지에 파비콘이 등록되는 모습이 보인다면 '저장' 버튼을 이용해 서버에 저장할 수 있습니다. 파비콘 설정이 정상적으로 이루어졌음에도 불구하고 자신의 블로그에 파비콘이 나타나지 않는 것은 설정이 적용되는데 시간이 걸리기 때문입니다. 1일~2일 정도 기다리면 적용된 파비콘을 확인할 수 있습니다. 물론, 그보다 짧은 시간에 적용된 모습을 볼 수도 있습니다. 파비콘 쉽게 만들기 파비콘은 웹사이트 탭에서 볼 수 있는 작은 아이콘을 의미합니다. 해당 파일은 '.ico' 확장자로 이루어진 파일을 사용해야 합니다. 원하는 아이콘 파일 혹은 이미지 파일을 준비한 후, ico파일로 변환하여 사용하면 됩니다. 1. 아이콘 혹은 이미지 파일 준비하기 이미지 편집 혹은 만들기가 쉽지 않게 느껴진다면 '무료 아이콘' 사이트를 이용할 수 있습니다. 구글 검색에서 '무료 아이콘'이라고 검색하면 수많은 사이트를 확인할 수 있는데요. 그 중 하나를 살펴보도록 합니다. 👉 flaticon.com 해당 사이트는 무료 벡터 아이콘 및 스티커를 공유하는 사이트입니다. 여기서 사용자가 ...
    댓글 쓰기
    Read more »

    구글 블로그 소제목 꾸미기(ft.블로그 템플릿 설정)

    이미 티스토리, 네이버 블로그에 익숙한 사람들에게 구글 블로그는 참 불편한 서비스임에 분명합니다. 다양한 편의 기능들이 없기 때문이죠. 그나마 워드프레스는 조금 수월하기는 합니다. 그럼에도 구글 블로그를 이용하려는 사람들이 국내에서도 꾸준히 늘고 있습니다. 저도 그렇구요. 불편하면 고치면 됩니다. 기존에 사용하던 티스토리 블로그와 같은 소제목 스타일을 구글 블로그에 사용하는 방법에 대해서 알아봅니다. 구글 블로그 소제목 설정 티스토리, 워드프레스에는 css를 편집할 수 있는 툴이 존재합니다. 구글 블로그에도 분명 이런 기능이 있습니다. 다만, css를 추가 혹은 편집한 결과를 보는 방법이 익숙하지 않기도 합니다. 티스토리에서 가장 많이 사용하게 되는 글 형식을 미리 불러오는 방법으로 '서식'을 이용하게 됩니다. 구글 블로그에도 티스토리 블로그의 '서식'과 비슷한 기능이 있습니다. 설정에서 찾을 수 있는데요. 바로 " 글 템플릿 "입니다. 글 템플릿이란, 새 글을 작성할 때 미리 설정한 템플릿(서식)을 불러오게 됩니다. 이렇게 불러온 서식에 원하는 글을 작성하는 방법입니다. 글 템플릿 설정 방법 이제 본격적으로 구글 블로그의 글 템플릿 설정 방법을 알아보도록 합니다. 구글 블로그 '설정'에서 '글' 메뉴를 찾으면 됩니다. 구글 블로그 설정 > 글 > 글 템플릿 지정 1. 구글 블로그 설정 구글 블로그에 접속하면 기본적으로 사용자 관리 페이지로 보여지게 됩니다. 처음에는 이 심플한 모습이 낯설기만 하죠. 왼쪽에는 다양한 기능들이 모여있는 사이드바가 존재합니다. 살펴보면 톱늬바퀴모양의 "설정" 기능을 확인할 수 있습니다. 2. 설정 페이지에서 '글' 영역 찾기 설정 메뉴를 선택하면 다양한 기능들이 주어지는 페이지를 볼 수 있습니다. 스크롤을 내리면 '글'이라는 영역을 찾을 수 있습니다. 하위 메뉴에는 " 글 템플릿(선택...
    댓글 쓰기
    Read more »