검색 엔진 최적화(SEO)를 위한 html 구조적 개선

html 구조적 개선이 필요한 이유

많은 사이트가 html에 대한 구조적인 문제에 대해 별 상관없이 만들어 집니다.

html의 구조적 문제는 페이지를 봇이 이해 하는데 도움을 주기 위한 수단일 뿐 사람이 페이지의 컨텐츠를 읽는데는 아무런 문제가 없기 때문 입니다.

봇은 사람과 다르기 때문에 정해진 알고리즘에 의해서 사이트의 페이지를 해석 합니다.

그렇기 때문에 봇이 페이지를 방문 했을 경우, 보다 쉽게 컨텐츠를 파악 할 수 있도록 하는 것이 좋습니다.

SEO는 세 가지 큰 방향으로 나눌 수 있습니다.

기술적

콘텐츠 마크업을 작성할 때 시맨틱 HTML을 사용하세요. 색인하길 원했던 콘텐츠만 크롤러가 긁어갈 것입니다.

콘텐츠 작성

방문자층에 맞는 언어로 콘텐츠를 작성하세요. 이미지와 더불어 텍스트를 사용해, 크롤러가 주제를 이해할 수 있도록 도우세요.

인기도

다른 유명한 사이트에서 여러분의 사이트로 링크를 했다면 더 많은 트래픽을 받습니다.

인용 - SEO - 용어 사전 | MDN

SEO - 용어 사전 | MDN의 문서에서는 3가지의 큰 주제를 이야기 합니다.

• 기술적
• 콘텐츠 작성
• 인기도

기술적 이라하면 html 구조를 봇이 이해 할 수 있도록하여, 원하는 컨텐츠를 색인 시키는 것을 이야기 합니다.

콘텐츠 작성 이라하면 한국인의 방문자에 노출할 문서라면 한국어로 작성 하고 사람이 읽을 수 있는 요소, 글, 이미지, 동영상 등을 주제에 맞게 작성하는 것을 말 합니다. 제일 중요한 것이 바로 포스팅을 하는 것 입니다.

인기도는 사이트를 운영하는 사람이라면 한번쯤 들어봤을 법한 백링크에 대한 주제 입니다. 잘 작성된 컨텐츠는 방문자로 하여금, 다른 사람에게 추천을 할 수가 있습니다. 이때 공유에 사용되는 링크를 다른 도메인의 페이지에 남게 되면 외부 페이지로 부터 많은 트래픽을 받을 수가 있습니다.

해당 문서에서 다뤄볼 주제는 기술적 입니다.

html 기술적 컨텐츠 마크업

마크업 이란?

우선 마크업 언어에 대해 무엇인지 아는 것이 중요 합니다. 마크업 언어(markup 言語, markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.인용 - 위키백과 마크업 언어

하이퍼 텍스트 마크업 언어

하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.인용 - 위키백과 HTML

HTML을 많이 들어보셨을 겁니다. 하지만 HTML이 어떤 풀네임의 약자인지 아는 사람은 많지 않습니다.

HTML은 웹페이지를 표현 하는데 쓰입니다. 일반적으로 우리는 책이라던지 논문과 같은 문서를 읽을 때, 책의 제목을 보고, 목차를 보고, 내용을 읽습니다.

이 처럼 책의 구조 처럼 웹 페이지를 HTML을 사용하여 페이지의 구조를 작성 할 수 있습니다.

제목 레벨 개요와 구조 개요

제목 레벨 개요

제목 레벨 개요는 h1, h2, h3, h4, h5, h6 의 제목 태그에 의한 레벨의 깊이에 따라 설정되는 구조 라고 할 수 있습니다.

각 제목 태그는 여러번 쓰일 수 있지만, h1 태그의 경우는 페이지당 1개만 설정하는 것이 좋습니다.

h 태그는 계층 구조를 이루기 때문에 h레벨에 맞춰서 사용 해야 합니다.

h 태그를 잘 이해 하지 못하는 사람의 경우 대부분이 글씨 크기에 따라 사용 합니다. 글씨의 굵기는 b태그나 strong 태그를 사용 하는 것이 바람직 합니다.

h태그를 사용 할때는 하위의 h 레벨 태그가 위에 위치 하면 안됩니다. 이는 이상한 구조로 페이지가 설계되기 때문에 봇이 문서를 해석하는데 어려움이 있을 수가 있습니다.

구조 개요

구조 개요의 경우에는 문서 전체의 구조에 대한 제목의 설정을 말 합니다.

페이지를 구성하는 태그 중 header, footer, article, nav, aside, 등의 태그에서는 바로 아래 제목 태그가 설정 되어야 구조적으로 알맞는 페이지가 됩니다.

하지만 이러한 구조는 정적페이지에 좀 더 잘 어울립니다. 동적으로 내용이 변하는 동적페이지의 경우, 예를 들어 게시판이나 포스트등의 페이지를 표현 할때에는 비워두는 것도 하나의 방법 입니다. 이미지에서 구조 상단에 위치한body element with no heading의 경우가 그렇습니다. 만약 해당 위치에 구조적 표현을 할 경우에는 article에 대한 제목 태그를 설정 해줘야 합니다.

제목 이외의 마크업

마크업은 구조적 논리에 매우 민감 합니다. 그렇기 때문에 사이트나 페이지의 마크업 검증 서비스를 통해 변경이 가능한 부분은 변경 해주는 것이 좋습니다.