개발자 최원의 정보공유쇼

HTML 구조로 본 이상적인 문서 품질의 웹문서 작성 방법 꿀팁

© mrthetrain, 출처 Unsplash

안녕하세요. 개발자 최원입니다.

이번 글에서는, WWW(World Wide Web, 월드 와이드 웹) 서비스, 즉 웹 서비스의 탄생 배경과 웹 문서를 구성하는 요소들에 대해 알아보고, 이를 검색엔진이 어떠한 방식으로 분석에 활용하게 되는지를 근거로 하여, 가장 이상적인 웹문서를 작성하는 기초적인 방법을 소개합니다.

이 글을 읽고 나시면 좀 더 다양한 플랫폼을 통한 노출에 적합한 문서 작성 방법에 대한 고민을 해보실 수 있을거라고 보입니다.

* 네이버 내의 노출을 위한 글이 아니니 염두해주시기 바랍니다.

시작하기에 앞서,

웹 문서를 구성하는 HTML 코드의 구조에 대하여

여러분은 혹시 "index.html"이라는 웹 문서 파일을 알고 계신가요?

웹 프로그래밍 영역에 있는 개발자나 기획자라면 누구나 알고 있을 사실이지만, index.html이라는 파일은 웹사이트의 가장 첫 페이지를 구성하는 파일명중 하나입니다.

index.html이라는 파일명은 2가지의 명확한 목적을 가진 의미를 가지고 있습니다. 이는 웹문서 시장의 최초 탄생 배경, 그리고 웹사이트를 구성하는 구조와 매우 밀접한 관계성이 존재합니다.

index - 색인, 목차, 목록

1. 어떤 것을 뒤져서 찾아내거나 필요한 정보를 밝힘.2. 중요한 단어나 항목, 인명 따위를 쉽게 찾아볼 수 있도록 일정한 순서에 따라 별도로 배열하여 놓은 목록.

html - 웹문서를 구성하는 마크업 언어

하이퍼텍스트 기술용 언어(Hypertext Mark-up Language)

index.html이라는 파일명은 html이라는 언어로 구성된 웹문서 파일이며, 이 파일의 역할은 웹문서의 index라는 의미를 가집니다. 즉, 어학사전의 가장 첫페이지에서 단어가 나열된 목차가 전부 보이듯, 웹사이트를 구성하는 가장 최초 화면에서 보여지게 되는 문서라는 의미가 됩니다.

이렇게 index.html이 시작 페이지를 의미하는 사례가 된 이유는, 최초 HTML이 개발되던 당시에는, 현재와 같은 매우 빠르고 뛰어난 네트워크 시스템이 존재하지 않았기에, 검색 서비스를 제공하지 못하고 있었습니다.

* 검색 서비스는 WWW와 HTML이 개발된 후 SQL이라는 구조 데이터베이스 언어가 개발됨으로서 실현 가능한 기술이 되었습니다.

* 과거의 웹문서 시장은 포털사이트의 구조처럼 포털사업자가 정보를 모아두고, 이를 카테고리 식으로 조회하는 형식으로만 볼 수 있었습니다.

현재 모든 웹문서는 HTML 언어 이외의 다른 언어로 작성된 어떠한 형식의 문서도 존재하지 않습니다.

* XML이라는 계단식 구조 체계를 가진 문서를 작성하던 언어인 XHTML이 발전되어 지금의 HTML이 되었습니다.

그렇기 때문에, 전세계의 검색엔진들은 모든 웹문서 분석 및 수집 엔진을 통해 HTML의 구조를 분석하고, 이에 따라 웹문서에 대한 사용상 평가, 접근성 평가 등을 진행하고, 이를 바탕으로 분석한 제목, 소제목, 본문, 요약, 사진, 영상, 하이퍼링크 등 웹문서를 다양하게 구성하는 요소들을 바탕으로 본문을 분석하여, 콘텐츠를 각 기능단위로 분해하여 사용자가 검색한 단어(키워드)와의 연관성을 찾아주는 역할을 대신 하고 있습니다.

이와 같은 웹문서 분석 시장의 기술들을 역으로 이해해보면 아래와 같은 결론에 도달하게 됩니다.

HTML 구조를 알면 검색에 적합한

채널 운영 및 글쓰기가 가능하다

HTML에 대한 복잡한 기초 과정을 건너뛰고 가장 기본적인 웹문서의 구조를 바탕으로 HTML이 어떤 특징을 가지고 있는지, 그리고 이로 인해서 검색엔진들은 어떻게 활용하게 되는지를 가볍게 설명하겠습니다.

위 소스코드를 바탕으로 간단하게 웹문서의 구조를 설명하자면, 웹문서는 계단식 구성에 의해 탑다운(TOP-DOWN) 방식으로 구성되는 구조화된 작성방법을 가지고 있다는 사실을 알 수 있습니다.

즉, 검색엔진들이 웹문서를 수집해 갈때 HTML의 구조를 바탕으로 문서를 분석하게 됩니다. 그리고, 이 분석의 결과물은 사전의 색인(목차)를 보듯이 순차적으로 나열되어 문서의 구성형태를 추출하게 됩니다. 이를 바탕으로 검색엔진은 이 내용이 제목인지, 본문인지, 아니면 참조문구, 첨부된 사진에 대한 요약설명 등을 구조화하여 이를 소비자의 검색 목적과 부합하는지 등의 검색엔진 기술 등에 활용하게 됩니다.

의문점,

검색엔진은 이 분석 정보를 어떻게 활용할까?

검색엔진최적화(SEO)에 대한 기초적인 상식

검색엔진은 이렇게 구조화된 HTML의 문서 분석의 결과를 바탕으로, 이 웹 문서에 대한 문서 품질을 결정하게 됩니다. 이를 바탕으로 문서의 품질점수가 매겨지게 되고, 이를 바탕으로 노출 순위에도 영향을 크게 주게 됩니다.

사진에 대한 설명을 바탕으로 이미지 검색을 제공하기도하고, 본문 내용을 바탕으로 스니펫 등 전문콘텐츠의 노출영역에 노출이 되기도하고, 제목을 근거로 키워드 검색 시 검색 정확도를 계산하기도 하는 등, 다양한 계산에서 활용되는 것이 특징입니다.

이렇게 분석한 결과를 토대로 웹문서 검색 뿐이 아닌 이미지 검색, 동영상 검색 등 더욱 다양한 영역에서 노출이 되면 트래픽의 자연스럽게 상승하고, 채널이 성장하는 것을 확인 할 수 있습니다.

그렇다면,

네이버 블로그로 검색엔진들의 문서 품질을 올리는 방법은?

검색엔진최적화(SEO)에 대한 기초적인 상식

하지만, 네이버 블로그는 스마트에디터2.0을 제외하고는 작성되는 문서의 HTML 편집을 지원하지 않고 있습니다.

그래서, 스마트에디터ONE에서는 상당히 제한적인 환경탓에 문서의 품질을 올리기 위한 모든 기술을 적용해보지 못하는 것이 가장 큰 단점입니다. 하지만, 글쓰기 방식에 약간의 변화만 주는 것만으로도 타 블로그들과의 경쟁에서 유리한 위치를 선점할 수 있다는 장점도 존재합니다.

검색엔진 서비스들이 활용중인 웹문서 수집 봇의 경우, 대부분 아래와 같은 과정에 의해 글이 분석되게 됩니다.

아래의 순서를 기준으로 각 내용을 설명하도록 하겠습니다.

웹문서 분석 과정

(1) HTML 구조 분석 (제목, 설명, 썸네일, 백링크 등 수집)

(2) 본문 키워드 분석 (키워드와의 적합성 등을 수집)

(3) 문장 유효성 등 본문 분석 (기계적인 문장 여부 등을 측정)

첫번째,

제목과 관련이 높은 첫 문장으로 글을 시작하라.

검색엔진의 본문분석 우선순위를 이용하는 검색 노출 노하우

가장 점수가 처음으로 결정되는 과정 중 가장 중요하게 염두해야 할 부분은 HTML 구조 분석이 진행되는 시점입니다. 여기서 특히 가장 중요한 부분이, 복잡한 HTML 문서 전체를 분석하여 추출된 본문이 아닌, HTML 문서에서 head에 포함되는 내용 중 하나 인 description 메타태그 입니다.

저 내용을 토대로, 사용자가 정의한 요약내용과 본문을 교차비교하여 주제가 명확한 글인지를 파악하는 알고리즘이 숨어있기도 합니다. 이 내용은 구글에서 대부분의 키워드를 검색했을때 본문 앞 300자 내외에 해당 키워드가 존재하는 글을 더욱 많이 상위에서 찾아볼 수 있다는 것을 알 수 있습니다.

두번째,

글은 되도록이면 Top-Down 형식으로

과정, 시간흐름에 따른 글의 문장배치 등도 분석 결과에 영향을 준다.

HTML 웹문서는 계단식 구조를 띄고 있기때문에, 문서분석의 결과물 역시 계단식으로 나오는것이 특징입니다. 이렇다보니, 계단식으로 정렬된 데이터를 바탕으로 본문 내용에서 키워드를 분석하는 등의 과정에서는 가장 상위 단계부터 한단계씩 아래로 내려가며 순차적으로 분석이 진행되는 것이 특징입니다.

이에 따라 본문은 항상 주요 목적을 중심으로 글을 시작하고, 목적과 관련된 작은 소목적들이 순차적으로 배치되는 구조를 가진 글이 조금 더 유리한 양상을 보이는 편입니다.

세번째,

첨부된 사진에 요약 설명을 최대한 적어두자

사진의 요약설명은 검색엔진분석 과정중에도 사진이 의미하는 바가 뭔지를 알수 있도록 해준다.

사진 첨부후 요약 설명을 최대한 적어 두시는 걸 강력하게 권장합니다. 검색엔진이 사진분석 절차를 진행하기 전까지는 사진 하단에 위치한 요약내용이 사진의 주제를 나타내게 되기때문에, 검색결과 분석과정에서 조금 더 빨리 분석이 완료되는 이점을 가져오기도 합니다.

또한, 사진과 요약설명이 적절하게 맞아떨어지는 경우 이미지 검색 등에도 노출 될 기회가 발생합니다.

글을 마치며,

하지만, 네이버는....

네이버의 웹문서 구조는 솔직히 SEO를 충실히 따르지 않는다고 보입니다.

하지만, 네이버는 국제적으로 표준화되어가고있는 SEO 방식과는 약간 다른 노선을 걷고 있는건지, 외부 검색엔진에서의 수집결과가 그리 좋지않습니다. 과거에는 심지어 외부검색엔진들의 페이지 수집을 아예 차단하고 있기까지 했었기도 했습니다.

블로그 글의 메타태그 (모바일 주소)

구글에서 검색할 시 상대적으로 사용자가 많은 네이버 블로그 보다 워드프레스나 티스토리와 같은 외부 블로그들이 대부분을 차지고하고 있는걸 보면 알수 있는 사실입니다.

특히나 PC의 경우 iframe이라는 웹 접근성에서 낮은 점수를 주는 태그를 사용한것외에도, redirection 방식의 구조를 가지고 있어서 구글에서 대부분 자연수집이 되는 경우는 모바일 블로그(m.blog.naver.com)로 구성된 모바일 포스팅 주소입니다.

PC 블로그 주소로는 겨우 1/3 수준만 노출되어 있을뿐이다. 사용자가 상대적으로 적은 티스토리랑 별 차이도 없다.

이런 부분들이 하루 빨리 해결되어야, 점점 줄어가는 네이버 이용자에 대한 걱정 없이도, 네이버에서 활동하는 창작자들이 외부 검색엔진의 노출을 통해 채널 성장을 꾀할 수 있으리리 생각됩니다.

이 글이 도움이 되셨다면, 공감과 댓글로 화답해주세요.

그리고 앞으로도 개발자로서의 다양한 마케팅 이야기를 듣고자 하신다면 이웃으로 구독해주세요.

※ 위 배너를 클릭하면 다른 마케팅이야기를 찾아 볼 수 있습니다 ※

#블로그운영 #블로그강좌 #마케팅강좌 #SEO #HTML #HTML구조 #HTML분석 #외부검색엔진 #검색엔진원리 #본문분석 #노출을위한SEO #네이버블로그 #티스토리

Recommend Stories