메타 태그는 검색 엔진이 웹사이트를 올바르게 표시할 수 있도록 도와주는 코드입니다.

브라우저에서도 사용되어 방문자에게 웹사이트의 정보를 잘 전달하도록 해줍니다. 

메타 태그는 웹페이지의 일부이지만, 일반 사용자에게 보이지 않고 웹페이지의 소스 코드에서만 확인할 수 있습니다.

검색 엔진 최적화를 위해 메타 태그는 중요하며, 웹사이트 순위를 높이고 클릭률을 올리고 이탈률을 줄이는 데 도움이 됩니다.

이 튜토리얼에서는 SEO에 중요한 여섯 가지 메타 태그에 대해 설명합니다.

• 메타 타이틀 (검색 엔진 결과에 표시되는 제목)
• 메타 설명 (검색 결과에 표시되는 짧은 설명)
• 메타 로봇 (검색 엔진이 웹페이지를 크롤링하는 방식을 제어)
• 메타 새로 고침 리디렉션 (페이지가 자동으로 새로 고쳐지거나 다른 페이지로 리디렉션되도록 설정)
• 문자셋 메타 (웹페이지에서 사용할 문자 인코딩을 설정)
• 메타 뷰포트 (모바일 환경에서 페이지가 어떻게 표시될지 제어)

메타 타이틀

아래 이미지는 Google과 다른 검색 엔진에 나타날 수 있는 제목의 예시입니다.

참고: 제목 태그는 항상 Google 검색 결과에 나타나는 것이 아닙니다. 상황에 따라 다른 정보가 표시될 수 있습니다.

제목 태그의 중요성

Google에 따르면, 제목은 사용자가 검색 결과를 보며 클릭할 페이지를 선택하는 데 큰 역할을 합니다.

각 페이지에는 유일하고 설명적인 제목이 필요합니다.

효과적인 제목 태그 작성 방법

• 모든 페이지에 고유한 제목 태그를 사용하세요.
• 핵심 내용을 간결하게 설명하세요.
• 제목은 일반적이지 않고 구체적이어야 합니다.
• 첫 글자는 대문자로 사용하세요.
• 클릭을 유도하는 제목을 만드세요 (클릭베이트는 피하세요).
• 검색 의도에 부합하는 내용을 반영하세요.
• 중요한 키워드를 포함하세요.
• 제목 길이는 최대 60자로 제한하세요.

타이틀 태그 생성 팁

웹사이트의 head 섹션에서 다음 코드 형식을 사용해 타이틀 태그를 입력할 수 있습니다.

<title>This is the title of the page.</title>

팁: WordPress를 사용 중이라면 Yoast 같은 SEO 플러그인은 필수입니다.

페이지나 게시물을 편집할 때 제목 태그를 입력할 수 있는 필드를 쉽게 찾을 수 있습니다.

Weebly, Strikingly 같은 다른 콘텐츠 관리 시스템(CMS)에서도 비슷한 기능이 사전 구현되어 있는 경우가 많습니다.

타이틀 태그 오류 해결 방법

타이틀 태그와 관련된 오류를 피하기 위한 4가지 체크리스트

• 길이 제한 - 제목이 너무 길면 잘릴 수 있습니다.
• 타이틀 태그 누락 - 모든 페이지에는 제목 태그가 필요합니다.
• 중복된 제목 태그 - 페이지마다 고유한 제목 태그를 사용해야 합니다.
• 여러 개의 타이틀 태그 - 동일 페이지에 여러 제목 태그를 두지 않도록 주의합니다.

SERPSim 같은 무료 도구를 사용하여 페이지의 제목 길이를 점검할 수 있습니다.

제목이 바로 떠오르지 않으면 먼저 구체적인 아이디어를 고민해 보세요.

타이틀 태그에 빨간색 픽셀이 많아지면 길이가 너무 긴 것이므로 줄여야 합니다.

사이트의 제목 태그를 점검하려면 Ahrefs의 사이트 감사 도구를 사용해 크롤링을 진행하세요.

이후 페이지 보고서에서 "여러 제목 태그" 문제를 찾아보시면 됩니다.

Ahrefs 같은 SEO 도구로 웹사이트 전체를 분석하여 여러 제목 태그 문제를 찾아 해결할 수 있습니다.

중복된 제목 태그를 확인하려면 Ahrefs의 중복 콘텐츠 보고서를 활용해 문제를 확인하고 수정하세요.

영향을 받은 페이지의 제목을 수정해 다른 페이지와 차별화하세요.

너무 길거나, 짧거나, 누락되었거나 비어 있는 제목 태그도 이 보고서에서 확인할 수 있습니다.

메타 설명

메타 설명은 페이지 정보의 개요를 제공하며, 주로 검색 결과의 요약으로 표시됩니다.

참고: Google은 항상 제공한 메타 설명을 그대로 사용하지 않을 수 있습니다. 경우에 따라 자체적으로 새 요약을 생성해 표시하기도 합니다.

검색 엔진 최적화, 얼마나 중요한가요?

메타 태그는 검색 엔진이 웹사이트 정보를 표시하는 방법을 알려주는 코드입니다.

특히 메타 설명은 페이지 내용의 개요로서, 검색 결과에서 사이트를 클릭하도록 유도하는 짧은 요약을 제공합니다.

이 설명은 사용자에게 필요한 정보를 이 페이지에서 얻을 수 있다는 확신을 줍니다.

다만, 메타 설명 자체가 검색 순위에 직접적인 영향을 미치지는 않지만, 클릭률에 긍정적 영향을 줄 수 있습니다.

메타 설명 작성 시 유의사항

• 각 페이지에 맞는 구체적이고 요약된 설명을 작성하세요.
• 모호한 표현을 피하고, 핵심 내용을 명확하게 전달하세요.
• 문장은 첫 글자를 대문자로 시작하고, 중요한 키워드는 자연스럽게 포함하세요.
• 설명은 160자 이내로 제한하는 것이 좋습니다.

메타 설명을 작성하는 방법

메타 설명을 추가하려면 다음과 같은 코드 형식을 웹페이지의 head 섹션에 삽입하세요.

코드 복사
<metadd<meta name="description" content="Place the meta description text here.">

WordPress를 사용한다면 Yoast 같은 SEO 플러그인에서 설명을 쉽게 추가할 수 있으며,

Weebly, Strikingly 등 다른 CMS에서도 비슷한 기능을 제공하고 있습니다.

메타 설명 오류 확인 및 수정

메타 설명의 주요 오류는 4가지가 있습니다.

• 길이 문제: 너무 길거나 너무 짧은 설명은 잘리지 않도록 주의가 필요합니다.
• 누락된 메타 설명: 모든 페이지에 메타 설명을 추가하세요.
• 중복 메타 설명: 각 페이지에 고유한 설명을 사용해야 합니다.
• 다수의 메타 설명 태그: 한 페이지에 여러 개의 메타 설명 태그가 있으면 혼란을 초래할 수 있습니다.

SERPSim이나 Yoast를 사용해 각 페이지의 메타 설명 오류를 점검하고,

Ahrefs와 같은 SEO 도구로 사이트 전체에서 중복된 설명이나 길이 문제를 확인할 수 있습니다.

메타 로봇

메타 로봇 태그는 검색 엔진이 웹사이트를 어떻게 크롤링(방문)하고 인덱싱(저장)할지에 대한 지침을 제공합니다.

HTML 코드에 아래와 같은 형태로 메타 로봇 태그를 추가할 수 있습니다.

코드 복사
<meta name="robots" content="noindex, follow">

검색 엔진 최적화, 얼마나 중요한가요?

코드 복사
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, follow">
<meta name="robots" content="index, nofollow">

일반적인 메타 로봇 문제와 해결 방법

• 인덱싱 차단: robots.txt 파일로 페이지를 차단하면, 검색 엔진이 noindex 태그가 있는 페이지를 인덱싱할 수 있습니다. 이 경우에는 robots.txt 파일에서 차단을 해제하거나 meta robots 태그에서 noindex를 제거하세요.
• noindex 설정: 중요한 페이지에 noindex가 설정되어 있을 경우, 페이지가 검색 결과에 나타나지 않을 수 있습니다. 소스 코드에서 해당 태그를 제거하여 검색 엔진이 페이지를 인덱싱할 수 있도록 하세요.
• nofollow 설정: 페이지의 링크가 크롤링되지 않도록 하는 불필요한 nofollow 태그는 제거하는 것이 좋습니다.

Google Search Console의 적용 범위 보고서와 Ahrefs와 같은 도구를 사용하여 메타 로봇 태그 오류를 점검하고 수정할 수 있습니다.

메타 뷰포트

메타 뷰포트 태그는 웹페이지가 사용자의 장치 화면에 어떻게 보일지를 설정하는 코드입니다.

특히 모바일 환경에서 화면을 자동으로 조정해 웹사이트가 잘 보이게 하며, Google이 모바일 친화적인 사이트로 평가하는 데 도움이 됩니다.

메타 뷰포트 태그의 중요성

Google에서는 모바일 검색에서 사용자 친화적인 페이지를 우선시합니다. 메타 뷰포트 태그는 이러한 모바일 친화성의 중요한 요소입니다.

이 태그가 없으면 페이지가 데스크톱 버전으로 로드되어 화면을 넘기거나 확대해야 하므로 사용자에게 불편을 줄 수 있습니다.

메타 뷰포트 태그 작성 방법

웹페이지의 헤드 섹션에 아래와 같은 코드를 넣어 모바일 기기에 최적화하세요.

코드 복사
<meta name="viewport" content="width=device-width, initial-scale=1.0">

*width=device-width*는 페이지 너비를 기기 화면에 맞추며, *initial-scale=1.0*은 기본 확대 배율을 설정합니다.

content 속성을 width=device-width, initial-scale=1.0으로 설정할 필요는 없지만,

이것이 가장 흔하고 대부분 사이트에 적합한 구현 방식이라는 점을 기억하는 것이 중요합니다.

자주 발생하는 오류 및 해결 방법

대부분의 CMS는 기본적으로 메타 뷰포트를 지원합니다.

그러나 Google Search Console의 모바일 사용성 보고서를 통해 태그가 누락된 페이지를 찾을 수 있습니다.

"뷰포트가 설정되지 않음" 오류가 있다면, 해당 페이지에 메타 뷰포트 태그를 추가하세요.

중요한 주의사항

반응형이 아닌 CSS 스타일로 인해 발생하는 모바일 디스플레이 문제는 메타 뷰포트 태그만으로는 해결되지 않을 수 있습니다.

메타 뷰포트 태그를 추가했음에도 문제가 지속된다면 개발자와 상의하는 것이 좋습니다.

혹시 Google Search Console을 사용하고 계시나요?

메타 뷰포트 설정은 종종 도메인 수준에서 구성되며, 테마에 하드코딩된 경우가 많습니다.

Google의 모바일 친화성 테스트를 통해 홈페이지에서 메타 뷰포트 요소가 적용되었는지 확인해 보세요.

참고: 홈페이지에 메타 뷰포트 요소가 없다면, 사이트의 다른 페이지에도 적용되지 않았을 가능성이 큽니다.

항상 Google Search Console을 활용해 모바일 최적화 상태를 점검하는 것이 중요합니다.

메타 문자셋

메타 문자셋의 중요성

부적절한 인코딩 방식으로 설정된 웹페이지는 일부 문자들이 깨져 보일 수 있습니다.

메타 문자셋 태그 사용 방법

모든 웹페이지에 메타 문자셋 태그를 포함하고, UTF-8 형식을 사용하는 것이 좋습니다.

아래 코드를 웹페이지의 헤드 섹션에 넣어주세요.

html
코드 복사
<meta charset="UTF-8">

HTML5 이전 버전에서는 다음과 같은 태그를 사용해야 할 수도 있습니다.

html
코드 복사
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

메타 문자셋의 일반적인 오류 및 해결 방법

웹페이지의 모든 페이지에서 UTF-8로 인코딩되었는지 확인하세요.

Ahrefs의 사이트 감사 도구를 통해 페이지 인코딩을 검토할 수 있습니다.

UTF-8 인코딩으로 전환하면 깨짐 없이 사용자에게 올바른 텍스트를 표시할 수 있습니다.

메타 새로 고침 리디렉션 태그는 일정 시간이 지나면 자동으로 사용자를 특정 URL로 리디렉션하는 기능을 수행합니다.

하지만 SEO 관점에서 Google이 인식할 수 있음에도 불구하고, 이 태그 사용은 권장되지 않습니다.

일정 시간이 지나면 사용자는 웹 브라우저의 메타 새로 고침 요소를 사용하여 새 URL로 이동될 수 있습니다. 

메타 새로 고침 리디렉션의 SEO 영향

메타 새로 고침 리디렉션을 피하는 이유는 다음과 같습니다.

• 일부 최신 브라우저에서 지원되지 않습니다.
• 사용자에게 혼란을 줄 수 있고, 때로는 보안 문제를 야기할 수 있습니다.
• 대상 URL로의 이동 전에 페이지 로딩이 느려질 수 있습니다.

Google 전문가인 John Mueller도 트윗을 통해 페이지에 표준(canonical) 태그가 없는 경우 문제가 발생할 수 있다고 언급했습니다.

메타 새로 고침 리디렉션을 대체하는 방법

가능하다면 301 리디렉션을 사용하는 것이 좋습니다. 그래야 검색 엔진이 더 안정적으로 리디렉션을 인식할 수 있습니다.

만약 메타 새로 고침 리디렉션을 꼭 사용해야 한다면, 다음과 같은 코드를 사용해보세요.

html
코드 복사
<meta http-equiv="refresh" content="5; URL=https://example.com">

여기서 content="5; URL=https://example.com"는 5초 후 지정된 URL로 리디렉션됩니다.

메타 새로 고침 리디렉션 오류 식별 및 수정 방법

이러한 리디렉션 문제를 찾으려면 Ahrefs 사이트 감사 도구를 통해 페이지의 '메타 새로 고침 리디렉션' 문제를 확인하세요.

문제를 발견하면 가급적 301 또는 302 리디렉션으로 교체하는 것이 좋습니다.

메타 키워드 태그 사용 시 주의사항

과거에 유용했던 메타 키워드 태그는 더 이상 Google에서 순위에 영향을 미치지 않으며,

Bing에서도 너무 많은 키워드를 포함할 경우 페널티를 받을 수 있습니다. 안전을 위해 메타 키워드 태그는 삭제하는 것이 좋습니다.

Ahrefs의 사이트 감사 도구를 사용하여 메타 키워드 태그를 가진 페이지를 식별하고 제거할 수 있습니다.

대부분 CMS에서는 사이트 전체에 걸쳐 이 태그를 삭제하는 기능을 제공합니다.

결론

메타 태그는 사이트의 SEO 성능에 중요한 영향을 미칠 수 있으므로, 위에서 언급한 태그 관리 방법을 따르세요.

필요한 경우 Open Graph 메타 태그를 사용하여 소셜 미디어에서 사이트 노출을 극대화하는 것도 추천드립니다.