권 형우 
SEO를 하는 데에 HTML을 알아야하는 이유
우리가 만들고 있는 웹페이지에는 두 종류의 독자가 존재합니다. 그 중 하나는 웹 콘텐츠를 읽고 소비할 인간이고, 다른 하나는 검색엔진이라고 할 수 있습니다. 웹페이지의 텍스트와 이미지 그리고 동영상 등을 직접 소비하는 인간과 달리, 검색엔진은 이들 콘텐츠를 표현하기 위해 사용하는 마크업 랭귀지의 일종인 HTML(Hyper text markable language)을 읽습니다. 그래서 콘텐츠를 기획하고 운영하며 마케팅하는 우리들은 검색엔진이 읽는 HTML을 기본적인 문법과 활용법과 의미를 파악하는 레벨에서는 알고 있어야합니다. 검색엔진이 웹페이지의 토픽을 이해하고 색인하기 위해서 HTML에서 정보를 얻기 때문입니다.
요즘에는 웹사이트를 만들어주는 웹사이트 빌더나 서버, 콘텐츠 관리까지 모두 가능하게 해주는 워드프레스, 고도몰, 카페24와 같은 CMS가 너무 잘 되어있어 웹사이트를 만들고 수정하는 데에 굳이 HTML을 알고 있을 필요가 없어졌습니다. 그러나 여러분이 SEO 담당자인데 검색엔진이 웹페이지의 콘텐츠를 이해하는 언어인 HTML을 알지 못한다면 내가 설정한 최적화 방안이 검색엔진에게 제대로 신호를 전달하고 있는지 알 수 없을 것입니다. 그렇다고 웹사이트를 제작하는 개발자가 아닌 SEO 담당자가 웹사이트의 퍼블리셔 수준으로 HTML 소스 작성을 할 수 있어야 하는 것은 아닙니다. 그럼에도 불구하고, 디지털 마케팅 담당자로서 SEO프로젝트에 참여하기 위해서는 일정 정도의 HTML을 이해하는 것이 도움이 됩니다. 그래서 오늘은 디지털 마케팅 담당자로서 반드시 알아야하는 기본적인 HTML 구조와 HTML 태그 및 속성에 대해 알아보고자 합니다.
웹페이지의 HTML 구조
모든 웹사이트는 위와 같은 구조를 갖습니다. <head></head>부분은 웹페이지 이용자의 눈에 보이지는 않지만 검색엔진이 해당 페이지에 대한 정보를 이해할 수 있도록 도움을 주는 많은 태그들이 있습니다. <body></body>부분은 실제 이용자의 눈에 보이는 부분입니다. 주로 본문의 내용이나 이미지, 테이블 등의 내용이 들어가죠.
이제 조금 가까이 들어가서 HTML 한 줄의 구조를 살펴보겠습니다. 화살 괄호의 가장 왼쪽에 붙어있는 것을 “태그(tag)”라고 합니다. <a href=”…”>는 a 태그, <img …>는 이미지 태그, <title>은 타이틀 태그라고 부릅니다. 이러한 태그들은 </a>와 같은 형태로 닫히는 경우도 있지만 <br>과 같이 안 닫히는 태그도 있습니다.
태그 옆에 있는 부분은 “속성(attribute)”라고 합니다. 태그 안에서 각각 의미에 따라 역할을 합니다. class나 id 속성은 각 태그에 고유한 이름을 부여하며, rel 속성은 관계를 나타냅니다. 이처럼 태그만큼이나 다양한 속성이 있습니다.
HTML 태그와 속성
1. <title>태그
<title> SEO를 위한 HTML </title>
title 태그는 <head>구간에 위치하는 모든 페이지에 존재하는 ‘제목’ 태그입니다. 검색엔진은 title 태그를 중요한 랭킹팩터로 생각하여 검색결과페이지(SERP)상에서 노출을 시키거나 그대로 노출시키지 않더라도 랭킹에 활용합니다. meta 태그를 이용하여 <meta name=”title” content=””>와 같이 title 정보를 나타낼 수 있지만 검색엔진은 title 태그 만을 활용하게 되니 title 태그는 반드시 모든 웹페이지에 존재해야합니다.
2. <meta>태그
meta 태그란 검색엔진이 해당 웹페이지를 이해하기 위한 정보를 담은 태그입니다. 그렇기 때문에 description, Open graph, robots 등 검색엔진최적화에 가장 많이 사용되기도 합니다.
meta 태그는 일반적으로 name, property, content 속성을 사용합니다. name, property는 전달하고자하는 정보의 이름, content속성은 해당하는 메타태그의 구체적인 내용을 전달합니다. meta 태그를 통해 웹사이트에 대해 페이지 작성자, 작성일자 등 많은 정보를 전달할 수 있지만 SEO적으로 의미있는 태그는 다음과 같습니다.
(1) 메타 디스크립션 (meta description)
<meta name=”description” content=”meta 태그란 검색엔진이 해당 웹페이지를…”>
메타 디스크립션은 검색결과페이지에서 설명문으로 보일 수 있도록 설정하는 내용으로 CTR(Click-Through-Rate)에 영향을 미치는 요소입니다. 메타 디스크립션을 설정하지 않거나 검색자가 찾는 내용이 메타 디스크립션에 입력한 내용과 부합하지 않는다고 판단되면 검색엔진이 본문 내에서 임의로 찾아서 노출합니다.
(2) 메타 키워드 (meta keyword)
<meta name=”keyword” content=”meta태그, html소스, …”>
메타 키워드는 대부분의 검색엔진에서 무시하는 정보입니다. 예전에는 웹페이지에 대한 정보를 파악할 수 있는 요소가 많지 않아 검색엔진에서 참고했던 요소이기는 하나 구글에서는 이미 20년 전에 메타 키워드를 고려하지 않는다고 밝혔으며 bing 또한 메타 키워드를 페이지 정보를 확인하는 데에 사용하지 않고 있습니다. 다만, Yandex에서는 메타 키워드를 활용하고 있기 때문에 러시아를 대상으로 한다면 필요할 수 있습니다.
(3) 메타 로봇 (meta robots)
<meta name=”robots” content=”noindex”>
메타 로봇은 페이지의 색인을 제어하는 정보로, name=”robots”라면 모든 로봇, “googlebot”이라면 구글봇이 색인하지 못하도록 제어하는 역할을 합니다.
(4) Open Graph (OG)
<meta property=”og:title” content=”
SEO담당자가 꼭 알아야하는 HTML | 어센트코리아”>
소셜 미디어에 공유할 때 노출되는 내용을 전달하기 위해 사용하는 메타 태그로 og:title, og:description, og:image 등 다양한 property 내용이 있습니다.
3. <a>태그
<a href=”https://ascentkorea2024.mycafe24.com/”> 어센트코리아 </a>
a 태그는 anchor의 약자로 웹페이지와 웹페이지를 연결해주는 역할을 합니다.
(1) 앵커텍스트
앵커텍스트는 a 태그가 품고있는 텍스트로, 여러 페이지로부터 앵커텍스트를 포함한 관련된 링크를 받는 페이지는 그 키워드에 대해 높은 평가를 받습니다.
(2) 크롤링 방식
검색엔진이나 크롤링 봇은 일반적으로 a 태그를 타고 웹사이트를 크롤링합니다. 따라서 a 태그가 구조적으로 설정이 되어있다면 크롤링 봇이 웹사이트의 모든 페이지의 정보를 가져갈 수 있을 것입니다.
4. <h>태그와 <p>태그
<h1> SEO 담당자가 꼭 알아야하는 HTML 태그 </h1>
h태그는 SEO에서 매우 높은 비중으로 중요한 요소입니다. 검색엔진에게 페이지의 콘텐츠가 어떤 구조로 되어있는지 알려주어 검색엔진이 구조적으로 페이지를 이해하고 featured snippet(추천스니펫)에 노출되는 것과 같이 더 풍성한 검색결과를 노출시킬 수 있습니다.
<p> h태그는 SEO에서 매우 … 수 있습니다. </p>
h태그가 질문이라면 p태그는 답변이라고 할 수 있습니다. 각 h태그 이하에 <div>, <span>과 같은 테그가 아닌 p 태그로 본문이 설정되는 것이 좋습니다.
5. <img>태그
<img src=”{파일경로}” alt=””>
(1) src 속성 (파일 경로, 파일 이름)
src 속성의 내용은 파일 경로와 파일 이름이 들어가며, 파일 이름은 이미지 검색에 노출될 가능성을 높입니다.
(2) alt 속성
alt 속성에는 이미지를 잘 설명해주는 내용이 들어가며, 이는 SEO 뿐 아니라 웹접근성 측면에서도 중요한 속성입니다.
6. <link>태그
link 태그는 <head>부분에 들어가는 태그로, 일반적으로 rel 속성과 함께 쓰이며, 웹 페이지 간의 관계를 설명하는 태그(엄밀히 말하면 속성 값입니다.)입니다. SEO에서 가장 많이 사용되는 관계는 canonical과 alternate에서 사용됩니다.
(1) canonical
<link rel=”canonical” href=””>
캐노니컬 URL이 사용되는 태그가 link태그입니다. link 태그를 이용하여 canonical 관계를 정의해서 원본페이지의 정보를 검색엔진에게 알려줍니다.
(2) alternate
<link rel=”alternate” href=””>
alternate는 적응형 웹에서 사용되는 html 소스입니다. 모바일과 데스크톱의 동일한 페이지의 관계를 연결해줄 때 데스크톱 페이지에서 사용하는 태그입니다.
웹사이트의 SEO 상태를 확인하려면 HTML을 알아야합니다.
검색엔진을 이해시키기 위해 이런 저런 SEO요소를 적용하여 콘텐츠를 발행하는 것은 중요합니다. 그러나 SEO를 담당하고 있다면, 또는 SEO를 적용하고자 한다면, 실제로 렌더링된 페이지가 내가 적용한 최적화 태깅이 잘 적용되어있는 것인지 확인할 수 있어야 합니다. 최소한 SEO와 연관이 있는 HTML 소스를 이해해서 웹사이트의 검색엔진최적화 상태를 확인할 수 있게 되기를 바랍니다.