SEO 레이어를 얹다

구조화 데이터 (JSON-LD)

검색엔진에게 "이 페이지가 무엇인지"를 기계가 읽을 수 있는 형태로 알려주는 작업입니다. 페이지에 <script type="application/ld+json">을 넣습니다.

여기서 나중에 문제가 되는 실수를 하나 했습니다. FAQ를 JSON-LD에만 넣고 화면에는 출력하지 않았습니다.

구글 가이드라인은 구조화 데이터가 페이지에 실제로 보이는 내용을 나타내야 한다고 명시합니다. 즉 이 상태는 가이드라인 위반이었습니다. 그리고 동시에, 힘들여 쓴 질문 94개가 아무도 못 보는 곳에 들어 있었던 셈입니다. 이건 한참 뒤에야 고쳤습니다.

폰트

한글 웹폰트는 무겁습니다. 글자 수가 많아서 전체 파일이 수 MB씩 나갑니다.

Pretendard를 쓰되 이렇게 줄였습니다.

• 서브셋 — 실제로 쓰는 글자만 추린 woff2
• 두 굵기만 — 400(본문)과 700(제목). 300이나 500은 안 씁니다
• 합쳐서 532KB, 자체 호스팅

그리고 CSS에서 local()을 먼저 둡니다. 방문자 컴퓨터에 Pretendard가 이미 깔려 있으면 다운로드를 아예 안 합니다.

src: local('Pretendard'), url('...woff2') format('woff2');

본문에 쓰는 두 파일은 <link rel="preload">로 먼저 받게 했습니다. 이걸 안 하면 CSS를 다 읽은 다음에야 폰트를 받기 시작해서, 글자가 잠깐 기본 폰트로 보였다가 바뀝니다.

OG 이미지 — 서버에 한글 폰트가 없다

카카오톡이나 슬랙에 링크를 붙이면 뜨는 미리보기 이미지입니다. 1200×630 PNG를 페이지마다 만들어야 합니다.

PHP의 GD 라이브러리로 서버에서 생성하려고 했는데 막혔습니다. 서버에 한글 폰트가 없습니다. 글자가 전부 네모로 나옵니다.

폰트를 서버에 설치할 수도 있었지만, RAM 960MB 서버에 이미지 생성 작업을 시키고 싶지 않았습니다. 그래서 이렇게 했습니다.

로컬 윈도우에서 PHP GD + 맑은고딕
      ↓
1200×630 PNG 30장 일괄 생성
      ↓
FileZilla로 업로드

make-og.php 하나를 로컬에서 실행하면 config에 등록된 페이지 전부의 이미지가 한 번에 만들어집니다. 페이지를 추가하면 다시 한 번 돌려서 올리면 됩니다.

서버는 그냥 만들어진 PNG를 정적 파일로 내보내기만 합니다. 부하가 0입니다.

등록

• Google Search Console — 메타 태그 방식으로 소유권 확인
• 네이버 서치어드바이저 — HTML 파일 업로드 방식

둘 다 등록하고 사이트맵을 제출했습니다. 이때부터 검색 데이터가 쌓이기 시작하는데, 이 데이터가 나중에 방향을 완전히 바꿔놓습니다.

정리

이 단계 작업은 전부 즉시 효과가 안 보입니다. 구조화 데이터를 넣어도 순위가 바로 오르지 않고, 폰트를 줄여도 방문자가 없으면 아무 차이가 없습니다.

그래서 이때 저는 "SEO 작업을 했다"는 만족감만 얻고 정작 중요한 걸 놓치고 있었습니다. 구조화 데이터를 여섯 종류나 넣으면서, 정작 그 내용이 화면에 보이는지는 확인하지 않았습니다.

기술적으로 완성도를 높이는 일과 사람이 읽을 것을 만드는 일은 다른 작업입니다. 이걸 구분하는 데 두 달이 걸렸습니다.