[웹 퍼블리싱 13] HTML - 시맨틱과 SEO의 관계 - TheNullPage(널페이지)

지난 편에서 문서가 소셜에 어떻게 공유되는지를 다뤘습니다. 이번에는 검색엔진이 우리 문서를 어떻게 이해하는지, 그리고 우리가 쓰는 의미 있는 태그가 검색 결과에 어떤 영향을 주는지를 살펴봅니다. 아무리 좋은 내용을 써도 검색엔진이 그 구조를 이해하지 못하면 제대로 평가받지 못합니다. 반대로 문서의 구조를 명확히 밝히면 검색엔진이 내용을 더 정확히 파악하고 알맞은 사용자에게 보여 줍니다.

제가 초보 시절에는 검색 최적화가 무슨 마법 같은 비법의 집합인 줄 알았습니다. 그러다 알게 된 사실은, 검색 최적화의 상당 부분이 결국 문서를 사람과 기계 모두에게 명확하게 만드는 정직한 작업이라는 것이었습니다. 의미 있는 태그로 구조를 잘 짜는 것이 곧 검색에도 유리한 것이죠. 이번 편에서 그 연결 고리를 하나씩 풀어 보겠습니다.

1. 검색엔진이 읽는 구조

검색엔진은 우리 페이지를 방문해 그 내용을 읽고, 무엇에 관한 문서인지 파악합니다. 이때 검색엔진은 사람처럼 화면을 눈으로 보는 것이 아니라, 문서의 구조를 이루는 태그들을 통해 내용을 이해합니다. 그래서 태그를 의미에 맞게 쓰면 검색엔진이 구조를 정확히 읽고, 아무 의미 없는 상자만 잔뜩 쓰면 검색엔진이 구조를 파악하기 어려워집니다.

예를 들어 문서의 주요 콘텐츠 영역, 머리말 영역, 탐색 메뉴 영역, 그리고 곁가지 영역을 각각 의미 있는 태그로 구분하면, 검색엔진은 어디가 본문이고 어디가 부수적인 부분인지 압니다. 그러면 본문의 내용에 더 무게를 두고 평가할 수 있습니다. 이 구분이 없으면 검색엔진은 광고와 본문을 동등하게 취급할 수도 있습니다.

여기서 중요한 원칙은, 검색엔진을 위해 따로 무언가를 꾸미기보다 문서를 정직하고 명확하게 만드는 것이 검색에도 최선이라는 점입니다. 사람에게 읽기 좋은 잘 구조화된 문서가 곧 검색엔진에게도 이해하기 좋은 문서입니다. 사람과 기계를 위한 최적화가 다르지 않은 것이죠.

반대로 검색엔진만을 속이려는 시도는 대개 역효과를 냅니다. 사용자에게는 보이지 않게 검색용 문구를 잔뜩 숨겨 넣는다든가, 내용과 무관한 인기 검색어를 억지로 채워 넣는 식의 편법은 검색엔진이 이미 잘 잡아냅니다. 이런 편법은 발각되면 오히려 순위가 크게 떨어집니다.

제가 여러 페이지를 다루며 확인한 것은, 구조를 정직하게 잘 짠 페이지가 시간이 지날수록 검색에서 안정적으로 좋은 위치를 얻는다는 사실입니다. 잔재주로 반짝 오른 페이지는 오래가지 못했습니다. 결국 검색 최적화의 토대는 좋은 구조와 좋은 내용이라는 정공법이었습니다.

정리하면 검색엔진은 태그로 이루어진 구조를 통해 문서를 이해합니다. 의미 있는 태그로 구조를 명확히 하는 것이 사람에게도 기계에게도 좋고, 편법은 결국 손해입니다. 이 전제 위에서 구체적인 요소들을 살펴보겠습니다.

2. 제목 계층의 힘

문서에서 검색엔진이 특히 주목하는 것이 제목의 계층입니다. 문서에는 가장 큰 제목부터 작은 소제목까지 여러 단계의 제목이 있는데, 이 단계를 순서대로 잘 쓰면 검색엔진은 문서의 목차를 파악하듯 내용의 뼈대를 이해합니다. 어떤 주제 아래 어떤 세부 주제가 있는지를 제목 계층으로 읽는 것이죠.

제목을 쓸 때 지켜야 할 규칙은 단계를 건너뛰지 않는 것입니다. 가장 큰 제목 다음에 바로 세 번째 단계 제목으로 뛰어넘으면 계층이 어긋나 검색엔진과 화면 낭독 프로그램이 구조를 오해합니다. 큰 제목에서 한 단계씩 차례로 내려가야 목차가 논리적으로 이어집니다. 저는 이 순서를 어기지 않으려 늘 주의합니다.

여기서 흔한 실수가 있습니다. 제목을 크게 보이게 하려고 실제로는 소제목인데 가장 큰 제목 태그를 쓰거나, 반대로 진짜 제목인데 그냥 굵은 글씨로만 처리하는 것입니다. 제목의 단계는 크기가 아니라 의미로 정해야 합니다. 크기 조절은 다른 방법으로 하고, 제목 태그는 그 내용의 중요도와 위치에 맞게 써야 합니다.

문서에서 가장 큰 제목은 그 페이지의 주제를 대표합니다. 이 최상위 제목은 페이지의 핵심을 한 줄로 담아야 하고, 검색엔진은 이것을 문서 주제 판단에 비중 있게 활용합니다. 그래서 저는 이 최상위 제목에 그 페이지가 무엇에 관한 것인지를 명확한 말로 담으려 신경 씁니다.

제목 계층을 잘 짜면 부수적인 이점도 따라옵니다. 잘 나뉜 제목들은 화면 낭독 프로그램 사용자가 제목만 훑으며 원하는 부분으로 건너뛰는 탐색을 가능하게 합니다. 또 잘 구조화된 제목은 검색 결과에서 문서 안의 특정 섹션으로 바로 연결되는 형태로 노출되기도 합니다. 좋은 제목 구조는 여러모로 이롭습니다.

아래는 제목 계층을 순서대로 쓴 예시입니다. 단계를 건너뛰지 않는 흐름을 보세요.

3. 대표 주소로 중복 정리하기

검색 최적화에서 자주 발목을 잡는 문제가 중복 주소입니다. 같은 내용의 페이지가 여러 다른 주소로 접근될 수 있는 경우가 흔합니다. 주소 뒤에 붙는 여러 매개변수, 대문자와 소문자 차이, 끝의 빗금 유무 같은 것들 때문에 하나의 내용이 여러 주소를 갖게 되는 것이죠. 검색엔진은 이들을 서로 다른 페이지로 오해할 수 있습니다.

이것이 왜 문제일까요. 검색엔진이 같은 내용을 여러 페이지로 보면, 그 페이지들의 평가가 분산됩니다. 원래 한 페이지가 받아야 할 신뢰가 여러 주소로 흩어져, 어느 것도 충분한 힘을 얻지 못하는 것이죠. 게다가 검색엔진이 어느 주소를 대표로 보여 줄지 헷갈려, 우리가 원하지 않는 주소가 검색 결과에 뜨기도 합니다.

이 문제를 푸는 방법이 대표 주소를 지정하는 것입니다. 여러 주소로 접근되는 같은 내용의 페이지에서, 이것이 진짜 대표 주소라고 검색엔진에게 알려 주는 표시를 두는 것입니다. 그러면 검색엔진은 나머지 주소들을 이 대표 주소의 사본으로 이해하고, 평가를 대표 주소로 모아 줍니다.

대표 주소를 지정할 때 지켜야 할 원칙이 있습니다. 대표 주소는 온전한 전체 주소로 적고, 실제로 접근 가능한 정상 페이지를 가리켜야 합니다. 또 대표 주소와 뒤에서 다룰 다른 정보들이 같은 주소를 일관되게 가리켜야 혼선이 없습니다. 이 일관성이 깨지면 검색엔진이 오히려 더 헷갈립니다.

제가 실무에서 겪은 일로, 매개변수가 다양하게 붙는 페이지들이 검색에서 서로 경쟁하며 순위가 낮게 머문 적이 있습니다. 대표 주소를 지정해 하나로 모으자 평가가 집중되어 순위가 올랐습니다. 중복 주소를 방치하면 알게 모르게 손해를 보고 있는 셈이었습니다.

아래는 대표 주소를 지정한 예시입니다. 전체 주소로 대표를 가리키는 것을 보세요.

<link rel="canonical" href="https://example.com/post/123">

4. 구조화 데이터로 뜻 전하기

검색엔진에게 문서의 뜻을 더 또렷이 전하는 방법이 있습니다. 구조화 데이터라고 부르는, 이 페이지가 무엇에 관한 것인지를 기계가 이해하는 형식으로 명시하는 것입니다. 예를 들어 이 페이지가 글이라면 제목은 무엇이고, 언제 발행되었으며, 누가 썼는지를 정해진 형식으로 적어 두면, 검색엔진이 이 정보를 정확히 가져갑니다.

이 구조화 데이터의 이점은 검색 결과가 더 풍부해진다는 것입니다. 일반적인 제목과 요약만 뜨는 대신, 별점이나 발행일, 작성자 같은 부가 정보가 함께 표시되어 눈에 더 잘 띕니다. 이렇게 눈에 띄는 결과는 사용자의 클릭을 더 많이 부릅니다. 같은 순위라도 풍부하게 표시되면 유리한 것이죠.

구조화 데이터를 적는 방식은 여러 가지가 있었지만, 오늘날 검색엔진이 권장하는 방식은 문서 본문과 분리된 별도의 정보 덩어리로 적는 것입니다. 본문 태그 사이사이에 정보를 흩뿌리는 대신, 한곳에 모아 두는 이 방식이 관리하기도 쉽고 검색엔진도 선호합니다. 저는 이 권장 방식만 씁니다.

구조화 데이터에서 반드시 지켜야 할 원칙은, 적어 둔 정보가 실제 페이지에 보이는 내용과 일치해야 한다는 것입니다. 화면에는 없는 별점을 구조화 데이터에만 적거나, 실제와 다른 발행일을 적으면 검색엔진이 이를 조작으로 간주해 불이익을 줍니다. 구조화 데이터는 페이지 내용을 기계용으로 다시 적은 것일 뿐, 새로운 사실을 지어내는 곳이 아닙니다.

구조화 데이터를 심은 뒤에는 검증 도구로 확인하는 것이 좋습니다. 검색엔진이 제공하는 검사 도구에 페이지를 넣으면, 구조화 데이터가 형식에 맞는지, 어떻게 표시될지를 미리 보여 줍니다. 형식이 조금만 어긋나도 부가 정보가 표시되지 않으므로, 이 확인 단계가 중요합니다. 저는 심을 때마다 반드시 검증합니다.

아래는 글의 구조화 데이터를 별도 덩어리로 적은 예시입니다. 제목과 발행일이 명시된 것을 보세요.

5. 일치와 정직이라는 토대

지금까지 다룬 것들을 관통하는 하나의 원칙이 있습니다. 검색엔진에게 알리는 정보와 사용자가 실제로 보는 내용이 일치해야 한다는 것입니다. 제목 태그가 말하는 주제, 요약이 약속하는 내용, 구조화 데이터가 적은 사실이 모두 페이지의 실제 모습과 같아야 합니다. 이 일치가 검색 최적화의 흔들리지 않는 토대입니다.

이 원칙을 지키면 좋은 점은, 검색엔진의 알고리즘이 어떻게 바뀌든 크게 흔들리지 않는다는 것입니다. 검색엔진은 끊임없이 편법을 걸러내는 방향으로 진화하는데, 정직하게 만든 페이지는 그 진화에 영향을 받지 않습니다. 오히려 편법이 걸러질수록 정직한 페이지의 상대적 위치가 올라갑니다.

반면 일치를 깨는 편법은 언젠가 대가를 치릅니다. 클릭을 노리고 내용과 다른 제목을 달거나, 검색용 문구를 숨기거나, 구조화 데이터에 거짓을 적는 것은 단기적으로 효과가 있어 보여도 결국 발각됩니다. 그때 받는 불이익은 그동안 얻은 것을 훨씬 웃돕니다. 저는 이런 유혹을 늘 경계합니다.

검색 최적화를 정직의 관점으로 보면 할 일이 명확해집니다. 좋은 내용을 쓰고, 그 내용을 명확한 구조로 담고, 그 구조를 검색엔진이 이해하도록 표준 방식으로 알리고, 알린 것과 실제가 일치하도록 유지하는 것입니다. 이 네 가지를 성실히 하면 나머지는 대개 따라옵니다.

제가 오랜 경험 끝에 얻은 결론은, 검색 최적화의 왕도가 사용자를 위한 좋은 페이지를 만드는 것이라는 평범한 진리였습니다. 검색엔진은 결국 사용자에게 좋은 페이지를 보여 주려 애쓰는 존재이므로, 사용자를 위하는 것이 곧 검색엔진을 위하는 것입니다. 이 방향만 잃지 않으면 됩니다.

이번 편에서는 검색엔진이 읽는 구조, 제목 계층, 대표 주소, 구조화 데이터, 그리고 일치와 정직의 토대를 살펴봤습니다. 다음 편에서는 모두가 웹을 쓸 수 있게 만드는 접근성으로 넘어가겠습니다. 검색엔진에게 문서를 잘 전하는 법을 익혔으니, 이제 모든 사용자에게 문서를 열어 주는 법을 배울 차례입니다.