블로그를 직접 만들며 넣은 자동 SEO 6가지

블로그를 직접 만들면서 가장 신경 쓴 건 디자인이 아니라 글을 쓰고 나서 아무것도 안 해도 검색에 잡히게 하는 것이었다. 메타 태그를 매번 손으로 채우는 블로그는 결국 안 채우게 된다. 그래서 전부 자동으로 만들게 했다.

1. 한글 슬러그를 그대로 쓴다

제목이 블로그를 열었습니다면 주소는 /p/블로그를-열었습니다가 된다. 브라우저 주소창에는 한글로 보이고, 실제 전송될 때만 퍼센트 인코딩된다.

한글 슬러그가 SEO에 불리하다는 말이 있는데, 구글과 네이버 모두 UTF-8 URL을 정상 처리한다. 오히려 한국어 검색에서는 주소에 검색어가 그대로 들어가는 게 유리하다. 영문으로 억지 음차하면(/p/beulrogeu) 아무 의미도 없는 문자열이 된다.

function slugify(s) {
  return String(s).trim().toLowerCase()
    .replace(/[<>"'`]/g, '')
    .replace(/[^\p{Script=Hangul}a-z0-9]+/gu, '-')
    .replace(/^-+|-+$/g, '')
    .slice(0, 120);
}

\p{Script=Hangul}로 한글만 남기고 나머지 구분자는 하이픈으로 바꾼다. 같은 슬러그가 이미 있으면 뒤에 숫자를 붙인다.

2. 메타 설명을 본문에서 뽑는다

요약을 비워두면 본문 앞부분에서 155자를 잘라 쓴다. 그냥 자르면 단어 중간에서 끊기니까 문장 끝을 찾아서 자른다. 한국어는 마침표 앞이 다. 요.로 끝나는 경우가 많아서 그 지점을 같이 본다.

function autoSummary(html, limit = 155) {
  const t = toText(html);
  if (t.length <= limit) return t;
  const cut = t.slice(0, limit);
  const stop = Math.max(
    cut.lastIndexOf('. '), cut.lastIndexOf('다. '), cut.lastIndexOf('요. ')
  );
  return (stop > 60 ? cut.slice(0, stop + 1) : cut.replace(/\s\S*$/, '')) + '…';
}

HTML 태그를 걷어낼 때 </p>나 <br>을 공백으로 바꿔주지 않으면 단어가 서로 붙어버린다. 이것 때문에 요약이 이상하게 나오는 걸 한참 못 찾았다.

3. 구조화 데이터를 글마다 자동으로 넣는다

검색 결과에 날짜와 작성자가 붙으려면 BlogPosting 스키마가 필요하다. 구글은 Article 구조화 데이터 문서에서 권장 항목을 정리해두었다. 글을 저장할 때 값이 이미 다 있으니, 렌더링할 때 조립만 하면 된다.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.title,
  "description": post.summary,
  "datePublished": iso(post.published_at),
  "dateModified": iso(post.updated_at),
  "author": { "@type": "Person", "name": "한준후" },
  "wordCount": post.word_count,
  "keywords": tags.join(', '),
  "inLanguage": "ko-KR"
}

같은 데이터로 og: 태그와 트위터 카드도 함께 찍는다. 커버 이미지가 없으면 기본 이미지로 대체해서, 링크를 공유했을 때 빈 미리보기가 나오지 않게 했다.

4. 소제목에 앵커를 붙이고 목차를 만든다

에디터에서는 그냥 <h2>만 나온다. 저장할 때 서버가 id를 붙인다.

<h2 id="한글-슬러그를-그대로-쓴다">한글 슬러그를 그대로 쓴다</h2>

같은 제목이 두 번 나오면 뒤에 번호를 붙여 중복을 막는다. 이 id를 모아서 소제목이 3개 이상일 때만 목차를 자동으로 그린다. 짧은 글에 목차가 붙으면 오히려 방해된다.

5. sitemap과 RSS를 DB에서 바로 만든다

파일로 저장하지 않는다. 요청이 올 때 발행된 글을 조회해서 XML을 만들어 응답한다. 글을 발행하는 순간 사이트맵이 갱신되고, 따로 빌드할 게 없다.

태그 아카이브 주소도 사이트맵에 같이 넣는다. 글이 몇 편 없을 때는 태그 페이지가 색인에 잡히는 게 더 도움이 된다.

6. 초안은 검색에 절대 안 나가게 한다

이게 제일 중요하다. 초안 상태의 글은 세 겹으로 막았다.

• 목록·사이트맵·RSS 쿼리에서 status='published' 조건으로 제외
• 주소를 직접 입력해도 로그인하지 않았으면 404를 반환
• 혹시 로그인 상태로 보더라도 <meta name="robots" content="noindex, nofollow">를 출력

한 겹만 막아두면 언젠가 새어 나간다. 검색엔진에 한 번 색인되면 지우는 게 훨씬 번거롭다.

쓰는 사람이 보는 화면

에디터 오른쪽에 점검 항목을 띄운다. 제목 길이, 요약 길이, 본문 분량, 소제목 개수, 이미지 대체텍스트 누락, 외부 링크, 커버 이미지, 태그 — 여덟 가지를 검사하고 통과 비율을 점수로 보여준다.

자동화의 목적은 완벽한 SEO가 아니라, 아무 생각 없이 저장해도 기본은 지켜지는 상태를 만드는 것이다.

나머지는 결국 글의 내용이다. 도구가 해줄 수 있는 건 여기까지고, 이 정도면 충분하다.