온페이지 SEO의 기본이라고 볼 수 있는 메타태그.
실제로 html에서 메타태그로 입력하는 경우 글자 수에 제한이 없기 때문에
어느정도 길이로 입력해야할지 난감한 경우가 많다.
그럴 때는 아래의 기준을 참고해보자
기준1. 구글이 제안하는 메타태그 길이
메타태그는 크게 title태그와 description 태그로 나눌 수 있다.
일반적인 SEO 추천 공식에 따르면 title은 한글기준 50-60자 이내, description은 160자 이내로 작성하는 것을 권고한다.
https://www.next-t.co.kr/seo/콘텐츠seo/홈페이지-웹사이트-기획자가-꼭-알아야-할-콘텐츠-seo/
홈페이지(웹사이트) 기획자가 꼭 알아야 할 콘텐츠 seo 방법은?
웹사이트 콘텐츠 기획자 seo 프로세스 키워드전략,콘텐츠랭킹순위,콘텐츠작성 시 메타제목,메타설명,H1,H2,이미지alt,url구조,캐노니컬url
www.next-t.co.kr
가장 쉽게 양을 조절할 수 있는 방법은 실제 구글에서 검색을 해보고 그 결과 화면을 통해 글자 수를 결정하는 것이 좋다.
아래의 네이버를 검색한 결과를 보자
네이버의 메인페이지는 다음과 같이 정리가 되어있는데,
다른곳에 비해서 상당히 간결하게 작성된 것을 볼 수 있다.
사이트 <title>태그 | NAVER |
meta title | 네이버 - NAVER |
meta description | 네이버 모바일 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요. |
네이버(주) Corporation 페이지의 경우 약 두문장 정도가 노출이 되는데, 온전히 노출되기 전에 잘리는 부분을 확인 할 수 있는데, 말줄임 표시를 제외하고 공백문자 포함하여 약 104자 정도 노출된다는걸 알 수 있다.
네이버의 경우 오른쪽에 브랜드 카드가 나오는 특수한 경우라는 점은 감안할 필요가 있다.
구글만을 단독으로 목표로 하는 회사라면 이런 길이를 따라 작성하는것이 좋지만,
네이버 검색 최적화 까지 함께 노리는 경우라면 반드시 아래의 내용을 참고해야한다.
기준2. 구글의 기준이 아니라 네이버의 기준을 따라야 한다?
네이버는 웹사이트 SEO 처리를 위해 웹마스터에 도메인을 등록하는 과정을 보통 거치게 된다.
웹마스터에 등록하고 일정 시간이 지나면 사이트 최적화 결과에 대해 리포트를 제공하게 되는데,
이 경우 구글만 생각하고 description 을 160자에 맞춰 작성하게 되면 길이가 너무 길다며 내용을 줄이라는 경고를 받게된다.
네이버 웹마스터도구에서 제안하는 메타태그 길이
meta title | 40자 이내 |
meta description | 80자 이내 |
네이버 웹마스터 도구상에서는 결과상에서 고객에게 보여줄 수 있는 최상의 길이로 적용하기 위함이라고 하지만, 아마 개편전의 UI를 기준으로 했기 때문인지 상당히 짧은 것을 볼 수 있다.
실제 결과를 보고 더 길게 작성할수도 있겠지만, 트래픽이 활발하지 않고 이제 막 사이트를 오픈하는 입장에서는
네이버 웹마스터도구의 빨간딱지를 무시하기란 쉽지가 않다.
네이버 메타태그 가이드
https://searchadvisor.naver.com/guide/markup-content
콘텐츠 마크업
페이지 제목 HTML 문서의 <head> 태그내에 있는 <title> 태그를 활용합니다 페이지 제목 ◆ 페이지 제목 작성 TIP! 사이트 메인 페이지의 title 태그는 사이트의 성격을 잘 표현할 수 있는 브랜드명으로
searchadvisor.naver.com
결론
구글과 네이버에 메타태그 추천길이라는 것이 암묵적으로 존재하긴 하지만, 실제로 길이를 굉장히 길게 하거나 짧게 한다고 해서 검색 노출이 되지 않는 것은 아니다. 다만 description의 경우 지나치게 짧을 경우 사이트 내부 텍스트가 붙어서 나와 검색 결과에 원치않는 내용이 들어가는 경우가 발생 할 수는 있다.😅
검색 포털의 입장에서 생각해보자면, 결국 사용자가 찾고자 하는 내용이 잘보이게 표현한 메타태그를 보여주고 싶을 수 밖에 없다.
1. 과도하게 길지 않으면서 한눈에 그 페이지의 주제를 알 수 있어야 하며,
2. pc, 모바일 모든 디바이스로 봤을때도 적당한 길이감을 가진 문구면 적절할 것이다.
실제 검색결과를 조사해 가면서 실험하고 싶지 않다면 안전하게 네이버 웹마스터도구의 기준을 따르는 것을 추천한다👍
FE 해결 완료된 이슈
모바일 웹에서 주소창 높이 만큼 화면이 가려지는 이슈
작업환경 Vue3 / Vite 사용언어 JS, CSS 브라우저 Safari, iOS 이슈상황 모바일 화면의 높이를 디바이스 화면크기와 동일하게 적용하는 과정에서 브라우저의 주소창 높이만큼 화면이 가려지는 이슈 일
developer-b.co.kr
'SEO' 카테고리의 다른 글
작은 브랜드는 '유기적 트래픽(Organic Traffic)'을 잡아야 하는 이유 (0) | 2024.07.20 |
---|---|
스키마 마크업(Schema Markup)이란? (정의 / 적용 방법 / 예시) (0) | 2024.07.16 |