반응형
블로그를 포스팅하는 여러가지 이유 중에 하나는 자신의 글을 인터넷 공간에 노출 시킴으로서 여러 사람들이 나의 글을 읽을 수 있도록 하는 것입니다. 그런데 어떻게 하면 나의 글이 포털 사이트에서 노출이 많이 될 수 있게 만들 수 있을까 하는 것입니다. 다른 말로 SEO 라는 것이지요.
구글의 SEO 항목중 중요한 하나가 내부링크 (internal link)입니다. 내부링크는 블로그로 말하면 블로그 내부에 있는 각각의 글들을 서로 링크해 주는 것입니다. 이런 기능은 티스토리의 경우 플러그 인중에서 "이전글 넣기" 기능으로 가능합니다.
그런데 하나의 글 안에서 이동하게 해주는 기능 (목차 기능)은 티스토리에 없어서 html 코딩으로 해주어야 합니다. 이 코딩은 아주 간단해서 여기에 소개해 드리겠습니다.
모든 내부링크는 a 태그를 이용해서 해줍니다. 오늘 소개해 드릴 내부링크 방법은 id 속성과 name 속성을 이용한 2가지 방법입니다.
id 속성을 이용한 내부링크
먼저 이동하고자 하는 곳의 태그(여기서는 김치 p 태그)로 이동해서 id를 입력합니다. 입력 방식은 id="kimchi" 이런 식으로 적습니다. 두번째로 목록에서 a 태그를 이용하여 id를 지정해 주면 됩니다. 입력방식은 <a id="#kimchi"> 이런 식으로 id 식별자 앞에 #를 붙이면 됩니다.
<ul> 반찬종류
<li><a id="#kimchi"> 김치 </a></li>
<li> 계란 후라이 </li>
<li> 장조림 </li>
</ul>
<p id="kimchi"> 김치 </p>
<p> 계란 후라이 </p>
<p> 장조림 </p>
name 속성을 이용한 내부링크
먼저 이동하고자 하는 곳의 태그(여기서는 계란후라이 p 태그)로 이동해서 a 태그를 입력하고 name 속성을 입력합니다. 입력 방식은 <a name="egg"> 이런 식으로 적습니다. 두번째로 목록에서 a 태그를 이용하여 name을 지정해 주면 됩니다. 입력방식은 <a name="#egg"> 이런 식으로 id 식별자 앞에 #를 붙이면 됩니다.
<ul> 반찬종류
<li> 김치 </li>
<li> <a name="#egg"> 계란 후라이 </a></li>
<li> 장조림 </li>
</ul>
<p> 김치 </p>
<p> <a name="egg"> 계란 후라이 </a></p>
<p> 장조림 </p>
화살표 아래 쪽에 내부링크를 걸어보는 예를 올렸습니다.
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
HTML 내부링크를 이용한 목차
name 속성 보다는 id 속성을 이용한 내부링크가 더 편리한 것 같습니다. name는 a 태그를 한번 더 써줘야 하는 데 id는 기존에 있는 태그에 단순히 id를 입력만 하면 되니깐요. 오늘은 간단한 html 코드에 대해 배워봤습니다.
반응형
