티스토리 HTML ID, NAME 속성으로 내부링크 걸기

블로그 글을 적다가 내용이 많아질 경우 좀 더 효율적으로 내용을 전달 할 수 있는 방법이 없을까 고민을 하게 됩니다.

그래서 쓰이는게 바로 '목차 바로가기'입니다.

뒤에 나올 글 내용들의 목차를 나열한 후 클릭하면 바로 해당 글로 옮겨가는 것이죠.

티스토리 플러그인에서 제공해주는 '이전 글 넣기'와 비슷한 개념이지만 엄연이 다른 기능입니다.

'이전 글 넣기'는 링크를 통해 다른 페이지에 있는 글을 불러오지만, '목차 바로가기(목차 기능)'는 같은 페이지의 해당 글로 바로 넘어간다고 생각하시면 됩니다.

 

 

실제로 구글 SEO에 도움이 되는 태그지만 귀찮아.

 

구글 SEO는 기본적으로 HTML의 공식 태그를 최대한 활용하는 걸 적극 권장합니다.

특히 이 기능을 이용한 웹 사이트 대부분 상위에 랭킹이 되어있어 그냥 지나칠 수 없는 문제입니다.

하지만, 이 목차 기능은 아쉽게도 티스토리에 기능이 없어 일일이 HTML을 건드려야 하는 불편한 점이 있습니다.

대부분의 글에 HTML을 열어 수정하려면 귀찮으니, 정성을 들여 쓴 포스팅에는 반드시 해주도록 합시다.

 

 

 

ID 속성을 이용한 내부 링크

 

모든 내부 링크는 HTML a 태그를 이용하며 id속성과 이름을 이용한 속성 총 2가지 방법이 있습니다.

<li> 태그는 리스트를 만들기 위한 태그이며 <a id="#태그 영문명>을 적으면 됩니다.

그 후 이동하고자 하는 부분에 id=태그 영문명을 입력하면 끝입니다.

처음에는 무슨 말인가 이해도 안 되고 어렵지만, 아래 보이는 예제를 눌러보면 이해가 쉽게 되실 겁니다.

<ul> 행성으로 바로가기
    <li><a id="#earth"> 지구</a><li>
    <li> 목성 </li>
    <li> 토성 </li>
</ul>


<p id="earth"> 지구 </p>
<p> 목성 </p>
<p> 토성 </p>

 

이름 속성을 이용한 내부 링크

 

ID 속성과 별 차이는 없으며 태그가 ID -> NAME 으로 변경된 정도입니다.

기능은 같으니 둘 중에 사용하기 편한 걸로 쓰시면 됩니다.

<ul> 행성으로 바로가기
    <li><a name="#earth"> 지구</a><li>
    <li> 목성 </li>
    <li> 토성 </li>
</ul>


<p name="earth"> 지구 </p>
<p> 목성 </p>
<p> 토성 </p>

 

HTML 코드를 활용한 예제

 

아래 리스트에 원하는 정보의 행성을 하나 눌러 줍니다.

 

● 이 소스는 미리보기에 작용이 안되며 반드시 글을 발행해야 작동이 됩니다.

 

행성으로 바로가기
• 지구의 정보로 이동
• 목성의 정보로 이동
• 토성의 정보로 이동

 

지구

지구에는 무수한 동물들과 식물들이 살고 있다.

지구에는 연예인과 비연예인이 살고 있다.

지구에는 엄마와 아빠가 살고 있다.

지구에는 블로그가 엄청나게 많다.

지구는 현재 몸살을 앓고 있다.

푸른 지구 우리가 지키자.

 

목성

목성에는 무수한 동물들과 식물들이 살았을까?

목성에서 연예인 활동을 과연 할 수 있을까?

목성에 엄마와 아빠가 살고 있으면 대박!

목성에서 블로그를 하고 있다면 투데이가 얼마일까?

목성은 현재 아픈지 안 아픈지 모르겠다.

목성 너희가 지켜라.

 

토성

토성에는 무수한 동물들과 식물들이 살았겠지?

토성에서 연예인 활동을 하면 토 나오겠다.

토성에는 엄마와 아빠가 산적이 없다.

토성에서 블로그를 하면 1일 1 포스트가 가능할까?

토성에도 로나가 걸릴까?

토성은 나메크 성인이 지켜라.