메타 태그란 검색 엔진에 웹 페이지를 표시하는 방법과 같은 중요한 정보를 알려주는 코드 스니펫 입니다.
메타 제목
메타 제목은 구글 및 대부분의 다른 검색 엔진이 검색 결과에 표시 하는 페이지 제목입니다.
SEO에 중요한 이유
제목은 사용자에게 검색 결과의 내용에 대해 빠르게 이해하게 해줍니다. 클릭 할 페이지를 결정하는데 주로 사용되는 정보이므로 고품질 제목을 사용하는 것이 중요합니다.
올바른 메타 제목 사용
- 각 페이지에 고유한 제목 태그를 작성하세요.
- 간결하지만 설명적이어야 하며 모호한 제목은 피하세요.
- 검색 의도와 일치하는 제목을 작성하세요.
- 타겟 키워드를 포함하고 60자 미만으로 유지하세요.
페이지에 제목 태그를 추가하는 방법
head 페이지 섹션에 ‘<title>페이지 제목</title>’ 라고 넣으세요.
일반적인 제목 태그 실수
- 너무 길거나 짧은 경우 – 불필요하게 길거나 너무 짧은 제목은 피하세요.
- 존재하지 않는 경우 – 모든 페이지에는 제목 태그가 있어야 합니다.
- 한 페이지에 여러개의 제목 태그가 있는 경우 – 페이지에 둘 이상의 제목 태그가 있는 경우 원하지 않는 제목 태그가 표시될 수 있습니다.
- 제목이 여러 페이지에 중복 된 경우 – 각 페이지에 고유한 제목을 갖는 것이 중요합니다.
메타 설명
메타 설명은 페이지의 내용을 요약 한 것입니다.
SEO에 중요한 이유
메타 설명이 직접적인 순위 요소는 아니지만 페이지의 내용에 관련성있는 짧고 요약된 설명으로 검색자들이 찾고 있는 페이지라는 것을 알리는 데 중요하게 쓰입니다.
올바른 메타 설명 사용
- 각 페이지에 대한 고유한 설명을 작성하세요.
- 내용을 정확하게 요약하고 일반적인 설명은 피하세요.
- 검색 의도와 일치하는 설명을 작성하세요.
- 타겟 키워드를 포함하고 160자 미만으로 유지하세요.
페이지에 메타 설명을 추가하는 방법
head 페이지 섹션에 ‘meta mame=”description”content=”메타 설명”‘ 라고 넣으세요.
일반적인 메타 설명 실수
- 너무 길거나 짧은 경우 – 메타 설명의 길이에 제한이 있는건 아니지만 검색 결과 스니펫은 일반적으로 기기 너비에 맞게 필요에 따라 잘릴 수 있습니다.
- 존재하지 않는 경우 – 사이트의 모든 페이지에 메타 설명이 있어야 합니다.
- 한 페이지에 여러개의 메타 설명이 있는 경우 – 둘 이상의 태그가 검색 엔진을 혼동하게 할 수 있습니다.
- 설명이 여러 페이지에 중복 된 경우 – 페이지마다 설명을 다르게 해야합니다.
메타 로봇
메타 로봇 태그는 검색 엔진이 웹 페이지를 크롤링할지 여부와 방법을 알려줍니다.
SEO에 중요한 이유
메타 로봇 태그에 잘못된 속성을 사용하면 검색 결과에서 사이트의 존재 여부에 치명적인 영향을 미칩니다. 이를 염두에 두고 이 태그에서 사용할 수 있는 값은 다음과 같습니다.
- index : 페이지의 색인을 생성하도록 봇에게 지시합니다.
- noindex : 페이지의 색인을 생성하지 않도록 봇에게 지시합니다.
- follow : 봇에게 페이지의 링크를 크롤링하도록 지시합니다.
- nofollow : 봇에게 페이지의 리크를 크롤링하지 않도록 지시합니다.
올바른 메타 로봇 사용
- 검색 엔진이 페이지를 크롤링하는 방식을 제한하려는 경우에만 베타 로봇 태그를 사용하세요.
- ‘robots.txt’ 에서 메타 로봇 태그가 있는 페이지를 차단하지 마세요.
페이지에 메타 로봇 태그를 추가하는 방법
위에서 설명한 코드중 적절한 코드를 head 페이지 섹션에 넣으세요.
일반적인 메타 로봇 실수
- robots.txt에 의해 차단 된 색인이 생성되지 않은 경우
- Rogue meta noindex – 구글이 페이지의 색인을 생성하지 못해 유기적 트래픽이 발생하지 않습니다.
- Rogue meta nofollow – 구글이 페이지의 링크를 크롤링하지 못해 중요한 콘텐츠를 검색하고 색인을 생성하지 못할 수 있습니다. 또한 PageRank흐름을 방지합니다.
메타 뷰포트
베타 뷰포트 태그는 웹 페이지의 가시 영역을 설정합니다. PC, 모바일 등 다양한 화면 크기에서 렌더링하는 방법을 브라우저에 지시합니다.
SEO에 중요한 이유
구글은 모바일 친화적인 웹 페이지를 더 높게 평가하기 때문에 이 태그가 있으면 페이지가 모바일 친화적이라고 구글이 인식하게 됩니다. 모든 웹 페이지에 메타 뷰포트 태그를 사용하세요.
페이지에 메타 뷰포트 태그를 추가하는 방법
head 페이지 섹션에 ‘meta name = “viewport”content = “width = device-width, initial-scale = 1.0″‘ 코드를 넣으세요.
일반적인 메타 뷰포트 실수
대부분의 CMS 및 테마는 메타 뷰포트를 자동으로 설정하기 때문에 관련 문제는 최신 웹 사이트에선 흔하지 않습니다.
meta charset
meta charset 태그는 웹 페이지의 문장 인코딩을 설정합니다. 수많은 문자 집합이 있지만 웹에서 가장 일반적인 두 가지는 다음과 같습니다.
- UTF-8 : 유니 코드 용 문자 인코딩
- ISO-8859-1 : 라틴 알파벳의 문자 인코딩
SEO에 중요한 이유
잘못된 문자 인코딩을 사용할 경우 검색 엔진이 콘텐츠를 이해하지 못할수도 있습니다. 그리고 사용자들의 이탈률이 높아지고 페이지에 머문 시간이 짧아집니다.
올바른 meta charset 사용
- 모든 웹 페이지에서 meta chatset 태그를 사용하세요.
- 가능한 경우 UTF-8을 사용하세요.
페이지에 meta charset 태그를 추가하는 방법
head 페이지 섹션에 ‘meta charset = “UTF-8″‘ 코드를 넣으세요.
meta refresh redirect
meta refresh redirect 태그는 웹 브라우저에 일정 시간이 지나면 사용자를 다른 URL로 리디렉션 하도록 지시합니다 구글이 meta refresh redirect 태그를 사용하는 것에 대해 이해하더라도 SEO에 있어 이 태그는 사용하는 일이 없는것이 좋습니다. 왜냐하면 사용자에게 혼란을 줄 수 있으며 보안 문제를 일으킬 수 있습니다. 꼭 필요한 경우가 아니면 meta refresh redirect 태그는 사용하지 마세요.
