고정 헤더 영역
상세 컨텐츠
본문
728x90
반응형
본 글은 작성자의 허가를 받아 번역하여 게시한 글입니다.
처음 번역하는 것이라 어색한 부분 많이 있을 것 같습니다. 번역에 대한 피드백은 댓글로 남겨주시면 감사하겠습니다.
원문 : Meta Tags for SEO: A Simple Guide for Beginner
메타 태그란?
메타 태그는 검색 결과에서 웹페이지를 어떻게 보여줄지와 같은 중요 정보를 검색 엔진에 알려주는 코드 조각(snippet)입니다.
메타 태그는 또한 웹페이지 방문객들에게 어떤 방식으로 보여줄지 여러 웹 브라우저에 전달합니다.
모든 웹페이지는 메타 태그를 정의하지만 이 내용은 HTML 코드 안에서만 볼수 있습니다.
이 가이드를 통해 SEO의 가장 중요한 6가지 메타 태그를 어떻게 사용하고, 사용해서는 안되는지 배울 수 있습니다.
- Meta title
- Meta description
- Meta robots
- Meta refresh redirect
- Meta charset
- Meta viewport
Meta title
왜 SEO에서 title 메타 태그가 중요한가?
구글에서 잘 설명해주고 있습니다.
타이틀은 사용자에게 결과에 대한 내용과 검색한 결과와 관련이 있는 이유를 신속하게 파악할 수 있도록 한다. 타이틀은 종종 "클릭"하도록 결정하는 중요 정보 중의 하나로 사용되곤 한다. 그래서 웹 페이지의 매우 잘 작성된 타이틀은 아주 중요하다.
Best Practices
- 각 페이지마다 고유한 타이틀 태그를 작성해라
- 간략하게, 그러나 서술해서
- 일반적이거나 모호한 제목은 피해라
- *Sentence Case나 **Title Case를 사용해라
- 클릭할 만한 가치가 있게 만들어라(자극적인 제목 제외)
- 검색 의도에 맞게 작성하라
- 이해하기 쉬운 대상 키워드를 포함시켜라
- 60 글자 이내로 작성하라
*Sentence Case : 문장의 첫 글자만 대문자로 표기하는 방법
**Title Case: 전치사, 관사 외에 모든 단어를 대문자로 표기하는 방법
추천 블로그 글: How to Craft the PerfectSEOTitle Tag (Our 4-Step Process)
웹페이지에 어떻게 title 메타 태그를 넣을 수 있을까?
웹페이지 <head> 섹션에 아래 코드를 붙여 넣습니다.
<title>This is the title of the page.</title>만약 WordPress를 사용한다면 Yoast같은 SEO 플러그인을 설치합니다. 웹 페이지나 게시글 편집기에서 title 태그가 위치하는 곳에 유의해야 합니다.
다른 ***CMS(ex. Squarespace or Wix)에도 비슷한 내장 기능이 있습니다.
***CMS : Content Management System
어떻게 일반적으로 title 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
title 태그에는 일반적으로 4가지 이슈가 있습니다.
*_첫번째, 너무 길거나 짧다. *_구글에서는 "서술적이고 간결하게"를 지키면서 "불필요하게 길거나 짧은 title을 피해라"고 말합니다.
두번째, title이 존재하지 않는다. 구글에서는 모든 페이지에는 title 태그가 있어야 한다고 말합니다.
세번째, 한 페이지에 여러 title 태그가 있다. 한 페이지에 한개 이상의 title 태그가 있다면 검색 엔진에 원하지 않는 title 태그가 표시될 수 있습니다.
네번째, 여러 페이지에 title을 복사한다. 구글에서는 "웹사이트의 각 페이지가 분명하고 서술적인 제목을 갖는 것은 매우 중요하다"고 이야기합니다.
첫번째와 두번째 이슈에 검사해보길 원한다면 URL을 SERPSim과 같은 무료 툴에 입력해 봅니다.
Title 항목에 웹페이지에 제목이 나타나지 않는다면, title 태그를 추가해야 합니다.
만약 pixel 길이 숫자가 빨간색으로 표시된다면, 제목은 더 짧아져야 합니다.
복사한 title 태그거나 여러 title 태그를 확인하기 위해서는, Ahrefs’ Site Audit를 통해 사이트를 검사합니다.
Ahrefs’ Site Audit에서 여러 title 태그에 대해 확인할 수 있습니다.
영향을 받는 페이지들에서 title 태그들 중에 하나를 제거하여 문제를 해결합니다.
다음으로 Duplicate content 보고서로 가서 "Bad duplicate"으로 표기된 title 태그를 찾습니다.
"Bad duplicates"에 해당하는 페이지에서 title 태그를 고유하게 만드는 title로 다시 작성합니다.
Duplicate content 보고서는 title 태그가 너무 길거나, 너무 짧거나, 없거나 비어있는 페이지도 보여집니다.
Meta description
meta description은 페이지의 컨텐트를 요약해 놓은 것입니다. 검색 엔진은 종종 검색 결과에 meta description 태그의 내요을 사용하기도 합니다.
왜 SEO에서 description이 중요한가?
구글에서 explains에 대해 설명하고 있는 내용입니다.
meta description 태그는 일반적으로 특정 페이지에 대한 짧고, 간략한 요약 설명을 알려주며 사용자의 관심을 끌어야 한다. 이 페이지가 정확히 사용자들이 찾는 페이지라는 것을 설득시키는 발표자료(pitch)와 같다.
하지만 meta description은 직접적으로 검색 결과 랭킹에는 포함되지는 않습니다.
구글에서는 아래와 같이 언급했습니다.
우리는 때때로 보여주기 위한 정보로 description 메타 태그의 내용을 사용함에도, 여전히 검색 결과 랭킹에서 description 메타 태그를 사용하지는 않는다.
Best Practices
- 각 페이지마다 독특한 description을 작성해라.
- 정확하게 콘텐츠를 요약하라.
- 일반적인 description은 피해라.
- *Sentence case를 사용해라.
- 클릭할 만한 가치가 있게 만들어라(자극적인 제목 제외)
- 검색 의도에 맞게 작성하라
- 이해하기 쉬운 대상 키워드를 포함시켜라
- 160 글자 이내로 작성하라
*Sentence Case : 문장의 첫 글자만 대문자로 표기하는 방법
추천 블로그 글: How to Efficiently Write the Perfect Meta Description
웹페이지에 어떻게 description 메타 태그를 넣을 수 있을까?
웹페이지섹션에 아래 코드를 붙여 넣습니다.
<meta name="description" content="Place the meta description text here.">만약 WordPress를 사용한다면 Yoast를 통해 더 쉽게 작성할 수 있습니다.
다른 ***CMS(ex. Squarespace or Wix)에도 비슷한 내장 기능이 있습니다.
***CMS : Content Management System
어떻게 일반적으로 description 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
description 메타 태그의 일반적인 네가지 이슈는 title 메타 태그와 같습니다.
첫번째, 너무 길거나 짧다. 구글에서는 "description 메타 태그의 길이에 제한은 없지만, 일반적으로 기기의 폭에 맞춰 내용이 생략될 수 있다."고 말합니다.
두번째, description이 존재하지 않는다. 구글에서는 모든 페이지에는 description 태그가 있어야 한다고 말합니다.
세번째, 한 페이지에 여러 description 태그가 있다. 한 개 이상의 description 태그는 검색 엔진에 혼란을 줄 수 있습니다.
네번째, 여러 페이지에 description을 복사한다. 구글에서는 "다른 페이지에 대해서는 description은 구분되어져야 한다."고 이야기합니다.
SERPSim나 Yoast에서 첫번째와 두번째 이슈에 대해서 페이지별로 확인해봅니다.
웹사이트를 Ahrefs’ Site Audit에서 크롤링해보면 On page 보고서에서 해당 웹사이트의 모든 페이지를 대상으로 첫번째, 두번째, 세번째 이슈가 발생하는지 확인해 볼 수 있습니다.
Duplicate content 보고서에서 여러 페이지에 복사한 description 메타 태그를 확인할 수 있습니다.
title 메타 태그에서 설명한것과 같이 문제를 해결하면 됩니다.
Meta robots
robots 메타 태그는 검색 엔진에 해당 웹 페이지를 크롤링 할지 여부와 어떻게 크롤링할지 알려줍니다.
<meta name=”robots” content="index, follow">
왜 SEO에서 robots 메타 태그가 중요한가?
robots 메타 태그의 속성을 잘못 사용하는 것은 검색 결과에서 웹 사이트의 존재에 치명적인 영향을 줄 수 있습니다. SEO에 대한 노력의 결과는 robots 메타 태그를 이해하고 효과적으로 사용하는 것에 달려 있습니다.
이러한 마인드를 갖고, 아래 robots 메타 태그에서 사용할 수 있는 값을 봅니다.
- index: bot에게 이 페이지를 인덱싱하라고 말합니다.
- noindex: bot에게 이 페이지를 인덱싱하지 말라고 말합니다.
- follow: bot에게 페이지에 있는 링크를 크롤링하고 말하며, 이 링크를 작성자가 보증합니다.
- nofollow: bot에게 페이지에 있는 링크를 크롤링하지 말도록 하며, 링크에 대해 어떤 것도 보증하지 않습니다.
아래와 같이 여러 가지 방법으로 조합할 수 있습니다.
<meta name=”robots” content="noindex, nofollow">
<meta name=”robots” content="index, follow">
<meta name=”robots” content="noindex, follow">
<meta name=”robots” content="index, nofollow">또한 <meta name=”robots” content="none">는 index, follow와 같은 설정으로 사용할 수 있습니다. robots 메타 태그를 설정하지 않아도 index, follow 설정과 같습니다.
Best Practices
웹 페이지 <head> 섹션에 위의 적절한 robots 메타 태그 설정을 붙여 넣습니다.
WordPress에서는 robots 메타 태그를 설정하는 Yoast의 advanced settings를 사용합니다.
대부분의 ***CMS는 비슷한 기본 기능을 갖고 있습니다.
***CMS : Content Management System
어떻게 일반적으로 robots 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
robots 메타 태그에서 일반적으로 실수하는 세 가지가 있습니다.
첫번째, robots.txt로부터 차단된 Noindexed 페이지들. 구글은 robots 메타 태그가 noindex로 설정로 설정된 페이지를 볼 수 없기 때문에 여전히 페이지들의 URL은 인덱싱 되어질지도 모릅니다.
두번째, 모호한 noindex 메타 태그. 구글이 페이지를 인덱싱하는 것으로부터 막기 때문에 구글을 통한 유기적인 트래픽은 발생하지 않을 것입니다.
세번째, 모호한 nofollow 메타 태그. 구글이 페이지 내의 링크들을 크롤링하는 것을 막기 때문에, 중요한 컨텐츠의 인덱싱과 검색 결과 노출이 차단될 수 있습니다. 또한 설정된 페이지로 PageRank의 유입이 되는 것도 차단합니다. 이런 설저은 바랍직하지 않을 수 있습니다.
Google Search Console 내에 "Coverage" 보고서를 통해 첫번째와 두번째 이슈를 체크할 수 있습니다.
"noindex" robots 메타 태그로 설정되었을지도 모르는 인덱스된 페이지들을 찾기 위해서, "Valid with warnings" 탭에서 "Indexed, though blocked by robots.txt" 경고를 찾습니다.
"noindex" robots 메타 태그로 설정된 페이지의 소스코드를 확인합니다. 페이지들에 설정하려는 내용에 따라 "noindex" robots 메타 태그나 robots.txt의 블록을 제거합니다.
모호한 "noindex" robots 메타 태그를 찾기 위해서는 "Excluded" 탭에서 "Excluded by 'noindex' tag"를 찾습니다.
인덱싱해야 하는 페이지들로부터 robots 메타 태그를 제거합니다.
모호한 "nofollow" robots 메타 태그를 찾기 위해서는 Ahrefs’ Site Audit를 통해 웹사이트를 크롤링하고 Indexability 보고서에서 "Nofollow page" 경고를 찾아봅니다.
검색엔진에서 웹 페이지 내의 링크들이 크롤링되지 않기를 바라는게 아니면 "nofollow" 태그들을 지웁니다.
여기에서 다루지 않은 몇 가지 이슈가 있다. 예를 들면, sitemap에서 "noindex" 태그를 가지는 페이지들이다. 이러한 이슈들에 대해 알기를 원하다면 Ahrefs’ Site Audit의 Indexability 보고서를 찾아본다.
Meta viewport
viewport 메타 태그는 웹 페이지의 가시 영역을 설정합니다. viewport 메타 태그는 다른 스크린 사이즈에서 페이지를 어떻게 렌더링할지 브라우저에게 지시하도록 합니다.
왜 SEO에서 viewport 메타 태그가 중요한가?
구글은 "viewport 메타 태그의 존재가 구글 검색 엔진에 해당 페이지가 모바일 친화적이라는 것을 나타낸다"고 말합니다(참고자료). 구글은 검색 순위를 매길 때 모바일 친화적인 웹 페이지를 모바일 검색 결과에서 더 높은 점수를 주기 때문에 viewport 메타 태그는 매우 중요합니다(2015년 현재).
다음은 viewport 메타 태그가 있는 페이지와 없는 페이지가 모바일에서 보여지는 모습입니다.
많은 사람들이 모바일에서 데스크톱 버전의 페이지가 로드 됐을 때 뒤로가기 버튼을 누르기 쉽습니다. 이런 상황은 사용자들을 짜증나게 하고 읽기 힘들게 만들기 때문입니다. 이것은 구글에 부정적인 신호를 보내게 될지도 모르며 해당 웹 페이지에 바람직하지 않은 무언가가 있다고 말하는 것과 같습니다.
viewport 메타 태그는 웹사이트를 모바일 친화적으로 만드는 것의 전부는 아닙니다. 웹 사이트는 또한 반응형 디자인을 적용할 필요가 있습니다.
Best Practices
- 모든 웹 페이지에 viewport 메타 태그를 사용해라.
- 사용하는 방법을 잘 모른다면 기본 태그를 사용해라(아래 참조).
웹페이지에 어떻게 description 메타 태그를 넣을 수 있을까?
웹페이지 <head>섹션에 아래 코드를 붙여 넣습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">content 속성을 반드시 _width=device-width, initial-scale=1.0_로 설정해야하는건 아니지만, 대부분의 웹페이지에서 일반적으로 실행되는 설정입니다.
어떻게 일반적으로 viewport 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
대부분의 CMS나 CMS의 테마에서 자동으로 viewport를 설정하기 때문에 대부분의 모던 브라우저에서 viewport 태그에 대한 이슈는 일반적인으로 발생하지 않는다.
Google Search Console의 Mobile Usability 보고서를 사용해서 이슈를 확인할 수 있습니다.
Mobile Usability 보고서는 모바일 기기에서의 사용성 이슈가 있는 페이지들을 보여줍니다. viewport 메타 태그의 누락으로 인한 이슈들이 있다면, "Viewport not set" 에러를 보여줍니다.
이 이슈가 발생한 페이지들에 대해 적절한 viewport 메타 태그를 추가함으로 해결이 가능합니다.
IMPORTANT
여러 다른 너비에 대한 CSS 스타일이 정의되지 않았기 때문에 발생하는 모바일 디스플레이 문제는 viewport 메타 태그를 추가하는 것으로 해결할 수 없습니다. viewport 메타 태그를 추가하여 해결되지 않는다면, 개발자에게 문의합니다.
Google Search Console은 사용하지 않나요?
viewport 메타 태그는 거의 항상 사이트 레베에서 설정되고 일반적으로 CMS 테마 설정에서 하드코딩 됩니다.
홈페이지에서 viewport 메타 태그에 대해 검사할 때 Google’s Mobile-Friendly Test tool를 사용해라.
홈페이지에 viewport 메타 태그가 없다면, 웹사이트 어디에도 존재하지 않을 것입니다.
이 방법이 완벽한 방법과는 거리가 있다는 것을 기억하고 가능하면 Google Search Console을 항상 사용해야 합니다.
Meta charset
chartset 메타 태그는 웹페이지에 문자 인코딩을 설정합니다. 다른 말로 하면, 웹페이지에 글자가 어떻게 표시해야하는지 브라우저에게 알려줍니다.
문자 설정 방법은 수 백 가지가 있지만, 가장 흔히 사용하는 두 가지 설정이 있습니다.
- UTF-8 - 유니코드 문자 인코딩
- ISO-8859-1 - 라틴 알파벳 문자 인코딩
왜 SEO에서 charset 메타 태그가 중요한가?
잘못된 문자 인코딩을 사용하면 브라우저에 적절하지 않은 문자 표기가 야기될 수 있습니다.
문자 형식 지정 문제는 사용자 경험에 나쁜 영향을 주고 웹페이지가 깨진 것처럼 보여질 수 있습니다.
이로 인해 아래와 같은 SEO 문제가 발생할 수 있습니다.
- 해당 페이지로 링크하는걸 원하지 않는 사용자
- 높은 이탈률, 낮은 페이지 체류 시간, 낮은 ****dwell time
- 웹페이지 컨텐츠를 검색 엔진이 이해하지 못 함
이 문제에 대해 진지하게 생각해봅니다.
웹페이지가 문자 설정 이슈의 결과로 심하게 깨져있지 않다면, 이런 문제들이 발생할 가능성은 거의 없습니다.
하지만 여전히 구글이 추천하는 유니코드나 UTF-8을 가능하다면 사용하는 것이 좋습니다.
Best Practices
- 모든 웹페이지에 charset 메타 태그를 사용해라.
- 가능하다면 UTF-8을 사용해라.
- HTML 버전에 맞는 올바른 문법을 사용해라.
웹페이지에 어떻게 charset 메타 태그를 넣을 수 있을까?
웹페이지 <head>섹션에 아래 코드를 붙여 넣습니다.
<meta charset="UTF-8">HTML4 이하 버전을 사용한다면, 대신 아래 코드를 사용합니다.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">사용하는 HTML의 버전이 정확하지 않다면, <!doctype html>를 소스코드에서 찾아봅니다. 코드에 HTML5가 있다면 HTML5 버전입니다.
어떻게 일반적으로 charset 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
대부분의 웹사이트는 UTF-8이나 ISO-8859-1 문자 인코딩을 사용합니다.
ISO-8859-1보다는 UTF-8을 선호합니다.
이러한 이유로, UTF-8 인코딩을 사용하지 않는 웹사이트의 페이지들을 한번 확인해 보는 것이 좋습니다.
Ahrefs’ Site Audit에서도 검사해 볼 수 있습니다. 페이지 탐색기로 가서 아래 설정을 합니다.
검색 결과가 반환되면, 문자 인코딩 문제를 수동으로 확인해 봅니다.
가능하다면 UTF-8 인코딩으로 변경합니다. 이것은 많은 이슈를 해결하지만 항상 그런 것은 아닙니다. 하지만, charset 메타 태그를 전혀 설정하지 않는다면, 브라우저가 추측하여 강제로 설정하고 불필요한 텍스트를 표기할지도 모릅니다.
자세한 설명은 링크를 참조.
Meta refresh redirect
refresh 메타 태그는 설정된 시간이 지나면 다른 URL로 사용자를 리다이렉트하도록 웹브라우저에게 알려줍니다.
왜 SEO에서 refresh redirect 메타 태그가 중요한가?
refresh redirect 메타 태그들은 구글이 이해하고 존중한다고 할지라도 이 태그들을 사용하지 않아야 한다는 점에서 SEO에서 매우 중요하다.
이러한 이유가 몇 가지 있다.
- 모든 브라우저에서 지원하지 않는다.
- 사용자들을 혼란스럽게 할 수 있다(보안상의 불안을 증가시킨다).
- 목적지의 URL을 보기 전에 파싱을 필요로 하며, 이는 시간이 더 걸리게 한다.
또다른 잠재적 문제는 페이지에 canonical 태그가 없을 때 발생한다는 것이며, John Mueller의 트윗에서 설명하고 있다.
Best Practices
- refresh redirect 메타 태그는 절대적으로 필요하지 않다면 피해라.
- refresh redirect 메타 태그 대신에 301 redirect를 사용해라
(만약 필요로 한다면) 웹페이지에 어떻게 refresh redirect 메타 태그를 넣을 수 있을까?
웹페이지 <head>섹션에 아래 코드를 붙여 넣습니다.
<meta http-equiv="refresh" content="5;url="https://example.com/">content 속성은 초단위의 지연 시간을 지정합니다. URL 속성은 redirect 시킬 URL을 지정합니다.
어떻게 일반적으로 refresh redirect 메타 태그의 잘못된 점을 찾아 수정할 수 있을까?
refresh redirect 메타 태그는 잘못 사용되는 방식이기 때문에, 가능하다면 제거하는게 좋습니다.
refresh redirect 메타 태그를 찾기 위해서 Ahrefs’ Site Audit에서 사이트를 크롤링해서 Internal pages 보고서를 확인해봅니다. "refresh redirect 메타 태그" 에러를 확인합니다.
가능하다면 301 혹은 301 redirect로 대체합니다.
만약 그렇게 할 수 없다면, canonical 태그가 있는지 확인하고 웹페이지가 canonical 버전을 참조하는지 확인합니다.
keyword 메타 태그는 무엇인가?
몇몇 글들에서는 목표로하는 키워드들을 keyword 메타 태그로 채워넣어야 한다고 말합니다. 하지만 이것은 무의미하고 어쩌면 나쁜 조언일 수 있습니다. 구글은 2009년 이후부터는 keyword 메타 태그를 랭킹 산정에 사용하지 않는다고 언급했기 때문입니다.
[...] keyword 메타 태그는 빠르게 관련이 없는 키워드들로 채워질 수 있는 부분이 되었다. keyword 메타 태그는 자주 악용되었기 때문에, 수년 전부터 구글은 keyword 메타 태그를 무시하기 시작했다.
Bing은 2011년에 keyword 메타 태그가 스팸 신호로 사용된다는 것을 발표하면서 한 단계 더 나아갔습니다. 그래서 만약 keyword 메타 태그에 키워드를 채워넣었다면, Bing에서는 의도한 것과 반대로 동작할 수 있습니다.
이러한 이유로 인해서 사이트에서 keyword 메타 태그를 제거하는 것이 가장 좋을 것입니다.
이렇게 하기 위해서, Ahrefs’ Site Audit에서 웹사이트를 크롤링한 다음, Page 탐색기에 아래와 같이 세팅을 합니다.
매칭된 페이지들에서 keyword 메타 태그를 지웁니다.
대부분의 경우 많은 웹사이트에서는 CMS에서 웹사이트 전반적으로 keyword 메타 태그를 설정하기 때문에 쉽게 제거할 수 있습니다. 모든 페이지에서 keyword 메타 태그를 제거하는 것은 하나의 코드 조각을 제거하는 것이면 될 것입니다.
추천 포스팅: Meta Keywords: What Are They and Should You Use Them?
Final thoughts
메타 태그는 그리 복잡하지 않습니다. 위의 6가지 메타 태그를 이해하면 중요한 SEO를 잘못 사용하는 것을 막기에 충분합니다.
메타 태그들에 대해 더 배우고 싶다면? https://www.metatags.org/all-meta-tags-overview/
소셜미디어로부터의 트래픽을 최대화하고 싶다면? Open Graph meta tags에 대해 읽어봅니다.
혹시 놓친 내용이 있다면 트위터 로 알려주세요.
Article by Joshua Hardwick
참조
728x90
반응형
'기술이 된 상상' 카테고리의 다른 글
| CSS position 속성 relative, absolute, fixed, sticky 비교 (0) | 2023.03.02 |
|---|---|
| 마케팅 용어: DAU, WAU, MAU, MCU, ACU, PR, ARPPU, Stickiness (0) | 2021.10.06 |
| [HTML] abbr 요소 by MDN (0) | 2021.07.01 |
| [CSS] position: static, relative, absolute, fixed (0) | 2021.04.26 |
| [CSS] display: inline, block, inline-block (0) | 2021.04.02 |
