도정이의 하루

SEO 글쓰기 양식의 기본, H태그란?

지난 게시글에서 우리는 SEO 글쓰기란 검색엔진이 읽기 편하도록 최적화하는 작업이라고 했습니다. 그리고 이번 게시글은 검색엔진 최적화를 위한 기본적인 양식은 어떻게 구성되어 있는지 알아보도록 해봅시다.

▶이전글: 초보 블로거 생존일지 01 - SEO 글쓰기에 대하여

먼저 검색엔진은 게시글을 읽어들일때 우리들의 눈에 보이는 그래픽적인 구성요소를 전부 제외하고 HTML이라는 코드로 읽고 해석하게 됩니다. 티스토리 블로그를 운영하고 계신 분들은 스킨 편집을 위해 적어도 한 번이라도 HTML창을 열어 보셨을 겁니다. 

그렇다면 우리가 HTML을 배워야하고 코딩도 할 줄 알아야 하나라는 질문에 저는 단호하게 아니오라고 했습니다. 우리는 일반인의 입장에서 받아들이고 해석할 줄만 알면 된다고 했습니다. 예를 들어서 사과는 사과로 받아들이는 것과 같은 겁니다. 우리가 사과의 화학적 성분이 무엇인지, 어떻게 재배하는지, 어디서 자라서 어떤 경로로 유통되는지는 그 이후에 알아가면 되는 겁니다. 

HTML에서 H태그란 헤딩태그라고 합니다. 검색엔진은 H태그를 통해서 글의 제목, 소제목, 내용 등을 파악하게 됩니다. 이러한 H태그는 티스토리뿐만 아니라 대부분의 웹페이지는 HTML로 이루어져 있으므로 공통된 구성요소라고 생각하면 됩니다. 결론은 우리는 HTML에서 H태그를 순서대로 배치하는것이 검색엔진 최적화 글쓰기를 위한 양식의 기반이라는 겁니다. 그렇다면 티스토리에서 H태그를 올바르게 배치하는 방법에 대해서 알아보도록 합시다.

티스토리에서 H태그 옳바르게 활용하는 방법

티스토리에서 글쓰기 화면으로 진입하면 화면 상단에 문단모양이라고 하는 탭이 있습니다. 여기에는 제목 1~3, 그리고 본문 1~3으로 나누어 진걸 확인하실 수 있습니다. 아마 H태그에 대해서 전혀 접하지 않으신 상태에선 이 탭이 그저 제목과 본문 글씨 크기만 다른가 보다고 생각하실 겁니다. 

이쯤 돼서 눈치채신 분은 아시겠지만, 바로 문단모양 탭이 티스토리에선 H태그를 배치하는 아주 중요한 요소입니다. 아래의 그림과 같이 문단모양 탭을 활용하여서 임의의 게시글을 발행해 보도록 하겠습니다.

그렇다면 HTML에서 H태그가 어떻게 적용됐는지 확인해봅시다. 우리가 발행한 글에서 우클릭을 하면 페이지 소스보기를 클릭해 줍니다. 

H태그 구성을 보면 처음 제목이 h1, 문단모양 탭에서 제목1=h2, 제목 2=h3, 제목 3=h4가 되는 겁니다. 검색엔진이 우리 글을 읽지 말지 판단할 때에 제목과 관련된 h1태그를 가장 먼저 읽게 됩니다. 즉, 이 h1의 중요도가 가장 높고 하나의 게시글에 h1은 한 번만 쓰여야 합니다.

결론은 글쓰기 가장 상단에 제목을 입력하세요라는 항목이 h1태그가 되어야하는 것이고 내용 부분 시작 시 제목 1부터 차례로 작성하면 대부분의 h태그는 순서대로 배치하게 됩니다. 

그러면 여기서 눈치채신 분들도 계실겁니다. 저는 SEO 글쓰기를 하기 위한 첫 번째로 문단모양 탭을 활용하여 h태그를 순서대로 사용하고 있습니다. 그렇기 때문에 게시글 자체 양식이 통일되지 않고 위의 임시발행 게시글처럼 글씨체도 점점 작아지고 제목 디자인도 달라서 가독성은 떨어집니다.

HTML은 웹 페이지를 구성하는 코드라고 했다면 CSS는 우리의 눈에 보여지는 화면을 구성하는 코드라고 생각하시면 됩니다. 다음 시간에는 이용자들이 보기 편하도록 HTML코드에 디자인을 입히는 CSS코드를 수정해 보도록 합시다. 

SEO, 그것은 대체 무엇인고?

어느 플랫폼에서든 블로그 운영과 관련된 내용 중에 많이 접하는 용어가 SEO가 아닐까 합니다. 정보의 바다라고 한 번쯤은 들어보셨을 거예요. 하지만 지금은 정보가 전달되는 속도와 쏟아지는 양을 보자면 우리는 정보의 우주 속에서 살고 있다고 해도 과언이 아니에요. 지금 제가 글을 적고 있는 이 순간에도 정보는 어디선가 쏟아지고 있어요. 마치 우주가 팽창하는 것과 비슷해요. 

현재의 검색엔진은 시시각각으로 팽창하는 정보의 우주 속에서 사람들의 의도를 정확히 파악하여 양질의 정보를 제공하도록 개발되었죠. 알고리즘의 발달로 물리적인 한계를 극복하였고 이제는 인공지능(Artificial Intelligent, AI)의 비약적인 발전으로 완벽한 수준의 필터링을 통해 정보가 제공되고 있어요.

결국 블로그를 운영하는 큰 목적은 우리의 이야기를 많은 사람들에게 공유하고 싶어서예요. 그렇지만 이제는 우리가 어떤 큰 뜻을 가지고 글을 작성하던 검색엔진의 간택을 받지 못하면 저 우주 속에 버려질 뿐이에요. 즉, 검색엔진이 좋아하는 글을 써야 한다는 겁니다. 그래서 SEO란 Search Engine Optimization의 약자예요. 한국어로 직역하면 검색엔진 최적화라고 합니다. 지금까지 제가 주저리주저리 설명하면서 말하고 싶은 것을 딱 한 줄로 요약하자면 다음과 같아요.

SEO(검색엔진 최적화)란 검색엔진이 찾고자 하도록 글을 작성하는 것을 말한다. 

SEO 글쓰기는 어떻게 하는데?

다음을 포함하여 구글, 네이버 등등 SEO글쓰기 하는 방법을 치면 논문에서나 나올법한 그림까지 동원하여 자세히 설명해 주는 블로거 분들도 많습니다. 키워드도 맞춰야 하고 제목과 소제목도 있어야 하고 글이 끝까지 읽혀야 할 정도로 글도 잘 써야 하고 갑자기 이제 또 HTML창도 열어서 코드도 봐야 하고 할게 너무나도 많아 보이죠.

결론적으로 말씀드리면 우리가 검색해서 나오는 SEO 글쓰기 방법은 하나도 빠짐없이 모두 맞아요. 이렇게 말씀드리면 덜컥 겁이 나 시는 분들도 많을 거예요. 나는 글을 잘 못쓰는데 그러면 상위노출은 포기해야 하는 건가, 또는 저 많은 방법들을 하나하나 신경 쓰면서 어떻게 포스팅을 할까 걱정이 태산이시겠죠.

그렇지만 여러 프로 블로거 분들의 글을 자세히 읽어보면 한 가지 결론을 내릴 수 있어요. SEO 글쓰기는 검색엔진이 좋아하는 양식에 맞춰서 써내려 가면 된다라는 거예요. 우리가 잘 보여야 하는 검색엔진이라는 건 결국에는 컴퓨터 프로그래머로부터 만들어진 하나의 코드라는 겁니다. 그래서 저는 SEO 글쓰기의 기초는 글을 잘 쓴다가 아니라 검색엔진이 요구하는 양식에 맞게 작성만 하면  90% 이상은 준비가 되었다고 생각해요. 일단 검색엔진이 요구하는 양식이 뭔지 이해를 하는 게 최우선이라고 보입니다. 

검색엔진이 원하는 양식에 대한 이해가 SEO 글쓰기의 시작이다.

그러면 SEO 글쓰기 양식이라는 걸 만들어야 하는 거야?

그렇다면 여기까지 읽은 우리들은 SEO 글쓰기를 위한 양식이 대체 뭐고 어떻게 만들어야 할지 고민이 될 거예요. 검색엔진은 프로그래머가 만든 코드라고 제가 정의했고 그렇다면 코딩을 할 줄 모르는데 검색엔진이 원하는 양식이라는 것도 코드면 어떻게 하지라고 생각하시겠지요. 맞습니다. 기본적으로 HTML이라고 하는 웹페이지 구성 언어를 통하여 우리가 작성한 글들을 수집하는 거예요.

그렇다면 HTML을 공부해야 하는 걸까라고 생각 드실 수 있어요. 하지만 프로그래밍 언어를 공부하는 건 또 다른 영역이에요. 우리들은 우리의 글을 작성하기 위한 HTML 구성을 이해하고 해석하기만 할 줄 알면 돼요. 

다음 포스팅에선 검색엔진이 우리 글을 읽을 때 가장 중요하게 확인하는 것들이 무엇인지 이해하고 SEO 글쓰기를 위한 기본적인 HTML 구성에 대해 같이 알아보도록 해요.

※ IT분야 전문가 분들이 보시기에 어색하고 더 나아가 틀린 부분이 많을 수 있습니다. 처음 블로그를 시작하는 입장에서 여러 글들을 읽어보고 해석하는 과정에 생기는 실수로 여기어 주시고 댓글로 의견 남겨주시면 반영하도록 하겠습니다. 감사합니다.

사실 블로그라는 것을 네X버에서 제공해 주는 템플릿 외에는
한 번도 해본 적이 없었기에 HTML이니 CSS니 뭐니 처음 들었을뿐더러
코딩과는 거리가 먼 공돌이 인생을 살고 있습니다.

사실 여러 티스토리를 눈팅하면서 공통된 의견으로는
"티스토리 스킨을 손댈 바에 게시글을 1개라도 더 써라"라고 하더라고요.
그래서 게시글을 올리는데 집중하려고 했으나....
설계 쪽 공돌이라 그런지 눈에 가시가 돋친 듯 신경 쓰여서
아주 소소한 부분만 바꿔보기로 했어요.

일단 제 블로그는 감성 카드가 모여져서 홈 화면을 꽉 차 보이게 하고 싶었습니다.

그런데 Square스킨에서 기본 레이아웃은 '전체 글' 박스가 상단으로 배치되어 있습니다.

저는 이 '전체 글' 박스를 아래로 내리는 작업을 해볼까 합니다.

이제 HTML코드 수정을 해줘야 합니다.

정말 코딩 1도 모르는 사람의 입장에서 엄청나게 힘들더군요. 

그나마 영어 단어가 뭘 의미하는지 검색하고 따라가 보고 하니까 실마리를 찾았습니다.

시작해 봅시다.

관리자 계정 페이지에서 HTML편집 화면으로 접속해 줍니다.

관리자 화면 왼쪽 사이드바에서 스킨 편집을 클릭하면
새로운 창이 열리고 스킨 편집 화면이 나타납니다.

여기서 화면 우측에 'html 편집' 버튼을 눌러줍니다.

그러면 이제 엄청난 기호들과 영어가 적힌 코드 창이 나타나게 되는데요.

여기서 ctrl+F를 누르면 '검색기'가 켜집니다.

그리고 입력창에 's_list'라고 입력해 주세요.

(하이픈(-) 아니라 언더바(_)입니다)

제대로 찾았다면 아래의 화면에 보이는 코드의 시작과 끝을 정확하게 똑같이 드래그한 후 잘라내기 합니다.

그런 다음 위의 검색기에서 s_sidebar_element를 검색해 준 다음, 그 아래에 통으로 붙여 넣기 합니다.

정상적으로 따라오셨다면 아래와 같이 '전체 글'이 하단으로 이동한 것을 보실 수 있어요.

간단한 코드 잘라내고 이동시키는데 엄청나게 많은 정보 검색과 노력이 필요하네요.

티스토리 블로그 운영은 쉬운게 아니라는 게 몸소 체험해 보는 시간이었습니다.

별거 아닌 게시물인거 같지만 간단한 이미지를 준비하는데도 꽤 많은 시간이 소요가 되네요.

혹여나 코딩에 대한 두려움이 정신과 몸을 지배당하신 분들에게 조금이나마 도움이 되었으면 좋겠습니다.

감사합니다.

(아 마지막으로 아예 '전체 글' 박스를 날려버리고

싶으시면 저 코드 자체를 지우시던가 주석처리하시면 됩니다.

저는 혹시나 모를 상황에 대비해서 주석처리 하는 걸 추천드려요.)