소개
tistory 블로그를 운영하다가 aws lightsail 로 사이트 구축 후 마이그레이션을 한지 한달 정도 된듯합니다. 구글 검색에서도 지속적으로 노출될 수 있도록 인덱싱도 하고 있는데요.
구글에서 내가 발행한 컨텐츠에 대해 검색이 제대로 되고 있는지 확인 중 이상한 점을 발견하였습니다.
사이트의 favicon 을 설정하여 사이트 접속시에는 favicon 이 잘 나왔으나, 구글 검색 페이지 preview 에서는 사이트의 favicon icon 이 표시가 되지 않는 것을 발견하였습니다.
하여 이 문제를 해결한 방법을 간단히 공유해보려 합니다.
Google 검색 결과 내 사이트 favicon 표시 안된 문제
기존에는 사이트의 favicon link 설정 방법을 아래와 같이 하였었습니다.
favicon 파일을 업로드한 경로를 link tag 에서 href 속성으로 경로 삽입을 그대로 하였지요.
<link rel="shortcut icon" href="https://gogoyeon.com/wp-content/uploads/2024/03/yeon-favicon.ico">그 결과 사이트 접속시에는 아래와 같이 표시가 되었습니다.
하지만 그럼에도 구글 검색 결과 페이지에서 저의 사이트 아이콘이 제대로 표시가 안되고 있었습니다.
google 의 파비콘 등록 가이드에도 맞게 해보았지만 여전히 뜨질 않았어요. 구글에서 색인과정이 걸리는건가 하였지만 이상하여 추가적인 확인을 좀 해보았습니다.
구글 검색 결과 페이지에서 사이트 preview favicon 은 대부분 image 타입으로 base64 인코딩을 통해 HTML 에 이미지 정보를 직접 포함하고 있었습니다.
구글에서는 아마도 페이지 로딩시간을 줄이기 위해 이 방법을 이용하는 것 같았는데요.
그래서 바로 이 방법으로 변경을 해보았고, 그 결과 다음날 구글 서치에서 인덱싱된 후 구글 검색 결과 페이지에서도 제 사이트의 favicon 이 preview 에 제대로 나오는 것을 확인할 수 있었습니다.
Google 검색 결과 페이지 내 사이트 favicon 표시 방법 변경
위에서 언급하였듯이 이미지의 링크를 넣지 않고 image 타입으로 base64 인코딩한 값을 삽입하였습니다.
먼저 favicon 으로 표시할 이미지를 준비하고 아래 사이트에서 image 를 base64 인코딩된 값으로 변경을 합니다.
그리고 사이트의 header 에 아래의 코드로 기존의 favicon 삽입 코드를 변경해줍니다.
<link rel="icon" type="image/png" href="이전 복사한 image->base64인코딩한 코드 추가">이 후 구글에서 색인작업을 완료된 다음날, 아래와 같이 구글 검색 결과 페이지에서도 favicon 이 잘 표시가 되는 것을 확인할 수 있었습니다.
마무리
네이버나 티스토리등 다른 플랫폼을 이용하여 블로그 운영하신다면 큰 문제가 되지 않지만, 혹시나 개인 사이트를 운영하시다가 동일한 문제를 겪고 계신 분이 계신다면 이 방법으로도 한번 시도해 보시면 좋을 듯합니다.