티스토리 블로그 네이버 검색결과에 파비콘 안나오는 현상 해결 방법
2024. 4. 18.
어느 순간부터인가 네이버에 검색결과로 가장 최상위에 나오는 결과 중에 내 블로그가 나오는 것들이 조금씩 생겼다.
원래는 3~4페이지까지 넘겨야 나오는 내 블로그가 말이다.
아무튼 결과들을 보다보니 내가 티스토리 블로그에서 저장해놓은 파비콘이 나오지 않고 엉뚱한 그림(왠지 기본 이미지인 것 같음)이 나오고 있는 것을 확인했다.
하지만 구글 검색결과에서는 파비콘을 잘 보여주고 있는걸 확인했다. 이게 무슨일이지?
그래서 좀 알아보니 티스토리에 파비콘을 등록하면 블로그 HTML에 파비콘에 대한 절대경로가 들어가지 않고 상대경로가 들어간다고 한다.
여기서 절대경로, 상대경로란?
파비콘 이미지를 티스토리에 업로드하고 블로그에 출력하기 위해서는 접근할 수 있는 주소가 필요한데, 그 주소의 종류.
- 절대경로: 내 블로그인지 아닌지, 현재 블로그 사이트 구조와 상관없이 어디서든 접근할 수 있는 주소
- 상대경로: 내 블로그안에서 현재 블로그 사이트 구조인 경우에만 접근할 수 있는 주소
나는 블로그 관리 페이지에서 파비콘만 설정하면 다 되는건줄 알았지..
그래서 검색을 하다보니 해결방법을 찾았습니다.
- 블로그 관리 페이지 > 스킨편집 > HTML 편집
- 파일업로드 탭 > 파비콘 아이콘 업로드
- HTML 탭 > 파비콘 태그 추가
티스토리에서는 파비콘을 태그로 만드는건지 javascript에서 동적으로 만드는건지는 잘 모르겠습니다. 개발자 모드를 열어서 파비콘 부분을 찾아보려고 했으나.. 보이지 않았습니다. 그래서 네이버가 수집을 못한 것도 같습니다. (구글은 어떻게 수집한거지?...)
그래서 위에 해결방법대로 진행해봅니다.
HTML 편집 페이지 접속
스킨 편집 페이지를 열어 줍니다.
파비콘 파일업로드 (생략 가능)
검색을 더 하다보니 파일업로드 하지 않고 기존 파비콘 경로를 기반으로 파비콘 태그만 추가하는 방식이 있었습니다.
태그만 추가하는 방식이 한번만 작업하면 추후에 파비콘 변경 시 관리 페이지에서 파비콘만 변경해주면 되기 때문에 해당 방식을 추천드립니다.
티스토리 블로그에서 파일업로드를 하거나 스킨을 수정하면 경고 메시지창이 나타납니다. 수정 시 주의하고 문제 발생 시 직접 수정하라는 내용입니다. 확인 눌러줍니다.
업로드가 정상적으로 되었는지 새로고침해보고 업로드한 파비콘이 잘 있는지 확인합니다.
Q. 파비콘 이미지 파일 형식은 왜 .ico를 사용하나요? .png 이미지 파일을 사용하면 안되나요?
A. 최근에는 png 파일을 파비콘으로 사용이 가능한 것 같습니다. 하지만 웹 표준이 .ico 확장자이기 때문에 다양한 브라우저들에 대한 호환성을 생각한다면 .ico 확장자를 사용하는 것을 권장드립니다.
하지만 메이저 브라우저를 제외하고 호환성보다는 높은 화질의 파비콘을 적용하시고 싶은 경우에는 png 파일을 사용하셔도 됩니다.
파비콘 파일 절대경로 확인
업로드한 파비콘 파일을 우클릭하여 링크 주소 복사를 해두고 메모장 또는 메모앱에 붙여넣기 해둡니다. 아래 파비콘 태그 추가 시 사용할 예정입니다.
예시) https://tistory1.daumcdn.net/tistory/2801367/skin/images/favicon.ico
기존 파비콘 경로 확인
기존 파비콘 경로 확인을 위해서 "블로그주소"/favicon.ico 로 접속해봅니다.
예시) https://photalk.tistory.com/favicon.ico
그러면 페이지가 자동으로 이동되면서 티스토리가 저장해둔 파비콘 경로로 이동됩니다.
예시) https://tistory1.daumcdn.net/tistory/2801367/b0040b0d74734185af719c9c6de59f60
이동된 경로는 파비콘이 변경되면 주소도 같이 변경될 수 있기 때문에 이동 전 경로를 사용하겠습니다.
(2024.04.21 수정) 이동 전 경로로 지정하면 네이버 검색결과에 여전히 안나오는 듯 해서 이동 후 경로를 사용하도록 변경했습니다.
파비콘 태그 추가
파비콘 이미지를 별도로 업로드한 경우
<!-- 파비콘 -->
<link rel="shortcut icon" href="파비콘파일경로">
<!-- 파비콘 예시 -->
<link rel="shortcut icon" href="/images/favicon.ico">
파비콘 이미지를 업로드 하지 않고 기존 파비콘 경로를 사용하는 경우 (권장)
<!-- 기존 파비콘 경로 기반 예시 -->
<link rel="shortcut icon" href="https://photalk.tistory.com/favicon.ico">
<!-- 파비콘 경로 리다이렉트 결과 URL 예시 (권장) -->
<link rel="shortcut icon" href="https://tistory1.daumcdn.net/tistory/2801367/skin/images/favicon.ico">
HTML 탭으로 이동하여 위에 내용을 복사 붙여넣기 해줍니다. 파비콘 파일 경로는 각각의 블로그마다 다르기 때문에 확인 후 넣어주시면 됩니다.
주의사항: 오류 없이 안전한 스킨 수정을 위해 위 이미지와 같이 <head> 태그 바로 아래에 붙여넣기 해주세요.
태그를 추가하셨으면 우측 위에 적용 버튼을 눌러줍니다.
그리고 블로그로 돌아와서 개발자모드를 열고 방금 추가했던 태그를 찾아보면 정상적으로 들어가 있는 것을 확인합니다.
이렇게 파비콘 태그 추가를 마쳤습니다.
태그 설정이 끝났다고 해서 바로 네이버 검색결과에 적용되는 것은 아닙니다. 네이버 검색 엔진이 내 블로그를 다시 수집해가고 파비콘이 변경되었다는 것을 알아차리고, 검색결과에 업데이트가 되면 그때서야 파비콘이 정상적으로 노출될 거에요.
티스토리 블로그 기본 관리 기능에서 업로드한 파비콘이 잘 수집 되었다면 좋았을텐데 아쉽네요. 이렇게 스킨 편집을 통해서 파비콘 설정하는 방법을 정리해봤습니다.
한 가지 단점은 파비콘 변경하려면 이 과정을 또 반복해야한다는 것입니다.
이상 글 마무리 하겠습니다.
고맙습니다.
추가작성 (2024.04.25.목)
네이버 검색결과에 파비콘이 정상적으로 출력되는 모습을 확인했습니다. 그런데 순서는 내려갔네요 :(
파비콘 나오는걸로 만족하겠습니다!