Skip to content
포워드 마케팅 로고
  • SEO 서비스
  • 마케팅 성과분석
  • 홈페이지 제작
  • 블로그
  • 문의하기

메타태그(meta tag), SEO 에 도움되는 메타 설정 방법

메인페이지 » 온페이지 SEO » 메타태그(meta tag), SEO 에 도움되는 메타 설정 방법

공유하기

메타태그(meta tag), SEO 에 도움되는 메타 설정 방법

메타태그 정의

메타 태그는 페이지의 콘텐츠를 설명하는 텍스트 스니펫이며, 페이지가 무엇을 설명하는지 검색엔진에게 알려주는 아주 중요한 콘텐츠 입니다.

메타 태그는 일반적으로 페이지의 <Head> 에있는 HTML에만 존재하므로 소스코드에서 확인이 가능합니다.

메타 태그를 작성 및 수정을 위해 FTP에 접속하여 CMS에서 코딩해야 합니다.

하지만, 워드프레스와 카페24 등의 플랫폼 방식의 홈페이지는 “기본 제공” 솔루션에는 표준 링크나 메타 설명과 같은 메타 태그 전용 섹션이 있기 때문에, 홈페이지의 성능을 강화하는 플랫폼에 따라 더 쉽고 더 어려워질 수 있습니다.

검색엔진최적화(SEO)로 홈페이지 노출 확장하는 방법 편을 읽으셨다면, 홈페이지를 읽는 두 분류의 방문자가 있다는것을 이해 하셨을 겁니다.

검색엔진 로봇과 사람의 크롤링

“메타”는 “메타 데이터”를 의미하며 이러한 태그가 제공하는 데이터의 종류인 페이지의 ‘데이터’에 대한 ‘정보’입니다.

즉, 메타 데이터는 방문하는 검색엔진 로봇들을 위해 페이지에 저장된 컨텐츠 입니다.

 

메타태그(meta tag)가  SEO 에 도움이 되나요?

  • 메타태그를 통해 검색엔진에게 홈페이지의 컨텐츠가 무엇에 관한 것인지 쉽게 알려줄 수 있으므로 SEO에 매우 중요합니다.
  • 메타태그는 사이트가 SERP에 표시되는 방식과 웹 사이트를 클릭하려는 사용자 수에 영향을 미치기 때문에 중요합니다. 따라서 트레픽과 전환에 영향을 미쳐 SEO 및 순위에 영향을 미칠 수 있습니다.

 

이번 포스팅을 통해 아래 4가지의 메타 설정법과 플랫폼 홈페이지는 어떻게 적용을 시키는지 알아보겠습니다.

  1. 메타 타이틀 (Meta Title)
  2. 메타 디스크립션 (Meta Description)
  3. 메타 로봇 (Meta Robot)
  4. 메타 뷰포트 (Meta Viewport)

 

1. 메타 타이틀 (Meta Title)

구글과 네이버를 비롯한 대부분의 검색엔진이 검색결과에 표시하는 페이지 제목입니다.

메타 제목

Note: 검색엔진이 항상 타이틀 태그를 표시하는 것은 아닙니다. 인덱싱 오류가 생긴 경우, 랜덤으로 페이지의 내용을 저장합니다.

 

메타 타이틀이 SEO에 왜 도움이 될까요?

메타 타이틀과 검색 키워드의 연관성으로 인해 검색 노출 연관성이 매우 크게 작용합니다.

클릭할 결과를 결정하는데 주로 사용되는 정보이기 때문에, 웹 페이지에서 고품질 제목을 사용하는 것이 중요합니다.

 

메타 타이틀 작성하는 좋은 예시:

  • 각 페이지 마다 고유한 메타 타이틀 태그를 작성
  • 페이지의 타겟 키워드를 1회 포함하여 타이틀 작성
  • 간략하지만 설득적으로 (클릭가치가 있는 제목)
  • 타겟 키워드의 의도와 일치하게 작성
  • 60자 이내로 작성

 

어떻게 메타 타이틀을 추가하나요?

1. 자신의 홈페이지 소스코드를 수정할 수 있는 권한이 있다면 ,아래 내용을 <head> 섹션에 복사 붙여 넣기 해주시면 됩니다.

<title> 여기에 원하는 콘텐츠를 작성하시면 됩니다 </title>

 

2. 워드프레스를 통해 홈페이지를 제작 하셨다면, 플러그인 Yoast SEO를 다운 받으셔서 아래 내용과 같이 작성 해주시면 됩니다.

워드프레스 타이틀 태그 작성 하는 방법

Note: 또 다른 해외 플랫폼인 Wix나 Shopify의 경우, 유사한 기능이 내장되어 있습니다.

 

3. 카페24를 통해 홈페이지를 제작 하셨다면, 운영관리의 검색엔진최적화 카테고리에서, 아래와 같이 설정할 수 있습니다.

카페24 타이틀 태그 설정하는 방법

Note: 카페24와 마찬가지로 메이크샵, 고도몰 등의 국내 플랫폼의 경우, 유사한 기능이 내장되어 있으니 참고해주세요.

 

메타 타이틀 태그에서 나타나는 문제점

  • 너무 길거나 짧은 경우. 구글과 네이버는 “불필요하게 길거나 장황한 제목은 피하면서” 서술적이고 간결하게 작성하라고 말합니다.
  • 타이틀 태그가 존재하지 않는 경우. 검색엔진은 모든 페이지에 타이틀 태그가 있어야 된다고 말합니다.
  • 한 페이지에 여러 타이틀 태그가 존재하는 경우. 한 페이지에 두 개 이상의 메타 타이틀이 존재하는 경우, 검색엔진에 바람직하지 않은 제목 태그로 표시 됩니다.
  • 여러 페이지의 타이틀 태그가 중복 되는 경우. 가장 흔히 나타나는 문제점이며, 검색엔진은 동일 콘텐츠로 인식하여 데이터를 저장할 수 없습니다.

 

메타 타이틀을 작성할 때, SERPSim 을 참고하셔서 작성 해보세요.

 

타이틀 태그가 길이가 너무 짧은 경우, 내용을 조금 더 추가해주세요.

타이틀 태그가 짧은 경우

 

타이틀 태그가 너무 긴 경우, 내용을 줄여주세요.

타이틀 태그가 긴 경우

 

중복된 타이틀 태그와 여러 타이틀 태그를 확인하시려면, 포워드SEO 문의하기 를 통해 내용을 남겨주시면 확인후 피드백 드리도록 하겠습니다.

 

2. 메타 설명문 (Meta Description)

메타 설명은 페이지 내용을 요약한 데이터 입니다. 검색엔진은 종종 검색 결과의 스니펫으로 해당 내용을 활용 합니다.

메타 설명문 예시

Note: 검색엔진이 항상 메타 설명문 내용을 표시하는 것은 아닙니다. 오류가 생긴 경우, 랜덤으로 페이지의 내용을 저장합니다.

 

메타 설명문이 SEO에 왜 도움이 될까요?

메타 설명문은 유저들이 검색엔진에서 키워드를 검색 했을 때, 가장 먼저 노출되는 콘텐츠 입니다. 유저들의 검색의도와 페이지가 가진 콘텐츠가 일치 하는지에 따라 우리 페이지로 방문을 일으킬수 있는 중요한 내용입니다. 그러나 메타 설명문은 검색엔진의 직접적인 순위에 영향을 주는 요소는 아닙니다.

 

메타 설명문 작성하는 좋은 예시:

  • 각 페이지 마다 고유한 메타 설명문 작성
  • 페이지의 타겟 키워드를 1회 포함하여 메타 설명 작성
  • 문장 형식으로 작성
  • 일반적인 설명 대신, 클릭가치가 있는 내용으로 작성
  • 유저들의 검색의도에 적절하게 작성
  • 160자 이내로 작성

 

어떻게 메타 설명문을 추가하나요?

메타 타이틀을 작성과 동일하게, 메타 설명문 또한 바꿔줄 수 있습니다.

 

1. 자신의 홈페이지 소스코드를 수정할 수 있는 권한이 있다면 ,아래 내용을 <head> 섹션에 복사 붙여 넣기 해주시면 됩니다.

<meta name=”description” content=”여기에 원하는 콘텐츠를 작성하시면 됩니다.”>


2. 워드프레스를 통해 홈페이지를 제작 하셨다면, 플러그인 Yoast SEO를 다운 받으셔서 아래 내용과 같이 작성 해주시면 됩니다.

워드프레스 메타 설명문 작성 방법

Note: 또 다른 해외 플랫폼인 Wix나 Shopify의 경우, 유사한 기능이 내장되어 있습니다.

 

3. 카페24를 통해 홈페이지를 제작 하셨다면, 운영관리의 검색엔진최적화 카테고리에서, 아래와 같이 설정할 수 있습니다.

카페24 메타 설명문 작성 방법

Note: 카페24와 마찬가지로 메이크샵, 고도몰 등의 국내 플랫폼의 경우, 유사한 기능이 내장되어 있으니 참고해주세요.

 

메타 설명문 태그에서 나타나는 문제점

  • 메타 설명문이 너무 길거나 짧은 경우. 구글과 네이버는 메타 설명문의 길이 제한은 없지만, 기기에 따라 설명문의 길이폭에 따라 잘릴수 있다고 말합니다.
  • 메타 설명문 태그가 존재하지 않는 경우. 사이트의 모든 페이지에 메타 설명문이 있는지 확인하세요.
  • 한 페이지에 여러 메타 설명문 태그가 존재하는 경우. 한 페이지에 둘 이상의 메타 설명문 태그는 검색엔진 로봇에게 혼동을 줄수 있다고 말합니다.
  • 여러 페이지의 메타 설명문 태그가 중복 되는 경우. 중복내용을 제거하여, 페이지의 고유 내용을 포함하여 설명해야 된다고 말합니다.

메타설명문 주의할점

 

3. 메타 로봇 (Meta Robots)

메타 로봇 태그는 검색엔진에 웹 페이지를 탐색해야 하는지 여부와 방법을 알려주는 태그 입니다.

<meta name=”robots” content=”index, follow”>

 

왜 메타 로봇 태그가 SEO 에 중요할까요?

메타 로봇 태그에 잘못된 특성을 사용하면 검색 결과에 사이트의 존재에 치명적인 영향을 줄 수 있습니다.

SEO 의 노력은 이 태그를 이해하고 효과적으로 사용하는지에 달려 있습니다.

이러한 점을 염두에 두고 이 태그에서 사용할 수 있는 값은 다음과 같습니다.

  • index: 페이지를 색인화 하도록 로봇에게 지시합니다.
  • noindex: 페이지를 색인화 하지 말라고 로봇에게 지시합니다.
  • follow: 로봇에게 페이지에서 링크를 탐색하도록 지시하고, 그리고 사용자는 이 페이지를 신뢰합니다.
  • nofollow: 로봇에게 페이지에서 링크를 탐색하지 말라고 지시하고, 사용자는 어떠한 승인도 암시하지 않습니다.

 

메타 로봇 활용하는 좋은 팁

  • 특정 페이지의 검색엔진 접근을 제한하고 싶은 경우에, 해당 메타 로봇 태그를 활용하세요.
  • robots.txt 파일 내에서, 메타 로봇 태그들을 차단하지 마세요.

 

Note: robots.txt 파일에 대해 궁금하시면, robots.txt와 sitemap.xml 개념 이해 및 활용 방법 을 확인 해주세요.

 

어떻게 메타 로봇을 설정하나요?

1. 홈페이지 소스코드 수정이 가능하다면, 적절한 메타 로봇 태그를 작성하여 <head> 섹션에 복사 붙여넣기를 합니다.

  • 다음 방법 중 하나로 결합하여 활용할 수 있습니다.
<meta name=”robots” content="noindex, nofollow">
<meta name=”robots” content="index, follow">
<meta name=”robots” content="noindex, follow">
<meta name=”robots” content="index, nofollow">

2. 워드프레스로 제작된 홈페이지라면, Yoast SEO 플러그인의 “고급” 탭에서 활용할 수 있습니다.

워드프레스 메타로봇 설정 방법

Note: 또 다른 해외 플랫폼인 Wix나 Shopify의 경우, 유사한 기능이 내장되어 있습니다.

 

3. 카페24를 통해 홈페이지를 제작 하셨다면, 운영관리의 검색엔진최적화 카테고리에서, 아래와 같이 설정할 수 있습니다.

카페24 메타로봇 설정 방법

Note: 카페24와 마찬가지로 메이크샵, 고도몰 등의 국내 플랫폼의 경우, 유사한 기능이 내장되어 있으니 참고해주세요.

 

고급설정을 클릭하여, Head 태그 소스 영역에서 해당 태그를 업데이트 해주면 됩니다.

해당 영역은 웹사이트의 모든 페이지에 적용이 되기 때문에, 개별 페이지에 따로 적용하실 필요는 없습니다.

 

4. 메타 뷰포트 (Meta viewport)

많은 검색 엔진은 얼마나 모바일 친화적인지에 따라 페이지의 순위를 매깁니다. 뷰포트 메타 태그가 없으면 모바일 장치는 일반적인 데스크톱 화면 폭으로 페이지를 렌더링한 다음 페이지를 축소하여 읽기 어렵게 만듭니다. 뷰포트 메타 태그를 설정하면 뷰포트의 폭과 크기를 모든 장치에서 올바르게 조정할 수 있습니다.

메타 뷰포트 태그는 웹 페이지의 표시 가능한 영역을 설정합니다.

다양한 화면 크기(예: 데스크톱/태블릿/모바일)로 페이지를 렌더링하는 방법을 브라우저에 지시하는 데 사용됩니다.

좁은 화면 장치(예: 모바일)는 일반적으로 화면보다 넓은 가상 창이나 뷰포트에서 페이지를 렌더링한 다음 렌더링된 결과를 아래로 축소하여 한 번에 볼 수 있도록 합니다. 그런 다음 이동 및 확대/축소하여 페이지의 다양한 영역을 볼 수 있습니다. 예를 들어 모바일 화면의 너비가 640px인 경우 980px의 가상 뷰포트로 페이지를 렌더링한 다음 640px 공간에 맞게 축소될 수 있습니다.

 

왜 메타 뷰포트는 SEO에 중요한가요?

검색엔진은 “이 태그가 있다는 것은 이 페이지가 모바일 친화적이라는 것을 검색엔진에 나타낸다”고 말합니다.

모바일 검색 점유율이 데스크탑 점유율을 넘어서면서, 검색엔진은 모바일 친화적인 웹 페이지를 더 높게 평가하고 있기 때문입니다.

 

메타 뷰포트 활용하는 좋은 팁

  • width=device-widt: 뷰포트의 너비를 장치의 너비로 설정합니다.
  • initial-scale=1: 사용자가 페이지를 방문할 때 초기 줌 레벨을 설정합니다.

 

어떻게 메타 뷰포트를 설정하나요?

1. 홈페이지 소스코드 수정이 가능하다면, 적절한 메타 로봇 태그를 작성하여 <head> 섹션에 복사 붙여넣기를 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

 

2, 3. 워드프레스 및 카페24 외 플랫폼 웹사이트의 경우, 테마에 따른 뷰포트 적용 여부를 확인해주셔야 합니다.

플랫폼 테마에 따라 반응형으로 구성된 웹사이트를 이용하시는것을 권장 드립니다.

 

메타태그 (Meta tag)를 통한 SEO 친화적 환경 설정 포스팅을 마치며

이번 포스팅을 메타태그 (Meta tag)를 알아보았습니다. 추가적으로 궁금하신 사항 또는 SEO 관련 질문들이 있으시면 언제든 문의 해주시기 바랍니다.

 

카테고리

  • 검색엔진 최적화
  • 구글 애널리틱스 GA
  • 기타 자료
  • 블로그 마케팅
  • 오프페이지 SEO
  • 온라인 마케팅
  • 온페이지 SEO
  • 유튜브 SEO
  • 전환율 최적화
  • 테크니컬 SEO

블로그 태그

CRO CTA eCommerce GA PPC SEM SEO SEO 알고리즘 SEO 콘텐츠 검색엔진최적화 구글 SEO 구글 애널리틱스 네이버 SEO 디지털 마케팅 랜딩 페이지 링크빌딩 메타태그 백링크 온라인 마케팅 유튜브최적화 콘텐츠 마케팅 클릭당 광고 테크니컬 SEO 홈페이지
By 포워드 팀 / Categories: 온페이지 SEO / Tags: SEO, 검색엔진최적화, 메타태그, 온라인 마케팅 /
포워드 로고
서비스
  • SEO 검색엔진최적화
  • 웹 데이터 분석
  • 홈페이지 제작
리소스
  • 블로그
포워드
  • 문의하기

회사명: 포워드스퀘어

대표자/CEO: 김종민

Co-Founder/CTO: Sarah Siavashi

사업자등록번호: 248-01-01836

사업분야: 데이터랩, 검색엔진최적화, 마케팅 컨설팅, 웹사이트 제작

주소: 서울특별시 금천구 가산디지털2로 166, 에이스 K1타워 919호 | 우편번호 : 08503

고객센터: 02-6080-8878

E-Mail: info@fourward.co.kr

개인정보관리책임자: 김종민

Copyright © 2022 • 포워드스퀘어 (FOURWARD) All right Reserved.

포워드 로고