티스토리 블로그 최적화 (web.dev)

• 티스토리 Portfolio(포트폴리오) 스킨 web.dev 최적화하기
• Accessibility(접근성)
• Best Practices (모범사례)
• SEO (검색엔진 최적화)

---

몇 년 만에 티스토리 블로그를 새로 개설한 후, 기존의 스킨을 사용하고 심플하게 쓰자고 다짐했지만 약간의 수정과 최적화 필요성을 느꼈다.

내 티스토리가 검색 노출에 잘 되게 하기 위해선 구글과 네이버에 검색 등록도 해야 하지만, 모바일, PC, 태블릿 등에도 "잘 볼 수 있도록" 최적화를 해주는 것뿐만 아니라, 안전성, 퍼포먼스 속도 등도 신경 써줄 필요가 있다. 

자율성 때문에 네이버 블로그가 아닌 티스토리로 다시 시작했지만, 귀찮고 번거로워서 다시 한번 왜 네이버에서 티스토리로 이사하다가 블로그 자체를 접었었는지 기억이 되살아났다.

 

티스토리 포트폴리오 스킨을 처음 적용했을 때 기준, 간단하게 점수를 개선할 수 있는 것들 위주로 수정해보았다.

 

 

web.dev에 접속하여, 본인의 티스토리 블로그 URL 주소를 넣고, "RUN AUDIT"를 클릭한다.

측정에는 시간이 조금 소모된다. 보기 어렵다면, 크롬에서 제공되는 페이지 번역으로 한국어로 번역해준다.

web.dev/measure/

 

 

 

 

지금 내 블로그 주소는 아니고, 다른 아무것도 설정하지 않고 글도 없는 새 블로그 주소를 넣었다.

Portfolio 스킨을 설정한 상태의 측정 결과이다.

결과는 홈의 이미지, 추가한 html 코드, 광고, 스킨에 따라 다를 수 있다.

 

퍼포먼스 53 / 접근성 78 / 모범사례 93 / SEO 79

 

 

 

"View Report"를 클릭하여 상세 내용을 확인한다.

 

 

 

 

퍼포먼스는 기본 스킨에 따라 다르고 글의 썸네일 이미지 확장자, 사이즈에 따라 많이 다르다.

간단하게 손 볼 수 있는 것만 우선 수정할 거니까... 포기한다.

 

 

 

접근성(Accessibility)

배경과 전경 색의 명암비는 블로그에 사용된 폰트 사이즈, 굵기, 색상이 모두 포함된다. 폰트 사용의 자율성이 떨어지므로 이것도 포기하겠다.

 

 

 

 

접근성 내의 모범 사례(Best Practices)로 "메타"관련 요소가 있는 것을 확인할 수 있다.

쉽게 말해 웹페이지를 이용해 티스토리 블로그를 볼 때, 화면을 확대하는 정도이다.

 

 

 

[티스토리 관리 - 꾸미기 - 스킨 편집 - Html 편집]에서 Html 코드를 확인한다.

<Control+F>로 'meta name'을 검색한다. 굳이 검색할 필요 없게 가장 상단에 위치한다.

메타 이름이 viewpoint인 것을 보면'maximum-scale=1.0'로 설정되어 있다.

 

 

'maximum-scale=5.0'으로 변경한다.

5이든 6이든 5 이상이면 괜찮다.

[적용]을 클릭해 저장한다.

 

 

 

 

모범 사례(Best Practices)

이 항목은 초기값에서도 높은 편인데, 기본 스킨에 적용된 라이브러리 버전이 낮기 때문에 보안 취약점이 보였다.

Java 스크립트(jQuery)는 아무것도 없는 초기 상태의 포트폴리오 스킨이 적용된 블로그나, 현재 약간의 수정을 거치고 기능을 부여한 이 Fri 블로그에 동일하게 나타나는데, Mustache(번역 기능에 의하면 콧수염)는 Fri 블로그엔 나타나지 않았다.

 

 

 

Java 버전을 수정해본다.

지금 jQuery버전이 3.2.1이기 때문에 3개의 취약점이 있다는 뜻인데, 버전을 업그레이드해준다.

<jQuery@3.2.1>을 클릭하면 창이 뜨는데, 내리면 현재 최신 버전이 뭔지 확인할 수 있다.

 

현재 기준 3.6.0이 최신 버전인 것을 볼 수 있다.

 

 

 

다시 [스킨 편집 - Html 편집 - Html]에서 <Control + F>로 'jquery'를 검색한다. 코드 상위에 있기 때문에, 쉽게 찾을 수 있다.

코드에는 버전이 3.3.1인 것을 확인할 수 있다. 

 

 

 

3.3.1을 3.6.0으로 수정한다.

 

 

 

스킨을 계속 사용할 예정이면, 추후 다시 버전을 올려주어야 할 수 있으니, <!--자바 보안--> 주석을 코드 위와 아래에 추가해 찾기 쉽게 했다.

 

[적용]을 클릭해 저장한다.

 

 

 

 

SEO (검색 엔진 결과 순위 최적화)

아마도... 이 점수가 높아야 구글 검색 결과에서 상위 노출이 잘 될 것이다(?)라고 믿고 점수를 올려본다.

 

 

 

"문서에 메타 설명이 없습니다." 항목은 네이버 검색 등록에서 사이트 최적화 때 수정했다면 안 뜰 것이다.

간단히 내 블로그 설명을 적어준다. 한글도 영어도 상관없다.

 

[Html 편집 - Html]에서 <Control + F"로 'meta name'을 검색하면 'meta name="description"'을 찾을 수 있는데, 'Content="(내 페이지 설명, 한영 특수문자 무관)"'을 수정한다.

기본값은 Random Notes이다.

 

 

삭제하고 원하는 설명을 적어준다. 지금 내 블로그는 'Norden's Hacks'라고 넣었다.

[적용]을 클릭해 저장한다.

 

 

 

크롤링 및 인덱싱

블로그 내의 클릭하면 이동되는 버튼이나, 링크에 대한 설명이 없다는 내용이다.

초기 상태의 포트폴리오 스킨의 경우 '닫기 버튼'의 설명이 빠져있어 뜬 항목이다.  

 

 

 

<Control + F>로 'btn'을 검색하면 꽤 많은 버튼이 나오는데, 그중 닫기 버튼, 'btn_close'이다.

설명이 빠져있다. 아마 블로그에 어느 정도 글도 있고, 메뉴, 카테고리 등을 사용하고 있다면, 다른 버튼들도 수정하라고 뜰 것이다.

 

기본 코드에는 버튼에 대한 설명이 빠져있다.

 

 

<botton type = ~> 중괄호 안에

'aria-lable="btn_close"'를 추가해준다.

class와 같은 이름을 넣어주면 된다. [적용]을 클릭해 저장한다.

 

 

 

닫기 아니어도 다른 모든 버튼에 추가해줬다.

만약 <button type ="button" class="btn_menu" title="메뉴">라면, aria-lable="btn_menu"를 붙여, <button type ="button" class="btn_menu" title="메뉴" aria-lable="btn_menu">로 수정한다.