메타 태그로 검색엔진 최적화하기 (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자 이내로 작성하는 것이 권장됩니다.
author 이름을 통해서는 해당 웹페이지의 작성자를 표시해줄 수 있습니다.
<meta name="author" content="Dale Seo" />예전에는 관련 키워드를 나열하는 keywords 메타 태그도 많이 썼는데요.
키워드를 마구 채워 넣는 남용이 심해지면서, Google은 2009년에 이 태그를 검색 순위에 쓰지 않는다고 공식적으로 밝혔습니다.
지금 새로 만드는 웹페이지라면 굳이 넣지 않아도 됩니다.
HTML의
<meta>요소는 문자 인코딩과 같은 다른 목적으로도 사용됩니다. 이 부분은 HTML head 요소 글을 참고바랍니다.
SEO 태그 - robots
지금까지 본 태그들이 검색엔진에게 페이지를 “어떻게” 보여줄지 알려준다면, robots 메타 태그는 페이지를 검색 결과에 “보여줄지 말지”를 알려줍니다.
아무 설정이 없으면 검색엔진은 페이지를 색인하고 페이지 안의 링크도 따라가는데, 이 동작을 막고 싶을 때 사용합니다.
가장 많이 쓰는 값은 검색 결과에서 페이지를 빼달라는 noindex입니다.
<meta name="robots" content="noindex" />페이지 안의 링크를 따라가지 말라는 nofollow도 있으며, 쉼표로 여러 값을 함께 쓸 수 있습니다.
<meta name="robots" content="noindex, nofollow" />noindex는 검색 결과에 나와도 쓸모가 없는 페이지에 붙입니다.
사이트 내부 검색 결과 페이지, 로그인해야 볼 수 있는 화면, 정식 서비스 전의 스테이징 환경 같은 곳이 대표적입니다.
PDF나 이미지처럼 HTML이 아니라서 <meta> 요소를 넣을 수 없는 파일은 HTTP 응답 헤더로 같은 지시를 보냅니다.
HTTP/1.1 200 OK
X-Robots-Tag: noindex한 가지 주의할 점은 noindex를 robots.txt와 함께 쓸 때입니다.
robots.txt로 페이지의 크롤링을 막아 버리면 검색엔진이 페이지를 읽지 못하니 noindex도 볼 수 없습니다.
그러면 다른 사이트에서 링크된 주소만으로 검색 결과에 남을 수 있으므로, noindex를 붙인 페이지는 크롤링을 허용해 두어야 합니다.
같은 이유로 noindex 페이지는 사이트맵에도 넣지 않습니다.
robots 메타 태그는 검색 결과에서 페이지가 어떻게 보일지를 조절하는 데도 쓰입니다.
대표적인 값이 검색 결과에 큰 이미지 미리보기를 허용하는 max-image-preview:large입니다.
<meta name="robots" content="max-image-preview:large" />Google의 Discover 문서에 따르면 Discover 피드에 글이 큰 이미지와 함께 나오려면 이 설정이 필요합니다. 이미지는 너비 1200px 이상, 16:9 비율이 권장되니 커버 이미지가 있는 블로그라면 꼭 넣어 두시기 바랍니다.
SEO 태그 - canonical
같은 내용의 페이지가 여러 주소로 열리는 경우가 생각보다 흔한데요.
/about과 /about/처럼 끝의 슬래시만 다르거나, 광고 추적용 쿼리 스트링이 붙은 주소가 대표적입니다.
이럴 때는 <link> 요소의 rel="canonical"로 여러 주소 중 대표 주소를 검색엔진에게 알려줍니다.
<link rel="canonical" href="https://www.daleseo.com/html-meta-tags-for-seo/" />대표 주소는 상대 경로가 아닌 절대 경로로 적는 것이 좋습니다. canonical은 검색엔진이 참고하는 강한 신호지만 반드시 따르는 명령은 아니라서, 리디렉션이나 사이트맵, 내부 링크도 같은 주소를 가리키도록 맞춰야 효과가 확실합니다. URL 끝 슬래시를 예로 이 신호들을 맞추는 방법은 트레일링 슬래시 글에서 자세히 다뤘습니다.
Open Graph 태그
요즘에는 SNS와 메신저를 통해 웹페이지의 링크를 공유하는 일이 잦아지면서 메타 태그가 좀 더 넓은 분야에서 활용되고 있습니다. 대표적인 사례로 페이스북이나 카카오톡, 슬랙(Slack)과 같은 앱에서 웹페이지의 링크만 입력하더라도 해당 웹페이지의 콘텐츠의 미리보기를 카드 형태로 나타나는 것을 들 수 있습니다.
일반적으로 이러한 서비스들은 Open Graph 프로토콜이라고 불리는 업계 표준을 따라서 웹페이지 콘텐츠 미리보기를 지원하고 있습니다. 따라서 우리도 Open Graph 프로토콜에서 정의하고 있는 메타 태그를 적절히 사용하면 콘텐츠 미리보기에 원하는 내용을 표시되도록 어느 정도 제어를 할 수 있습니다.
Open Graph 태그의 이름은 og:로 시작하며, name 대신에 property 속성으로 명시합니다.
콘텐츠 미리보기 측면에서 중요한 태그만 간단하게 둘러보겠습니다.
웹사이트의 이름을 나타내는 og:site_name:
<meta property="og:site_name" content="달레의 블로그" />웹페이지의 제목을 나타내는 og:title:
<meta property="og:title" content="메타 태그를 통한 검색엔진 최적화" />웹페이지의 상세 설명을 나타내는 og:description:
<meta
property="og:description"
content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다."
/>웹페이지의 유형을 나타내는 og:type:
<meta property="og:type" content="website" />웹페이지 콘텐츠의 언어와 지역을 나타내는 og:locale (기본값은 en_US):
<meta property="og:locale" content="ko_KR" />웹페이지의 주소를 나타는 og:url:
<meta property="og:url" content="https://www.daleseo.com/html-meta" />웹페이지 썸네일(thumbnail) 이미지 주소를 나타내는 og:image (권장 크기: 1200 x 630):
<meta
property="og:image"
content="https://www.daleseo.com/html-meta/thumbnail.png"
/>이 정도가 많이 쓰이는데요. 그 밖에 다른 Open Graph 태그들은 공식 사이트를 참고바랍니다.
X(옛 트위터)는 Open Graph 대신 twitter:로 시작하는 자체 태그를 먼저 읽습니다.
다행히 제목, 설명, 이미지는 twitter: 태그가 없으면 같은 역할의 Open Graph 태그를 대신 쓰기 때문에, 카드 형태를 정하는 twitter:card 하나만 추가하면 됩니다.
<meta name="twitter:card" content="summary_large_image" />summary_large_image는 큰 이미지 카드를, summary는 작은 썸네일 카드를 보여줍니다.
Open Graph 태그와 달리 property가 아니라 name 속성을 쓴다는 점에 주의하세요.
자세한 내용은 X의 카드 마크업 문서를 참고바랍니다.
마치며
지금까지 SEO와 컨텐츠 미리보기를 위해서 메타 태그를 어떻게 활용할 수 있는지에 대해서 알아보았습니다. 마지막으로 한 가지 강조하고 싶은 부분은 메타 태그가 검색 결과에서 상위 랭크를 보장하지는 않는다는 것입니다.
아무리 메타 태그에 신경을 쓴들 해당 페이지의 내용이 유저에게 별로 유익하지 않다면 어떨까요? 우선 양질의 컨텐츠를 제공했을 때 메타 태그도 빛을 발휘할 수 있다는 점을 명심하셔야 합니다. 그리고 컨텐츠를 시멘틱 태그를 사용해서 마크업하는 것도 메타 태그를 활용하는 것만큼 SEO 측면에서 중요한 작업입니다. 이 부분은 시맨틱 마크업 글에서 별도로 다루었습니다.
This work is licensed under CC BY 4.0
