검색 잘 되는 사이트의 필수조건, 메타(meta) 태그란?

5분

2021.06.29.

38.3K

인터넷의 발달로 우리는 (요즘IT와 같은) 수많은 좋은 웹사이트와 콘텐츠를 접할 수 있게 되었습니다. 그런데 아무리 좋은 사이트나 콘텐츠를 구축해도, 구글이나 네이버와 같은 검색 엔진에서 검색되지 않는다면 사람들의 방문을 기대하기는 어려울 것입니다. 그렇다면 어떻게 검색이 잘 되는 사이트를 만들 수 있을까요?

많은 사용자에게 노출되는 사이트를 만들기 위해서는 여러 조건이 필요한데요, 오늘은 그중에서 가장 핵심적인 역할을 하는 ‘메타 태그’에 대해서 알아보겠습니다.

※ ‘태그’란 무엇인가요?

웹 페이지는 HTML(HyperText Markup Language)이라는 마크업 언어를 통해 만들어지는데요, 웹 페이지에서 말하는 태그는 HTML을 구성하는 기본 단위를 뜻합니다. 꺾쇠(<, >)를 통해 표시되며 이미지, 문단, 버튼, 링크 등의 기본 요소에 대한 태그들이 존재합니다.

꺾쇠 안에 있는 html, head, title 등이 전부 태그입니다.

1. 메타 태그의 종류와 역할

구글과 같은 검색엔진은 웹 페이지에 대한 추가적인 정보를 얻기 위해 메타 데이터를 사용합니다. 그리고 획득된 정보는 페이지의 랭킹을 매기는 데 사용될 수 있고, 검색 결과를 나타내는 데 사용될 수도 있으며, 혹은 그냥 무시될 수도 있습니다.

메타 데이터의 종류는 매우 다양한데요. 다행히도 검색 엔진이 대부분의 정보를 잘 수집하고 있기에 모든 메타 데이터를 공부하고 사이트에 추가할 필요는 없습니다. 오히려 불필요한 데이터는 SEO(Search Engine Optimization, 검색 엔진 최적화)에 악영향을 끼치기도 하죠. SEO에 필수적이라고 평가받는 대표적인 메타 데이터로는 ‘제목(title)’과 ‘설명(description)’이 있습니다.

2. 웹 페이지의 ‘제목’

<title> 태그는 웹 페이지의 제목을 나타내는 요소입니다. 제목에 해당하는 메타 데이터는 검색 엔진이 웹 페이지를 이해하는 데 큰 도움을 주는데요, 우리는 타이틀 태그를 크게 세 가지 상황에서 확인할 수 있습니다.

(1) 검색 엔진의 결과

타이틀 태그는 검색 엔진의 결과로 나타나는 헤드라인에 적용됩니다. 웹 페이지의 제목은 유저에게 첫인상이 되기도 하고, 링크를 클릭하는 데 있어서 주요한 요인이 되기도 하죠.

검색 결과 헤드라인으로 나타나는 부분이 웹 페이지의 제목(title)입니다

(2) SNS 공유

SNS를 통해 친구에게 특정 링크를 공유한 적이 있으신가요? SNS에서 링크를 공유하면 아래 이미지와 같이 링크 이외의 콘텐츠가 함께 노출되는 것을 확인할 수 있을 텐데요. 제목에 대한 정보는 이렇게 웹 페이지 주소를 공유할 때에도 사용됩니다.

(3) 웹 브라우저

웹 브라우저의 상단을 보면 현재 페이지에 대한 문구를 확인할 수 있습니다. 해당 부분도 제목에 대한 메타 데이터인데요, 간결하고 쉬운 제목은 유저가 현재 위치하고 있는 페이지에 대해 보다 쉽게 이해할 수 있도록 도움을 줍니다.

※ 메타 태그와 타이틀 태그

엄연히 말하면, 웹 페이지의 제목에 해당하는 <title> 태그와 <meta> 태그는 다릅니다. 그러나 메타 데이터를 제공하고 SEO에 중요한 역할을 하기 때문에, 타이틀 태그는 메타 태그라는 용어로 통용해서 사용되기도 합니다.

3. 웹 페이지의 ‘설명’

설명에 대한 메타 데이터는 특정 웹 페이지의 요약된 정보를 나타냅니다. 그리고 구글과 같은 검색 엔진에서는 검색 결과로 설명(description) 데이터를 보여주기도 하죠.

검색 결과의 헤드라인 하단 부분이 웹 페이지의 설명(description)입니다

SEO를 위해서는 같은 사이트이더라도 페이지별로 다른 제목과 설명을 추가할 것을 권장합니다. 그리고 입력할 수 있는 길이에는 제한이 없지만, 설명의 길이는 보통 영문 기준으로 50-160자를 추천하죠. 종합하자면, 검색 결과로 나타났을 때 클릭을 유도할 수 있도록 간결한 형식과 매력적인 내용으로 구성하는 것이 좋습니다.

오늘은 메타 태그의 역할과 대표적인 메타 태그에 대해서 살펴보았습니다. 웹 페이지를 기획하거나 개발 중인 분이 계시다면, 이번 기회에 메타 태그를 활용해서 검색이 잘 되는 사이트를 만들어보시는 것은 어떨까요?

※ 별첨 1. 메타 태그 설정하기

메타 태그를 설정하는 방법은 매우 간단합니다. HTML 코드를 작성할 때, 아래 이미지와 같이 <head> 태그 내부에 내용을 입력하기만 하면 되는데요. 제목은 <title> 태그 사이에, 내용은 <meta> 태그의 속성으로 추가하면 됩니다.

※ 별첨 2. 다른 메타 태그에는 어떤 것이 있나요?

- keywords: 검색엔진에 의해 검색되는 단어 지정

- robots: 검색 로봇 제어

- Date: 제작일

- author: 페이지 작성 제작자 이름

- location: 위치

- charset: 문자 인코딩 방식

- Generator: 제작 도구

- Distribution: 배포자

- Refresh: 새로고침 주기 및 전환

메타 태그에 대해 더 알아보고 싶다면 관련문서를 확인해보세요.

로그인하고 자유롭게 의견을 남겨주세요.