이번 포스팅은 검색 엔진에서 본인의 블로그가 검색될 때 적용된 파비콘(favicon)이 보여지도록 하는 설정 방법에 대해 적어보려고 합니다. 지난 포스팅에서 파비콘을 만들고 블로그에 적용하는 방법에 대해 소개해드렸는데요. 지난 포스팅을 잘 적용하신 분들이라면 이번 내용은 더욱 쉽게 적용하실 수 있어요.
만약, 파비콘을 적용하지 않은 상태라며 아래 포스팅을 보시고 적용해주세요 :)
* 이전 포스팅 :
- 파비콘 만들기 + 블로그 적용하기
2. 가로, 세로 비율 1:1 이고 48x48 보다 큰 icon 사용.
* 파비콘(Favicon) 이란?
웹 사이트(ex. 블로그) 를 대표하기 위해 브라우저에서 사용되는 작은 이미지를 말합니다.
| Quick View
적용 방법
# 블로그 테마 > HTML 편집 > head 태그 사이에 link 태그 작성 > 저장.
- Code : <link href='https://your-site-url.com/favicon.ico' rel='icon' />
# 적용 전.
적용 전 검색 결과를 캡쳐하지 않아, 구글 블로그 검색 결과로 대체합니다.
아마, 파비콘 변경 없이 사용 중이라면, 구글 블로그는 아래 이미지와 같습니다. 티스토리 블로그인 경우, 티스토리 기본 파비콘으로 검색되실 거에요.
# 적용 후.
적용 후 바로 검색하면 기존 파비콘으로 보여질 겁니다. 각 검색 엔진도 크롤링 주기가 모두 다르기 때문에 적용되는 데 시간이 대략 하루 정도 소요됩니다. 직접 크롤링을 요청할 수 있지만, 요청하더라도 즉각적으로 크롤링이 되지 않기 때문에 여유롭게 기다리는 걸 추천드려요.
| 구글 공식 가이드 확인하기 (favicon)
적용 전에 구글 가이드에서 설명하는 파비콘 세팅을 방법을 확인해볼게요. 가이드 문서를 보면 친절하게 '검색결과에 표시할 파비콘 정의하기' 라는 제목으로 설명해주고 있습니다. 우리가 할 내용의 전부에요. 가이드 페이지에서는 자세하게 설명하고 있지만 우리가 필요한 부분을 2가지로 요약해드릴게요.
1. 홈페이지 헤더(head)에 link 태그 추가.
우린 벌써 2번째 과정은 지켜진 상태입니다. 이전 포스팅에서 적용한 icon은 1:1 비율이고 48x48 / 128x128 / 192x192 크기로 적용했기 때문에 아이콘 크기에 대해서는 별다른 세팅이 필요없습니다. 그럼, 1번 과정만 적용하면 되겠네요. 한 번 적용해 볼까요?
| 블로그 테마(html)에 link 태그 추가하기
1번 과정을 적용하기 전에, 먼저 본인 사이트의 favicon.ico의 주소(경로)가 필요합니다. 브라우저를 여신 후에 아래 이미지와 같이 접근했을 때 파비콘 아이콘이 출력되는 지 확인해주세요.
# 파비콘 URL 확인하기 > 'https://your-blog-url/favicon.ico' 로 접근해보기.
파비콘 경로(주소)가 확인되었으면, 블로그 헤더에 적용하면 완료됩니다. link 태그를 추가하실 때 your-site-url 주소는 본인의 주소로 변경해서 적용해주세요. 그리고 코드 추가 후 '저장' 하기를 눌러주세요. 그럼 끝!
# 블로그 관리자 페이지 > 테마 > 테마 수정 > HTML 편집
# head 태그 상단에 link 태그 추가하기 > 저장
- Code : <link href='https://your-site-url.com/favicon.ico' rel='icon' />
| 구글에 검색된 나의 블로그의 파비콘 확인하기
# link 태그 추가 후 검색 엔진이 크롤링(Crawling)하여 사이트 정보가 수집되어야 사용자 검색 시 적용된 파비콘을 확인할 수 있습니다. 크롤링은 주기적(1일~1주)으로 수행되지만, 만약 수동 크롤리을 요청하고 싶다면 아래 구글 가이드를 참고해주세요.
* Google 가이드 : 재 크롤링 방법
전 적용하고 하루 정도 지난 상태입니다. 그럼 이제 블로그를 검색해서 파비콘이 잘 적용되었는 지 확인해볼까요? 오, 저는 확인해보니까 적용한 'DMZN' 파비콘으로 잘 출력됩니다. 정말 미니한 아이콘이지만 저만의 색이 느껴지니 기분이 좋네요. 그럼, 여러분들도 잘 적용하시길 바라며 다음 포스팅에서 만나요.
댓글 없음:
댓글 쓰기