이유는 모르지만 특정 검색엔진이 파비콘으로 문제를 제기하는 경우가 있다.
사실 지금까지 파비콘은 그냥 루트에 아이콘 파일 하나만 있으면 브라우저에서 잘 보이는 것으로 생각하고 있었다.
그런데 검색엔진이 문제 삼은 내용을 파고 들어가니 파비콘 하나에 엄청난 철학이 담겨 있는 것을 보게 된다.
Favicon 검사
블로그의 Favicon 이 정상인지를 확인하기 위해서 아래와 같은 체커 사이트를 활용할 수 있다.
https://realfavicongenerator.net/
해당 사이트는 Checker 기능과 Generator 기능을 모두 제공하기 때문에 부담없이 링크를 넣어서 현황을 파악하였다.
Gatsby 의 아이콘은 gatsby-plugin-manifest 을 통해 원본 아이콘 파일 하나만 넣으면 자동으로 작업을 진행한다.
그러나 이 자동화 작업은 특정 검색 엔진과 파비콘 검사 사이트에서 부족한 부분들이 나온다.
사실, 검색 색인이 아주 문제가 생기는 내용은 아니지만 왠지 검색엔진 점수가 떨어지는 것은 불편함을 가져온다.
Generator 를 통해 어떤 점을 개선해야하는지를 점검하였다. Checker 로 검사하니 빨간 불이 들어온다. Generator 가 해결책을 제시하니 적용한다.
Favicon Generator
일단 작업은 비교적 간단하다.
원본 파비콘 이미지를 넣으면 서비스가 자동으로 파비콘 세트를 만들어준다.
이 파일들을 static 폴더에 부어 넣으면 배포할 때에 루트 디렉토리로 전달된다.
해당 처리를 통해 파일 호스팅 준비가 되었다면 추가로 공유받은 스크립트도 설정해 보자.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" /> 위와 같이 가이드 받은 메타 태그와 링크 태그를 추가한다.
React-Helmet 모듈을 사용하면 쉽게 메타태그 설정이 가능하다.
사실 gatsby-plugin-manifest 을 통해 자동으로 파비콘 파일들이 만들어지고 링크도 자동으로 생긴다.
이걸 어떻게 코드로 잘 정리 하는지 궁금한 생각이 들었는데 살펴보니 이미지는 정적 파일이니 따로 호스팅하면 되고, 태그 관리만 잘하면 된다.
태그를 도대체 어디다 삽입해야하는지 부터 난관이다.
검색을 해보니 Gatsby 가 React-Helmet 모듈을 사용하고 있어서 왠만하면 자동으로 태그를 생성하지만 별도로 수동 추가할 수 있다.
수동 태그는 Helmet 태그에서 추가하여 사용할 수 있다.
가이드 받은 스크립트를 모두 추가하면 기존에 붉은색으로 나오던 항목들이 파란색들로 바뀌는 것을 확인할 수 있다.
파비콘이 왜 중요한가 살펴보니 여러 활용처가 있고 웹페이지의 바로가기 아이콘 이미지로도 활용하는 것을 보게 된다.
가이드대로 하니 일단 Checker 사이트는 모두 파란불이 들어온다. 파비콘이 검색 점수에 얼마나 영향을 주는지는 모르겠지만 일단 개선은 진행하였다.
검색엔진으로 부터 기분 좋은 레포팅을 받았으니 이제 열심히 글만 잘 쓰면 될 것 같다.