본문 바로가기

About my life/Search Engine Optimization

[Tistory] 티스토리 블로그 검색 엔진에 파비콘 적용하기: 구글, 네이버, 다음

728x90
반응형
반응형
실제로 티스토리에는 아이콘 및 파비콘을 설정할 수 있도록 블로그 설정을 할 수 있습니다.

그러나 이 방법으로는 검색엔진에 제가 설정한 파비콘이 설정되지 않고 티스토리 공식 이미지가 보여지는 것을 알 수 있습니다.

구글링을 해봤을 때 파비콘 적용 방법과 관련된 얘기들이 정말 많았는데 옛날 글들이 많고 실제로 적용되지 않는 경우들이 많았습니다. 특히 html 수정하는 부분에서 잘못했다가 오히려 티스토리 공식 이미지도 안나오는 현상이 발생했었습니다.

그래서 제가 직접 시도해보고 경험해서 해결한 방법을 소개해드리려고 합니다.

정말 따끈따끈한 최신 방법 바로 가보시죠.

 

 

 

 


 

 

 

 

전체적인 개요
1. 티스토리에 이미지 업로드하기
2. Html 수정해주기
3. 검색엔진에 노출된 파비콘 인증

 

 

 

 


 

 

 

티스토리에 이미지 업로드하기 :

 

이 부분은 정말 많은 분들도 알고 계시지요 ? 업로드하는 이유는 서버에서 제가 설정하고 싶은 파비콘 이미지를 찾아서 그것을 노출시켜주기 위함입니다. 파비콘 이미지는 확장자 .ico 를 사용하며 이 이미지를 만드는 방법은 요청하시면 추가로 글 작성하겠습니다. 일단 먼저 빠르게 이미지 업로드 예시를 보여드릴게요. 

 

그림 1. 파비콘 이미지 업로드 방법

 

 

 

위 그림에 나와있듯이 쭉 따라하시면 됩니다. 먼저 블로그 설정에 들어가서 스킨편집 기능을 활용합니다. 여기에는 파일을 업로드 할 수 있는 기능이 있습니다. 참고사항으로 파일을 업로드 하게 되면 업로드한 파일의 경로가 images/image.ico 등등 으로 되어있을 겁니다. 이 경로는 절대 경로가 아니므로 절대 경로를 복사해주어야합니다. 따라서 업로드 한 이미지에 마우스 우클릭을 하여 링크 주소를 복사합니다.

 

 

 

 


 

 

 

 

HTML 수정하기 :

 

<link rel="icon" href="복사한 절대 경로 붙여넣기" type="image/x-icon">

 

 

위 코드를 복사하여 <head> 부분에 직접 삽입해줍니다.

 

<head>
<link rel="icon" href="복사한 절대 경로 붙여넣기" type="image/x-icon">

 

 

그렇게 하고 저장을 해줍니다. -> ctrl + s

 

그림 2. 파비콘을 위한 HTML 수정

 

이후 적용을 누르면 이제 완성입니다.

 

 

 


 

결과 :

 

 

그림 3. 파비콘 결과. 왼쪽부터 google, naver, daum 순서입니다.

 

 

 

주의 하셔야할 점이 색인 요청을 아무리 해도 곧바로 바뀌지는 않는다는 점입니다. 저를 믿고 기다리다보면 꼭 바뀌실테니까 중간에 저 부분 수정하지 않으시길 바랍니다~! 저도 막 이것저것 수정했다가 뭐가 맞는 지 더 헷갈렸어요. 저 믿으세요 여러분들~!

 

 


 

728x90
반응형