태그로 구현하는 똑똑한 SEO – 기본, 메타 태그 편

edited by. Noh.HM

안녕하세요 셀러 여러분,

이전 쇼픽에서 SEO에 대한 전반적인 개념을 소개해 드렸죠.

👉참고하면 좋은 글: SEO가 뭐예요? 검색 엔진 최적화 파헤치기

검색 엔진은 다양한 변수를 따져서 가장 적합한 검색 결과 페이지를 사용자에게 제공하려고 합니다.

브랜드의 더 많은 노출과 인지도를 목표하여, 구글이나 네이버 등과 같은 포털 사이트의 검색 엔진에서 보여주는 검색 결과의 순위를 상위로 높이는 작업이 바로 SEO였지요.

이러한 SEO 활동으로는 콘텐츠의 품질을 개선하거나 엔진 작동에 걸맞은 사이트 정보 구조화, 소셜 미디어 게시글 링크 작업, 사이트 퍼포먼스 향상 등이 있습니다.

이번 쇼픽에서는 가장 간단하고 적은 시간이 드는 방법인 HTML 태그를 이용한 SEO에 대해 두 편에 걸쳐 소개하려고 합니다.

HTML 태그가 무엇인가요?

우리가 인터넷 브라우저로 보는 웹 페이지의 형태는 HTML 태그 요소와 태그 안의 콘텐츠가 레고 블록처럼 조립된 결과물입니다.

태그는 <>와 같은 꺽쇠로 되어 있고 특정 태그를 제외하면 여는 태그(<>)와 닫는 태그(</>)가 한 쌍을 이루어야 합니다. 또한 하나의 태그는 여러 속성과 속성 값의 쌍들을 가지며 여는 태그와 닫는 태그 사이에는 태그 내부 콘텐츠가 들어갑니다.

<HTML 태그 구조>

아래는 기본적인 HTML 웹 페이지 예시입니다.

<html> 태그 안에 <head>와 <body>로 구분되어 있고, 웹 페이지에서 보이는 부분은 바로 <body> 태그 안입니다.

<웹 페이지 코드>

<출력된 웹 페이지>

태그는 SEO에서 무슨 역할을 하나요?

브랜드들이 성공적인 SEO를 수행하기 위해서는, 콘텐츠 자체의 질을 높이는 것도 중요하지만 콘텐츠 작성 시 참고할 양식에 대한 기술적인 작업부터 시작해야 합니다.

바로 검색 엔진의 작동에 대응하는 테크니컬 SEO, 그 중에서도 HTML 태그를 이용한 기술적인 구조화입니다.

우선 검색 엔진의 작동에 대해 간단히 알아보겠습니다.

검색 엔진은 대체로 아래와 같이 총 세 단계로 작동합니다.

그러면 과연 HTML 태그로 무엇을 할 수 있다는 것일까요?

검색 엔진은 웹 페이지를 수집한다고 하였습니다.

검색 엔진은 기본적으로 링크(인터넷 url)와 텍스트를 인식합니다. 그러므로 링크나 텍스트 기반으로 이루어진 태그는 검색 엔진이 Crawling 및 Indexing 과정에서 브랜드 웹사이트의 페이지를 이해하기 쉽게 구조화하고 정보를 전달할 겁니다.

SEO로 사용할 수 있는 태그들은 무엇이 있을까요?

1. 기본 태그

기본적인 웹 페이지의 구성요소로서 화면에서 볼 수 있는 ‘그려지는’ 태그입니다.

TITLE 태그

<head>

<title>웹 페이지의 제목입니다.</title>

</head>

<head> 태그 안에 위치하는 태그입니다. 검색 엔진의 검색 결과 페이지(SERP)에 보여지는 내용이며, 제목 표시줄에도 표시됩니다.

<구글 검색 결과 페이지의 title 태그 내용들>

다만 <head> 태그 안의 태그나 콘텐츠는 웹 페이지에 보이는 부분은 아니기 때문에 <title> 태그의 내용 또한 웹 페이지에 보이지 않습니다,

구글의 경우 검색 결과 페이지를 보여줄 때, 영문 기준 60자, 한글 기준 40자를 초과한 길이는 잘라내기 때문에 제목의 길이는 그 이내로 지정해주는 것이 좋습니다.

또한 가급적 title 태그 안의 제목과 실제 문서의 제목을 일치시키는 것이 좋고 한 두 개 정도의 키워드를 포함하는 것이 좋습니다.

H1, H2, … H6 Heading 태그

...

기사나 책을 읽을 때 글이 구조화되어, 각 문단 별로 제목이 붙어 있는 경우가 있습니다. 때로 긴 글에서 제목들만 훑어보고 내용을 이해하는 경우도 있죠. 이 헤딩 태그는 바로 그 웹 페이지 ‘문서’의 제목과 같은 역할을 합니다. (title 태그는 검색 결과, heading 태그는 웹 페이지 문서 내)

<h1>에서 <h6>까지 존재하며 숫자가 커질수록 문단의 구조가 더 깊어지고 크기가 작아진다는 것을 의미합니다.

단 복잡한 구조를 피하기 위해 <h3>까지 쓰도록 하며, 페이지 문서의 고유 제목과도 같은 의미를 가지는 <h1>은 페이지 내 한 번만 쓰도록 권장됩니다.

Img 태그 alt 속성

앞에서 검색 엔진은 링크와 텍스트를 인식한다고 했습니다. 이미지라는 비정형 데이터는 식별이 어렵기 때문에, 이미지에 대한 짧은 설명을 추가하여 이를 보완하는 것이 이미지 대체 텍스트(alt 속성)입니다. 검색 엔진은 이 대체 텍스트를 이용해 색인을 생성합니다.

단 이미지가 다른 이미지와 구별될 수 있도록 하되, 너무 길지 않게 한두 줄 이내의 텍스트로 제한하는 것이 좋습니다.

Semantic 태그 그룹

<출처: https://www.socialmediatoday.com/news/8-of-the-most-important-html-tags-for-seo/574987/>

위에서 다루었던 Img나 heading 등의 태그가 웹 페이지의 글자나 이미지를 단일 요소를 보여주는 태그였다면 이 태그들은 영역을 의미하는 태그입니다.

이전에는 영역들을 모두 div라고 하는 기본 상자 태그로 모두 정의하고, 영역의 용도에 따라 각 div 태그에 id라는 고유 속성을 주어 구분하도록 하였습니다.

그러나 HTML5 버전으로 업그레이드 된 이후 역할 별 영역을 가리키는 아래와 같은 semantic 태그들을 사용할 수 있게 되었습니다.

- header(상단에 별도로 분리된 콘텐츠)

- section(본문의 콘텐츠들을 그룹화)

- article(별도로 분리된 콘텐츠)

- aside(메인 콘텐츠가 아닌 별도로 분리된 보완 콘텐츠)

- footer(하단에 별도로 분리된 콘텐츠)

- nav(별도로 분리된 웹 사이트의 메뉴 콘텐츠)

이는 검색 엔진이 페이지 구조를 이해하기 쉽도록 표준화되고 직관적이게 만들었죠.

2. 메타 태그

위에서 소개한 기본 태그들과 달리 메타 태그는 웹 페이지의 구성과 형태에 영향을 끼치지 않으며, 검색 엔진이 읽을 수 있는 정보성 태그입니다.

용도에 따라 name이라는 속성 값이 달라집니다.

Meta description 태그

메타 태그 중 description이라는 속성을 가진 태그는 해당 태그의 content 속성의 값이 검색 결과 페이지에 나타납니다.

<출처: 구글 '원산지 증명서 알기' 검색 결과'>

Meta robots 태그

검색 엔진이 페이지의 내용을 수집(crawling) 할 수 있는지 허가 여부을 설정하는 태그입니다.

name에는 ‘robots’대신 ‘googlebot’으로 특정 수집 시스템을 지정할 수도 있습니다.

content 속성의 값을 noindex로 조정한다면 콘텐츠의 색인을 생성하지 않고, nofollow로 조정한다면 링크를 따르지 않을 것입니다.

이 외에도 Meta keywords(키워드), Meta author(작성자) 등이 있습니다. 단 keywords의 경우는 구글이나 bing에서 고려하지 않는다고 언급한 바 있습니다.

쇼피파이에서 간편하게 SEO용 태그 작업을 할 수 있다?

앞선 태그들을 모두 고려하여 웹 페이지를 구성하는 것은 번거로울 수 있습니다만 쇼피파이를 스토어 이용자라면 보다 간편하게 작업할 수 있는 방법이 있습니다.

쇼피파이 스토어의 기본 테마는 header, nav, section, footer 등의 semantic 태그로 페이지 영역이 나누어져 있습니다.

또한 title, meta tag 등도 최소한도로 설정되어 있습니다.

<쇼피파이 코드 에디터>

이미지 대체 텍스트 또한 이미지를 올릴 때 Content > Files 메뉴에서 파일에 다음과 같이 직접 입력을 하거나 테마 에디터 기능을 통해 손쉽게 입력할 수 있습니다.

<쇼피파이 이미지 업로드 에디터>

상품이나 컬렉션 같이 고유 페이지를 가지고 있는 경우라면, 아래와 같이 해당 페이지에 대한 설명이 자동으로 메타 description 태그에 들어가게 됩니다.

<쇼피파이 제품 등록 에디터 - meta description>

마치며

궁극적으로 SEO를 위해서는 고품질의 콘텐츠를 통한 장기적이고 복합적인 전략이 필요합니다. 하지만 이번 쇼픽은 고객에게 도달하기 전 검색 엔진이라는 시스템에 먼저 초점을 맞추어, 식별을 돕는 기술적인 부분을 먼저 다루었습니다. SEO(Search Engine Organization)는 이름에 걸맞게 최종 소비자인 고객뿐만 아니라 검색 엔진 또한 타겟으로 하니까요. 더군다나 태그로 구현하는 SEO는 콘텐츠 작업이나 다른 크리티컬한 사이트 성능 개선 작업에 비해 작업이 복잡하지도, 오래 걸리지도 않습니다. 쇼피파이 스토어를 보유한 셀러라면 이 수작업을 더 수월하게 진행할 수 있으니, 시도해 보지 않을 이유가 없을 것입니다.