티스토리나 워드프레스 등 블로그를 시작하셨다면 글을 어떻게 쓰셔야 하는지 고민이 많으실 거라 생각합니다. 이번 포스팅에서는 구글이 좋아하는 글쓰기, 즉 구글 SEO 전수를 올릴 수 있는 글을 쓰기 위한 팁으로 HTML의 각종 태그에 대해 알려드리겠습니다.
메타 태그, meta tag 사용 방법 : 사이트의 정보를 구글에 알려주자!
메타 태그는 <head> 태그 안에 사용하는 태그로 키워드, 사용 언어와 같은 웬 문서의 정보를 제공해 주는 태그입니다. 아래 테이블을 보시면 메타태그의 속성, 값, 기능에 대해 알 수 있습니다.
속성 | 값 | 기능 |
name | application-name | 웹 사이트의 이름 |
author | 문서의 저작자 | |
description | 문서에 대한 설명 | |
keywords | 문서의 키워드 | |
http-equiv | content-type | 문서의 인코딩 |
default-style | 대체 스타일시트 선언 | |
refresh | 문서의 새로고침 추가 | |
content | 텍스트 | http-equiv의 속성 name의 속성 |
charset | 문자셋 | 문서의 표현 언어 |
이제 이것을 활용하여 실제 구글 SEO 점수를 올리기 위해 티스토리에 있는 스킨 편집의 HTML을 보도록 해보겠습니다.
<meta charset=”utf-8″/>는 표의 속성에서 charset을 사용했으므로 이 문서가 “utf-8” 문자셋인 한글을 표현할 수 있는 문서라는 것을 알 수 있습니다. 문서에서 한글을 사용한다면 반드시 이 메타태그를 넣어줘야 합니다.
<meta name=”naver-site-verification” content=”exxx9″/>는 표의 속성에서 name에 application-name을 사용했으므로 웹사이트 이름이 “naver-site-verification”라는 것을 알 수 있고 문서의 내용이 “exxx9″로 정의되어 있다는 것도 같이 알 수 있습니다.
만약 <meta name=”author” content=”서울쥐”/>이렇게 작성된 메타태그가 있다면 속성 name에 값이 author이기 때문에 이 문서의 작성자가 서울쥐는 것을 알 수 있겠죠?
문단 태그 : 블로그 글쓰기 HTML의 가장 기본
문단 태그는 웹문서의 문단을 구분해 주는 태그예요. 보통 많이 쓰는 태그로는 <br>과 <p>가 있습니다.
<br>, </br>은 줄 바꿈 기능으로써 티스토리 상에서 shift키와 enter 키를 동시에 누를 때 사용되는 태그이고 <p>, </p>는 문단을 나누어주는 기능을 하는 태그로써 티스토리 상에서 enter 키만 누를 때 사용되는 태그입니다.
<br>과 <p>가 정확히 어떤 차이인지 구분이 잘 안 가실 수도 있습니다. <p>는 새로운 문단의 시작을 알리는 태그로써 <br>을 2개 한 것과 동일한 역할을 수행합니다. 실제로 티스토리에서 엔터를 눌러보시면 한 줄 사이즈의 빈 공간이 생기는 것을 보실 수 있습니다.
문자 태그 : 티스토리, 워드프레스 글쓰기 시 반드시 알아야!
문자 태그는 문자의 모양과 관련된 태그입니다. 문자 태그의 종류를 한번 살펴볼까요?
◆ <i>, </i> : 흘림체, italic.
◆ <b>, </b> : 강조체, bold.
◆ <code>, </code> : 프로그램 코드체.
◆ <strong>, </strong> : 강조체, strong.
◆ <em>, </em> : 강조체, emphsized.
◆ <sup>, </sup> : 윗 첨자, superscript.
◆ <sub>, </sub> : 아래 첨자 subscript.
◆ <h1~h6>, </h1~h6> : 문서의 제목을 표시.
종류가 많죠? 사용하는 방법은 어렵지 않습니다. 예를 들어 ‘서울쥐’라는 말을 강조하고 싶으면, html에서 <b>서울쥐</b> 이렇게 하면 서울쥐가 강조된답니다. 이런 식으로 표현하고 싶은 말 좌우로 시작 태그와 끝 태그를 넣어주면 문자가 문자 태그가 반영되어 출력됩니다.
워드프레스나 티스토리를 하면서 흘림체나 강조체 같은 경우에는 신에디터에서 쉽게 이용할 수 있으니 굳이 따로 문자 태그를 사용할 필요는 없지만 위 첨자, 아래 첨자, 문서의 제목은 알아두시면 유용할 겁니다. 특히 과학이나 수학적 내용을 적을 때는 위, 아래 첨자가 정말 많이 쓰이기 때문입니다.
구글 SEO 핵심 : 이미지 태그, 알트 태그, Alt tag
이미지 태그는 웹문서에 이미지를 삽입하기 위한 태그입니다. 티스토리에서는 ‘첨부’를 누른 후 ‘사진’을 누르면 쉽게 이미지가 들어가서 따로 html에서 이미지 태그를 이용할 필요는 없습니다. 하지만 이미지가 너무 크면 웹문서를 열 때 시간이 오래 걸리기 때문에 속성을 확인하시고 파일 크기를 줄여주셔야 합니다.
이미지 태그의 대표적인 속성 5 개는 아래와 같습니다.
◆ src : 이미지 경로 표시
◆ alt : 이미지 설명문 (이미지가 표시되지 않으면 출력되는 문자)
◆ width : 이미지의 가로 크기
◆ height : 이미지의 세로 크기
◆ loading : 이미지 로딩 방식 (eager : 모든 이미지 표시, lazy : 사용자가 볼 수 있는 일정 이미지만 표시(속도 증가))
이미지 파일을 올리게 되면 아래와 같은 형식으로 됩니다.
<img …, width=”200″, height=”250″,…>
다른 것을 볼 필요도 없이 width와 height만 보면 내 사진 파일이 몇 픽셀짜리인지 알 수 있습니다. width=”200″은 가로가 200픽셀이라는 뜻이고 height=”250″은 세로가 250픽셀이란 뜻입니다.
여기서 중요한 것 하나를 알려드리면 이미지를 첨부할 때 구글 SEO (Search Engine Optimization)가 좋아하는 형식으로 사진을 올려야 구글 노출이 더 잘된다는 점 입니다. 구글 SEO가 좋아하는 형식이란 이미지 태그 안에 alt 속성을 꼭 넣어주시는 거예요. 일명 알트 태그라고 부르는 것입니다.
우리가 이미지를 티스토리에 올리고 html에 들어가면 <img …, width=”xx”, height=”xx”,…>이렇게 되어있는데, 여기서 alt=”간단한 사진설명”을 넣어주셔야 구글 SEO가 좋아합니다.
alt 속성을 어떻게 넣냐면 그냥 이미지 태그 안에 아무데나 넣으면 되는데 저는 height 속성 뒤에 넣습니다. <img …, width=”xx”, height=”xx”, alt=”xx”,…> 이런 식으로 말이죠.
여러분들도 꼭 티스토리에서 이미지를 넣으실 때 사진 아래에 사진설명과 함께 html 편집에 들어가셔서 알트 태그를 넣으시는 걸 추천드립니다.
하이퍼링크 태그 : 구글 SEO 점수를 위한 외부 링크 걸기
하이퍼링크 태그는 하이퍼링크를 웹문서에 사용할 수 있게 해주는 태그입니다. <a>태그로 사용합니다.
하이퍼링크 태그의 속성에는 크게 3개가 있습니다.
◆ href : 링크주소를 선언하는 곳.
◆ target : 링크처리 방법.
▷ “_self” : 현재 창에서 링크처리
▷ “_blank” : 새 창에서 링크처리
▷ “name” : iframe에 할당된 name의 창으로 링크처리
◆ download : 웹브라우저의 설정에 상관없이 링크된 대상을 다운로드.
하이퍼링크 태그를 어떻게 사용하는지 예시를 통해 설명드리겠습니다.
<a href=”사이트 주소” target=”_self”>서울쥐</a>
티스토리 글 작성하실 때 html편집으로 변환해서 이렇게 치시면 ‘서울쥐’라는 글씨에 하이퍼링크가 생기게 됩니다.
이 때 ‘서울쥐’를 클릭하게 되면 입력한 사이트 주소로 넘어가게 됩니다. target을 _self로 했으니 새 창에서 열리는게 아니라 사용하던 창에서 바로 열리겠죠? 새창으로 열고 싶으면 target=”_blank”로 입력하면 됩니다.
divide 태그 : 구글 SEO 고급 기술
divide 태그는 <div>,</div>로 사용합니다. divide 태그는 하이퍼링크 등에 name이나 id를 설정하여 그것을 그룹으로 사용할 수 있게 해주는 태그입니다. 이렇게 설명만 들으면 이해가 잘 안되실 건데, 바로 예제를 보시죠.
<div id = “website”>
<a href=”https://www.daum.net” target=”_blank”>다음</a>
<a href=”https://www.naver.com” target=”_blank”>네이버</a>
</div>
이것을 실행하면 website라는 것을 호출하면 다음과 네이버 하이퍼 링크가 그룹으로 생성이 됩니다. 이렇게 divide 태그를 사용하면 여러 하이퍼링크들을 그룹으로 묶어서 한번에 사용 가능합니다. 이렇게 그룹화를 하여 id나 name으로 간단하게 호출을 이용하고 싶을 때 쓰는 태그가 바로 <div>태그라고 보시면 됩니다.
여기까지 티스토리나 워드프레스로 글을 쓸 때 구글 SEO 점수를 올릴 수 있는 HTML 태그 들에 대해 알아봤습니다. 도움이 되셨으면 좋겠습니다.