메타 태그를 통한 검색엔진 최적화 (SEO)
웹사이트를 개발하다 보면 아무래도 사람들에게 보여질 부분에만 치중하기 쉬워집니다. 그런데 알고보면 사람뿐만 아니라 기계가 웹사이트를 읽어야하는 경우가 의외로 많은데요.
여기서 기계라함은 유저가 사용하는 브라우저가 될 수도 있고 웹사이트의 데이터를 수시로 수집해가는 검색엔진이 될 수도 있겠습니다. 또한 어떤 웹페이지의 링크를 공유하면 링크를 열기 전에 해당 콘텐츠를 미리보여주는 SNS나 메신저가 될 수도 있겠네요.
이번 포스팅에서는 이러한 기계들이 웹페이지를 효과적으로 이해할 수 있도록 도와주는 메타 태그에 대해서 알아보겠습니다.
메타 태그란?
메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미합니다.
이러한 웹페이지의 메타 정보는 주로 HTML의 <meta> 요소를 통해 마크업을 하며, HTML 문서 내에서 <head> 요소 아래 배치되므로 일반 유저가 보게되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않습니다.
반면에 검색엔진과 같은 기계들이 웹페이지를 읽어야할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 핵심적인 요소가 됩니다.
SEO 태그 - title
검색엔진은 주기적으로 우리의 웹사이트를 방문하여 각 웹페이지가 어떤 컨텐츠를 제공하고 있는지를 파악해갑니다. 점점 지능적으로 진화하고 있는 검색엔진은 어느 정도까지는 스스로 웹페이지의 구조와 내용을 파악할 수 있는데요. 그럼에도 불구하고 우리가 메타 태그를 통해 웹페이지에 대한 정보를 좀 더 주도적으로 명시해놓는다면 SEO(검색엔진 최적화) 측면에서 분명 유리할 것입니다.
이렇게 검색엔진 최적화를 위해 사용되는 메타 태그들을 소위 SEO 태그라고 통칭하는데요.
가장 대표적인 SEO 태그로 웹페이지의 제목을 명시하는 <title> 요소를 들 수 있습니다.
<title> 태그의 내용 보통 해당 HTML 문서의 최상위 헤딩(heading), 즉 <h1> 태그의 내용과 일치시키는 경우가 많으며, 웹사이트의 이름도 포함시키기도 합니다.
예를 들어, 본 포스팅의 <title> 태그는 다음과 같이 마크업을 할 수 있겠습니다.
<title>메타 태그를 통한 검색엔진 최적화</title>웹페이지의 제목가 너무 길어지지 않도록 주의하셔야 합니다.
일반적으로 영문 기준으로 40자, 한글 기준으로 20자가 넘지 않는 것이 권장됩니다.
웹 페이지의 좀 더 상세한 설명은 바로 다음에 다룰 <meta> 요소의 description 이름을 활용하면 됩니다.
<title> 태그는 비단 검색엔진 뿐만 아니라 브라우저에서도 중요한 역할을 하는데요.
바로 브라우저 탭에 파비콘(favicon) 이미지 옆에 표시되는 텍스트가 이 <title> 태그의 내용이기 때문입니다.
SEO 태그 - meta
웹사이트이 제목만 예외적으로 <title> 요소를 사용하고, 그 밖에 다른 웹페이지의 메타 정보는 <meta> 요소를 사용하여 표현합니다.
<meta> 요소를 사용할 때는 name 속성을 통해 메타 정보의 이름을 명시하고 content 속성을 통해 메타 정보의 이름과 내용을 명시합니다.
SEO 측면에서 가장 중요한 <meta> 요소의 name 속성으로는 description을 들 수 있는데요.
이 메타 태그를 활용하면 <title> 요소로 담지 못했던 웹페이지에 대한 좀 더 상세한 설명을 담을 수 있습니다.
예를 들어, 본 포스팅의 상세 설명을 다음과 같이 메타 태그로 마크업을 할 수 있겠습니다.
<meta
name="description"
content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다."
/>웹페이지의 상세 설명은 일반적으로 영문 160자, 한글 80자 이내로 작성하는 것이 권장됩니다.
keywords와 author도 검색 엔진 최적화를 위해서 자주 사용되는 메타 태그의 이름입니다.
keywords 이름을 통해서는 해당 웹페이지의 관련 키워드를 나열할 수 있으며, author 이름을 통해서는 해당 웹페이지의 작성자를 표시해줄 수 있습니다.
<meta name="keywords" content="HTML, CSS, JavaScript" /><meta name="author" content="Dale Seo" />HTML의 요소는 문자 인코딩과 같은 다른 목적으로도 사용됩니다. 이 부분에 대해서는 관련 포스팅을 참고바랍니다.
Open Graph 태그
요즘에는 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 좀 더 넓은 분야에서 활용되고 있습니다. 대표적인 사례로 페이스북이나 카카오톡, 슬랙(Slack)과 같은 앱에서 웹페이지의 링크만 입력하더라도 해당 웹페이지의 콘텐츠의 미리보기를 카드 형태로 나타나는 것을 들 수 있습니다.
일반적으로 이러한 서비스들은 Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 콘텐츠 미리보기를 지원하고 있습니다. 따라서 우리도 Open Graph 프로토콜에서 정의하고 있는 메타 태그를 적절히 사용하면 콘텐츠 미리보기에 원하는 내용을 표시되도록 어느 정도 제어를 할 수 있습니다.
Open Graph 태그의 이름은 og:로 시작하는데요.
콘텐츠 미리보기 측면에서 중요한 태그만 간단하게 둘러보겠습니다.
웹사이트의 이름을 나타내는 og:site_name:
<meta name="og:site_name" content="달레의 블로그" />웹페이지의 제목을 나타내는 og:title:
<meta name="og:title" content="메타 태그를 통한 검색엔진 최적화" />웹페이지의 상세 설명을 나타내는 og:description:
<meta
name="og:description"
content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다."
/>웹페이지의 유형을 나타내는 og:type:
<meta name="og:type" content="website" />웹페이지의 주소를 나타는 og:url:
<meta name="og:url" content="https://www.daleseo.com/html-meta" />웹페이지 썸네일(thumbnail) 이미지 주소를 나타내는 og:image (권장 크기: 1200 x 630):
<meta
name="og:image"
content="https://www.daleseo.com/html-meta/thumbnail.png"
/>이 정도가 많이 쓰이는데요. 그 밖에 다른 Open Graph 태그들은 공식 사이트를 참고바랍니다.
마치면서
지금까지 SEO와 컨텐츠 미리보기를 위해서 메타 태그를 어떻게 활용할 수 있는지에 대해서 알아보았습니다. 마지막으로 한 가지 강조하고 싶은 부분은 메타 태그가 검색 결과에서 상위 랭크를 보장하지는 않는다는 것입니다.
아무리 메타 태그에 신경을 쓴들 해당 페이지의 내용이 유저에게 별로 유익하지 않다면 어떨까요? 우선 양질의 컨텐츠를 제공했을 때 메타 태그도 빛을 발휘할 수 있다는 점을 명심하셔야 합니다. 그리고 컨텐츠를 시멘틱 태그를 사용해서 마크업하는 것도 메타 태그를 활용하는 것만큼 SEO 측면에서 중요한 작업입니다. 이 부분에 대해서는 별도로 다루었으니 관련 포스팅을 참고바랍니다.
This work is licensed under CC BY 4.0
