약 2주전 티스토리 블로그를 위한 파비콘을 제작했었다.
티스토리 아이콘(파비콘) 만들고 적용하기
블로그를 시작한지 어느덧 반년이 지나가면서 블로그 관리의 일환으로 블로그 아이콘을 바꾸는 시간을 가졌다. 이것저것 재지않고, 바로 시도해본 과정을 공유하고자 한다. 기본 티스토리 아이
alive-wong.tistory.com
엊그제 확인했을 때 구글 검색에서도 파비콘이 적용된 것을 확인할 수 있었다.
별다른 설정 없이 티스토리 블로그 관리 창에서 파비콘을 설정하는 것으로 구글에 파비콘이 반영되는지 확실하지 않아서 추가로 한 설정을 공유하고자 한다.
티스토리를 기준으로 하는 것을 참고하길 바란다.
# 구글 공식 문서확인
Google 검색결과에 표시되는 웹사이트 파비콘 정의하기 | Google 검색 센터 | 문서 | Google for Dev
파비콘이 있는 웹사이트의 경우 Google 검색결과에 포함될 수 있습니다. 다음 파비콘 검색엔진 최적화 안내를 따라 사이트가 관련 요구사항을 준수하도록 하세요.
developers.google.com
위의 공식 문서에서 구글 검색 결과에 표시되는 파비콘을 적용하기 위해 해야할 것들을 확인할 수 있다.
3단계가 존재하는데 하나씩 살펴보면서 적용해보자.
1. 파비콘 형식 48 x 48px 으로 편집하기
첫번째로 파비콘이 가이드라인을 준수해야한다.
해당 가이드라인 중에서 본인이 준수되지 않았던 점은 파비콘이 48 x 48px 크기가 아니였다는 점이다.
별도의 도구를 사용할 줄 모르고, 무료 변환 사이트에선 크기 조정이 자유롭지 않아서 그림판을 통해서 직접 수정했다.
파비콘을 특정 크기로 수정하기 위해선 그림판을 이용했는데, 본인의 운영체제가 윈도우 11이라 사용 방식이 익숙하지 않았다.
우선 처음 그렸었던 파비콘을 48 x 48px 크기보다 크게 만들고, 아래와 같이 그림판에서 불러와 크기 조정을 수행했다.
그림판에서 사진을 불러온 후 위 사진의 버튼을 눌러 모두 선택하기를 누른다.
사진 주변에 점선이 보이면 선택이 완료된 것이다.
이후 마우스 우클릭을 해서 크기 조정 버튼을 누른다. 그러면 아래의 팝업창이 나온다.
여기에서 픽셀 기준을 선택하고 가로, 세로 부분을 수정하면 된다.
본인은 192 x 192 px로 비율이 일정하지만, 만약 파비콘 원본 사진의 비율이 일정하지 않다면 중간의 버튼을 클릭하여 비율 고정을 제거해야한다.
저걸 제거하면 크기를 자유롭게 변경할 수 있다.
이후 확인을 누르면,
이렇게 확 이미지가 작아지는데, 여기에서 바둑판 모양을 줄이면서 크기를 48 x 48px로 만들면 된다.
잘 줄이다 보면, 위 사진처럼 하단에 48 x 48px을 확인할 수 있다. 이렇게 만들었으면 성공이다.
이를 티스토리 관리 페이지의 관리 > 블로그 > 파비콘에 들어가서 반영하면 된다.
사진 상단의 파비콘 부분을 삭제하고 불러오기하면 된다.
2. 홈페이지 헤더에 태그 추가하기
두 번째는 등록한 파비콘이 검색에 노출될 수 있게 링크를 걸어주는 것이다.
이때 블로그 URL 절대 주소를 사용해야하는데, 티스토리의 경우 파비콘 URL은 다음과 같다.
<블로그 주소>/favicon.ico
https://alive-wong.tistory.com/favicon.ico -> 본인의 블로그 파비콘 경로
자신의 블로그 주소를 붙여서 사용하면 된다.
해당 URL에 접속하면 어딘진 모르겠지만 카카오 데이터베이스에 리다이렉션되어 등록된 파비콘을 확인할 수 있다.
아무튼, 해당 경로를 헤더에 링크 태그를 붙여 추가해야한다.
이는 블로그 관리 페이지에서 꾸미기 > 스킨 편집에 들어가면 스킨 세부 설정을 할 수 있는 페이지에 들어온다.
본인은 미넴 스킨을 사용중이기 때문에 각자 설정한 블로그 스킨에 따라 달라질 수 있다.
여기에서 우측 상단의 html 편집을 클릭한다.
이런 식으로 HTML, CSS 편집기를 볼 수 있는데, 여기에서 \<head> /\<head> 사이에 아래의 코드를 입력하면 된다.
<link rel="icon" href="<블로그 절대 주소>/favicon.ico">
<link rel="shortcut icon" href="<블로그 절대 주소>/favicon.ico">
본인의 경우 저렇게 입력을 했다.
rel 속성으로 'icon', 'shortcut icon' 등을 지정할 수 있는데, 웹사이트 돌아다니면서 소스를 까봤을 때 2개정도의 파비콘 태그를 사용하는 것 같아 2개를 지정했다.
중복되는 건 아니고 검색 봇이 각자 우선순위에 따라 파비콘을 수집해간다. 네이버의 경우 shortcut icon이 1순위라고 한다.
아무튼 해당 태그를 입력하고 우측 상단의 적용을 누르면 완료된다.
이를 확인해보고 싶으면, 본인의 블로그 페이지에 들어가서 개발자 도구를 열어보면 된다. 크롬 브라우저에선 F12 버튼을 눌러 확인할 수 있다.
브라우저 우측에 이런저런게 뜨게 되는데, 여러가지 탭 중 Elements를 클릭하면 된다.
본인은 기본적으로 head 부분이 닫혀있는데, 좌측의 우측 세모를 클릭하여 세부 내용을 확인할 수 있다.
head 부분을 열고 아래로 쭉 내리다 보면, 입력했던 태그를 확인할 수 있다.
3. 구글 검색 콘솔에 변경 사항 요청하기
이후 구글 검색 콘솔(Google Search Console)에 접속해서 본인의 블로그의 색인을 다시 요청하면 된다.
구글 서치 콘솔에 대해서 처음 본다면 이번 기회에 자신의 블로그를 등록해두면 좋을 것 같다. 작성한 글을 구글 검색에 노출시키는 가장 빠른 방법 중 하나이다.
처음 어떻게 등록했는지는 기억이 잘 안나지만 금방 등록했던 것으로 기억한다.
색인 생성 요청을 눌러도 바로 반영되는 것이 아니라 구글에서 돌리는 크롤링 봇이 수집할 때 내가 요청한 글도 함께 수집해달라고 요청하는 것이므로 한 번만 요청해도 충분하다. 보통 다음날정도에 수집이 완료된다.
아무튼, 구글 서치 콘솔에서 블로그 주소를 맨 위에 붙여넣으면,
URL 검사 페이지로 넘어가고, 이미 URL이 등록되어 있음을 알 수 있다(처음 등록하면 아닐 수도 있음).
여기에 색인 생성 요청을 눌러 변경 사항을 반영해달라 요청하고 1 ~ 2분 기다리면 요청이 완료 된다.
# 로봇 메타 태그 추가하기
추가적으로 진행한 사항은 파비콘 등록에 영향을 주는 지 확실하진 않지만, 결국 검색 봇이 블로그에서 파비콘을 수집해야하므로 네이버, 구글 등의 검색 봇이 블로그에서 크롤링할 수 있는 설정을 추가적으로 진행했다. 블로그 노출도 늘릴겸
이는 한번쯤 들어볼 수 있는 robots.txt 파일을 통해서 설정할 수 있다.
robots.txt는 웹 사이트에 웹 크롤러들의 접근을 제어하기 위한 공통된 규칙을 적어두는 파일이라고 보면 된다. 티스토리에서 블로그 메인 주소에 /robots.txt를 붙여 보면 해당 파일이 존재함을 알 수 있다.
하지만, 티스토리의 경우 직접 robots.txt를 수정하거나 올릴 수 없게 되어있다.
이는 로봇 메타 태그를 추가하는 방식으로 해결할 수 있는데, 참고할 수 있는 구글 공식 문서는 아래와 같다.
로봇 메타 태그 사양 | Google 검색 센터 | 문서 | Google for Developers
로봇 메타 태그를 추가하는 방법과 페이지 및 텍스트 수준 설정을 사용하여 Google이 검색결과에 콘텐츠를 표시하는 방식을 조정하는 방법을 알아보세요.
developers.google.com
메타 태그 추가하기
메타 태그를 추가하기 위해선, 티스토리의 메타 태그 등록 플러그인을 사용할 수 있다.
이를 설정하기 위해선 '티스토리 블로그 관리 > 메타 태그 등록' 을 클릭하면 된다.
위와 같이 태그를 추가하면 된다. 저렇게 지정해야 제대로 적용한 것이다!
name robots index, follow
name Yeti index, follow
name googlebot index, follow
name googlebot-image index, follow
name Daumoa index, follow
적용을 누르면 설정이 완료되는데, 잘 적용되었는지 확인해보려면 마찬가지로 웹페이지 코드를 확인해야한다.
파비콘을 확인했던 것 처럼, '개발자 모드(크롬 브라우저에서 F12) > Elements > head' 에서 잘 찾아보면 아래와 같이 태그들이 정상적으로 들어가있음을 확인할 수 있다.
robots는 모든 검색 봇을 의미하고, Yeti는 네이버, googlebot은 구글 봇, Daumoa는 다음 봇으로 알고 있다.
index는 검색 결과에 페이지를 표시하도록 수집해가라는 의미이고, follow는 글에 존재하는 링크를 크롤링하라는 의미이다.
이렇게 하면 각 검색 엔진들의 봇들이 크롤링할 것이다! 약 2주정도 기다리면 구글 검색 시 파비콘이 반영될 것이다.
이렇게 구글 검색 시 파비콘이 적용된다!
# 결론
블로그를 이것 저것 만지다 보면서 여러가지 지식들도 함께 얻을 수 있게 된 것 같다.
사실 네이버도 반영시키고 싶었는데, 시간이 더 걸리는건지 네이버는 제대로 잡히지 않는 것 같다. 애초에 티스토리 아이콘도 보이지 않았어서,,
아마 별다른 이슈가 없으면 당분간 더 건드리진 않을 것 같다.
'CW2 > Hobby' 카테고리의 다른 글
| 티스토리 SEO(검색 엔진 최적화) 무료 스킨 추천 - 한눈에 스킨 (17) | 2024.04.15 |
|---|---|
| 역행자 : 확장판 후기 및 다짐 (8) | 2024.02.29 |
| 티스토리 아이콘(파비콘) 만들고 적용하기 (208) | 2023.12.05 |
| Windows에서 Mx Keys for Mac 사용하기 및 사용 후기 - Key Remapping - 윈도우 한영키 설정 (3) | 2023.07.26 |
| 데이브 더 다이버(Dave The Diver) 6월 28일 공식 출시! (6) | 2023.06.18 |