티스토리 블로그 웹페이지의 html error(오류) 때문에 구글, 네이버 등 검색엔진의 색인 생성이 잘 안됐던 경험을 공유하고 해결책을 모색한다.
Nu Html Checker
구글, 네이버 등의 검색엔진에서 내 사이트의 색인이 생성되지 않는 이유는 여러 가지가 있는데, 그중 한 가지는 html error 이다. error 는 우리 말로 오류 정도로 번역할 수 있다. 검색엔진은 html 오류에 예민한 것 같다.
티스토리에서 워드프레스로 이사하던 중에 우연히 아래의 사이트를 알게 되었다:
https://validator.w3.org/nu/
이곳에 웹페이지 주소나 html 소스를 넣으면 html 문법상의 문제점을 알려준다. 검사 방법은 다음과 같다:
- Check by address 아래에 웹페이지 주소를 넣는다. 그 아래의 Check 단추를 누른다. 그러면 그 아래에 결과가 행 순서대로 출력된다.
- Message Filtering 을 눌러본다. 크게 세 가지 분류로 나뉜다. 즉, Errors, Warnings, Info messages 이다. Message Filtering 을 또 누르면 원래의 상세 내용을 다시 보여준다.
- Check by text input: 공개적으로 접근할 수 없는 페이지는 소스를 직접 붙여 넣어서 검사받을 수 있다.
소제목 서식에서 html error 발생
이사를 하면서, 평소에 대충 보던 구글 서치콘솔과 네이버 서치어드바이저를 자세히 살펴보았다. 그런데 내 기대와는 달리 색인 생성 성적이 형편없었다. 그 원인을 분석하던 중에 글마다 한 가지 공통적인 문제를 발견하였는데 내가 사용한 소제목 서식이었다. 문제없는 원래의 서식은 다음과 같다:
<h2 style="box-sizing: border-box; border-right-width: 0px; border-bottom: #000000 2px solid; margin: 5px 0px; border-left: #000000 10px solid; letter-spacing: 1px; line-height: 1.5; border-top-width: 0px; padding: 3px 5px 3px 5px;" data-ke-size="size26">소제목</h2>내가 가지고 있는 서식 원본 텍스트 파일에는 위의 내용과 같이 문제가 없었는데 이걸 서식 작성기에 붙여 넣고 저장했을 때 중간에 있던 세미콜론(;) 하나가 달아나 버린 것을 확인했다. 자세히 보니 행이 강제로 꺾어지는 곳에 있던 세미콜론이 없어졌다. 그런데 재현해 보려고 하였지만 그건 또 잘 안된다. 귀신이 곡할 노릇이다. 아무튼 서식 작성기를 너무 믿으면 안 되겠다.
html error 에 대한 웹브라우저와 검색 엔진의 태도는 좀 다른가 보다. 웹브라우저는 아주 큰 문제가 아니면 별문제 없는 듯이 적당히 처리해서 잘 보여주기도 하는데, 검색엔진은 더 깐깐하게 굴고 심지어 색인 생성을 안 해주기도 한다.
지금 워드프레스에서 블록으로 바꾸니까 옛날 소제목 서식이 단순하게 바뀌어서 문제가 저절로 해결되었다.
서치어드바이저는 내 몇몇 티스토리 글에 h1 태그가 두 개라서 색인 생성이 안 됐다고 지적하였다. 이 문제도 워드프레스로 옮기고 나니까 저절로 해결되었다.
스킨(테마)에서 html error 발생
앞서 말한 소제목은 글 내용에 들어있는 것이다. 그런데 다른 여러 공통적인 오류는 글 내용과는 상관없는 것들이었다. 스킨(테마) 또는 시스템 자체의 문제일 가능성이 있다 (티스토리에서는 스킨, 워드프레스에서는 테마). 스킨과 시스템의 문제점을 알기 위해서는 글 내용과 상관없는 페이지를 검사하면 되겠다. 바로 블로그 대문이다. 대문에는 일부 글의 제목과 시작 부분 내용 약간만 나올 뿐이다.
현재 내 티스토리 블로그에는 공지성 글 2개가 공개 상태이고 그 나머지 모든 글은 비공개 상태이다. 오늘 Nu Html Checker 에 내 티스토리 블로그 대문 주소를 넣어서 검사해 보니 다음의 결과가 나왔다 (오디세이 스킨으로 설정되어 있다):
Errors (15)
Warnings (20)
Info messages (44)이 중에서 Info message 는 정보 메시지라고 해석되는데 별문제는 아니다. Warning 은 경고로 해석되고 그리 심각한 건 아니라고 생각된다. 그러나 Error(오류)는 해결해야 할 문제라고 볼 수 있겠다.
내 블로그뿐만 아니라 다른 분들 블로그도 개수의 차이가 좀 있을 뿐 오류가 다 나오더라. 이래 가지고는 글 내용에 비해 사이트의 품질 평가가 박할 수밖에 없을 것이다.
스킨(테마)를 바꿔보자.
글 내용상의 문제이면 내가 그냥 고치겠는데 스킨(테마) 문제는 얘기가 좀 다른 것 같다. 스킨(테마)는 나중에 업데이트할 수도 있는 건데 그때마다 고쳐야 한다면 귀찮겠다. 제일 좋은 방법은 오류가 없는 스킨(테마)를 사용하면 되겠다.
나는 어차피 워드프레스를 계속 사용해야 하니까 여기서 검사해 보았다. 워드프레스에서도 오류가 나왔다. 그래서 테마를 바꿔가면서 계속 검사했다. 그런데 사실 typography 기능이 있는 테마만 검사하였다. 아무튼 테마에 따라 오류의 개수가 천차만별이었다. 그러다가 GeneratePress 테마에 오류가 없음을 확인했다. error 와 warning 은 하나도 없고 정보 메시지만 있다.
Info messages (27) · Hide all info messages · Show all info messages
Trailing slash on void elements has no effect and interacts badly with unquoted attribute values. (27)‘void 요소의 후행 슬래시는 아무런 효과가 없으며 따옴표가 없는 속성 값과 잘못 상호 작용합니다.’라는 정보 메시지이다. 실제로는
<meta name="robots" content="index, follow"/>와 같이 속성 값이 큰따옴표에 둘러싸여 있어서 괜찮다.
GeneratePress 테마를 사용하면서 html error 가 해결되어서인지 지금 워드프레스에서는 검색엔진 색인 생성이 잘 되고 있다. 글 하나가 티스토리 글의 중복 페이지로 낙인찍혀서 색인 생성이 안 되다가 티스토리 글의 색인을 삭제하여 지금은 잘 해결되었다.
티스토리에도 스킨이 여럿 있으니까 바꿔가면서 html error 를 검사해 보면 좋겠다. 그렇게 해서 개중에 오류가 적게 나오는 스킨을 고른 다음에, 최종적으로 스킨 자체의 소스를 수정하는 방법을 고려해 볼 수 있겠다.