티스토리 구글서치콘솔 '클릭할 수 있는 요소가 서로 너무 가까움' 오류 해결법

그동안 구글서치콘솔에서 "클릭할 수 있는 요소가 서로 너무 가까움"이라는 오류 경고(레트 라이트)를 받은 것은 한참.. 한 1년 이상 된 것 같습니다. 오류가 모바일 tag 페이지에 있다는 얘기였는데.. 살펴봐도 크게 문제로 보이지 않아 그냥 무시하고 있었습니다. 그런데 최근 css 실력이 부쩍 늘었으니.. 오늘 한번 이 문제를 살펴 봤습니다.

일단 태그 페이지 테스트 해 보면 아래와 같은 메시지가 뜹니다.

line-height가 2일 때 테스트해 보면 빨간 오류메시지가 뜹니다

그런데 의외로 해법이 간단하던데요? 아래 라인을 왓에버 스킨 css 맨마지막에 추가해 주니.. tag "페이지가 모바일 친화적임"이라는 그린라이트 결과로 변했습니다.

@media screen and (max-width: 767px) { 
	.tags .items a {
		margin-left: 20px;
		line-height: 2.5;
	} 
}

클릭요소가 너무 가까움 오류 해결 화면 (line-height를 2.5로 늘림)

숫자는 적당히 조정해 주면 되는데 여기서는 line-height가 중요한 것 같습니다.

다른 스킨에서도 tag 페이지에 같은 문제가 발생한다면 적절한 class의 줄간격 조절을 통해서 해결할 수 있을 것 같습니다. 아래는 포토폴리오 스킨에서 줄간격을 margin-bottom 값으로 해결하는 코드입니다. css 맨마지막에 추가하면 됩니다. 포토폴리오 스킨 css가 왓에버보다 살짝 난잡하게 작성되어 있네요. 또 모바일 사이즈 정의가 두 스킨에서 767과 768로 살짝 다른데 별 문제는 없어 보입니다. 

@media screen and (max-width: 768px) {
	.tag_zone a{
		margin-bottom: 1.2em;
	}
}

(추가 2020/7/8) 테스트 페이지는 합격인데.. 아직도 구글에서는 같은 경고 메세지를 보내네요. 구글 쪽 오류 아닌가 해서 조금 더 기다려 보려고 합니다.

(추가 2020/7/15) 며칠 지나니 오류가 사리지네요