한국어 제목·설명 길이는 글자 수로 재면 안 됩니다

검색 결과의 제목과 설명은 글자 수가 아니라 렌더링 폭에서 잘립니다. 한글은 라틴 문자의 약 두 배 폭이라, 같은 글자 수라도 한국어 제목이 먼저 잘립니다.

30자짜리 영문 제목과 30자짜리 한글 제목은 화면에서 두 배 차이가 납니다. 글자 수로 관리하면 한쪽은 남고 한쪽은 잘립니다.

기준값

폭 단위로 재고, 라틴 문자를 1, 한글·한자·가나·전각 기호를 2로 셉니다.

	최소	최대
제목	15	65
설명	70	180

한글로만 쓰면 제목은 32자 남짓, 설명은 90자 남짓이 상한입니다. 영문이면 각각 65자와 180자고요.

재는 방법

function displayWidth(text) {
  let width = 0
  for (const char of text) {
    width += /[぀-ヿ㐀-䶿一-鿿가-힯！-｠]/.test(char)
      ? 2
      : 1
  }
  return width
}

정규식이 잡는 범위는 순서대로 가나, CJK 확장 A, CJK 통합 한자, 한글 음절, 전각 기호입니다.

접미사를 빼고 재지 마십시오

여기서 한 번 틀렸습니다.

사이트 제목 템플릿이 %s — Shaile 처럼 붙는다면 실제로 검색 결과에 나가는 것은 접미사까지 포함한 길이입니다. 접미사가 9 폭이면 본문 제목은 56 이하여야 합니다.

접미사를 빼고 재서 “전부 통과”라고 판단했다가, 다시 재니 영문 제목 다섯이 상한을 넘고 있었습니다.

제목 안에 사이트 이름을 넣어 두고 템플릿이 또 붙이면 이렇게 됩니다.

만든 것 — Shaile 이 짓고 운영하는 도구와 제품 — Shaile

제목을 쓸 때 사이트 이름을 넣고 싶어지는데, 템플릿이 이미 하고 있는 일입니다.

화면 제목과 검색 제목은 다른 물건입니다

이게 이 문서의 핵심입니다.

화면에 보이는 제목은 짧을수록 좋습니다. 회사, 웹, 앱 같은 것이요. 그런데 검색 결과에 웹 만 뜨면 아무도 누르지 않습니다.

둘을 같은 값으로 묶지 마십시오. 콘텐츠에 title 과 별개로 metaTitle 을 두고, 메타데이터를 만들 때 있으면 그것을 씁니다.

title: item.metaTitle?.[locale] ?? item.title[locale],
description: item.metaDescription?.[locale] ?? item.excerpt[locale],

검색을 위해 화면 제목을 늘리지 않습니다. 반대 방향입니다.

생성형 검색에서는 어떻게 다른가

사람이 읽는 검색 결과에서는 잘림이 문제지만, 문서를 읽어 답을 만드는 쪽에서는 잘림보다 문장의 자립성이 중요합니다.

	사람이 읽는 검색	문서를 읽어 답하는 쪽
제목	폭 안에서 잘리지 않을 것	무엇에 대한 글인지 문장만으로 알 것
설명	클릭할 이유를 줄 것	본문의 결론을 요약할 것
형태	매력적일 것	인용해도 말이 될 것

같은 제한 안에서 둘 다 만족시킬 수 있습니다. 한국어 제목·설명 길이는 글자 수로 재면 안 됩니다 는 폭 60 이면서, 그 문장만 떼어 놓아도 무슨 주장인지 알 수 있습니다.

자동으로 지키기

사람이 매번 세지 않게 하려면 두 군데에 넣습니다.

콘텐츠를 고칠 때 — 제목을 바꾸는 스크립트나 검사에서 폭을 재고 범위를 벗어나면 알립니다.
배포 검증에서 — 전체 페이지를 훑어 <title> 과 description 의 폭을 재면, 새로 만든 화면이 조용히 기준을 벗어나는 것을 잡습니다.

이 사이트에서는 85쪽을 훑는 검사로 잡았고, 처음 돌렸을 때 제목 폭 위반이 다섯 건 나왔습니다.