구글링을 통해 구체적인 최적화 방법들을 찾아서 내 블로그에 적용해도 처음할 때는 실수도 하고 제대로 적용이 된 건지 확신이 가지 않는 게 사실입니다.
이것 저것 시도해 보다가 알게 된 스킨 오류 수정법과 검색엔진 최적화 상태를 무료로 확인하는 방법을 공유합니다.
티스토리 북클럽 스킨 H1태그 오류 수정법
블로그 스킨(테마) 중에는 '블로그 메인 이름'과 '게시글 제목'에 h1이 각각 적용돼서 h1 중복 오류가 발생되는 경우가 있습니다. 많이 사용하는 티스토리 기본 스킨 중에 '북 클럽(Book Club)'도 이 오류를 가지고 있습니다.
혹시 이 스킨을 사용하고 있다면 마이크로소트프의 빙 웹마스터 도구(Bing Webmaster Tools)에서 URL 검사해 보시고 오류가 있으면 다음과 같이 수정해 보세요.
스킨의 HTML을 편집하다가 실수를 하실 수도 있으니 우선 본인의 티스토리 스킨을 백업해서 저장해 둡니다. HTML 수정 후 오류가 난다면, 백업해 둔 스킨을 적용해서 수정 전 상태로 복구할 수 있습니다.
블로그 스킨을 조금이라도 수정하신 적이 있다면 맨 왼쪽의 숫자(코딩의 각 행의 위치 표시)가 바뀝니다. 이러한 점을 고려해서 맨 왼쪽 숫자의 범위로 수정할 곳의 위치를 설명드리겠습니다 다음의 내용과 첨부한 이미지를 참고해 주세요.
 |
| <북클럽 스킨 html 'header'의 h1태그를 h2로 수정한 모습> |
북클럽 스킨 편집에 들어가서 html을 켜고 30~40번대에 있는 'header'에 적용된 <h1>을 <h2>로 수정하세요. 그 후 CSS에 들어가서 post-header h1을 찾아서 h2로 수정하시면 됩니다.
CSS에서 1060번~1070번대에 있는 post-cover h1은 그대로 유지해 줍니다.이 부분은 포스팅할 때 자동으로 잡히는, 블로그 포스팅의 제목 부분입니다.
'header'를 키워드로 넣고 검색하고 싶다면, <Control + F 키>를 눌러서 검색창을 이용할 수 있습니다.
post-cover h1부분이 본인의 블로그에서 정확히 어디인지 확인하고 싶다면, CSS post-cover 에서 color :#ffffff 넣고 적용버튼 클릭 후 새로고침을 해보세요. 그럼 제목 글자의 컬러에 흰색이 적용되서 화면에서 글자가 사라질 겁니다.
위치를 파악하신 후, 다시 color : #000000 를 넣고 적용버튼을 누르세요. 그럼 검정색으로 제목 글자가 다시 표시됩니다.
수정이 끝나면, 빙 웹마스터 도구에서 다시 URL 검사를 해 주세요. 제대로 수정됐을 경우, h1 중복 오류 안내가 사라지고 "SEO 문제가 없습니다."라는 메시지가 뜹니다.
추가로 블로그 SEO 최적화 상태를 무료로 확인할 수 있는 도구를 소개합니다.
Bing Webmaster Tools
마이크로소프트(MS)에서 운영하는 빙 웹마스터 도구(Bing Webmaster Tools)에서 URL검사를 하면 해당 사이트의 SEO 상태를 알 수 있습니다. 구글 서치 콘솔(Goolge Search Consol)보다 오류 상태를 더 구체적으로 잡아내고 수정 방향도 알려줍니다.
 |
| <빙 웹마스터 도구 공식홈페이지 첫 화면> |
1. 사용방법
1) 빙 웹마스터 도구 공식 사이트에서 <시작하기>클릭
2) MS, GOOGLE, FACEBOOK 중 원하는 계정dptj<로그인>
3) '구글 서치콘솔에서 가져오기' or '직접 추가' 중 <선택 >
• 구글 서치콘솔: 등록된 내 블로그는 자동연동 됨.
• 사이트 직접 추가
- 블로그 도메인 주소(URL)과 사이트 맵(Sitemap) 등록
예) url→ https:// xxxxx.blogspot.com
Sitemap→ https:// xxxxx.blogspot.com/sitemap.xml
- 현지시간으로 이 사이트에 대한 가장 많은 트래픽은 언제 받으십니까?
: 운영하는 블로그 상황에 맞게 지정
- 내 정보 요청사항 기재.
: 이름 (영어/ 한국어 상관없음), 업종(게시 및 웹), 이메일, 국가 정보기재 *업무, 연락처, 주소 등은 기재하지 않아도 괜찮음(선택사항)
- 소유권 확인: 제시된 3가지 방법 중 하나 선택.
: '구글 블로그스팟'과 '티스토리'는 미리 구글 서치콘솔에 등록하면 이 작업없이 바로 연동 됨. 그 외 사이트들은 일반적으로 '메타태크(meta)' 복사 붙여넣기로 진행함. 빙 사이트에 안내된 '메타태그'를 복사해서 해당 사이트의 html <head>부분에 넣고 저장 후 빙 사이트에서 '확인' 클릭.
4) 대시보드 상단 왼쪽에서 <등록한 사이트 주소> 확인.
5) 왼쪽 카테고리에서 <URL 검사> 클릭!
6) 'URL 검사창'에서 url 넣고 <검사> 클릭!
7) 'URL 검사창' 바로 아래에 있는 <라이브 URL> 클릭
8) 오류가 있는 경우, 하단에 오류 내역이 상세히 표시됨.
9) 오류가 없는 경우, "SEO 문제가 없습니다." 라고 표시 됨.
* URL는 하루에 10개까지 색인요청 할 수 있음.
"SEO 문제가 없습니다."라는 메시지는 검색로봇과 소통할 수 있는 가장 기본적인 상태가 되었다는 의미입니다. URL은 하루에 10개까지 제출하여 색인 생성을 요청할 수 있습니다.
한편, SEO 상태를 체크하고 '오류'가 있을 경우 해당 사항이 표시되고 오른쪽에 '어떻게 수정하나요?'라는 문구가 뜹니다. 해당 문구를 클릭하면, 수정 방향에 대해 감을 잡을 수 있습니다.
검색엔진 최적화(SEO)는 검색로봇이 블로그 게시물을 인식하고 검색엔진에 잘 게재할 수 있도록 돕는 방법입니다. 따라서 게시물 작성할 때, 제목 태그(h1, h2, h3)를 글의 구조와 순서에 맞게 잘 적용해야 합니다.
2. 빙 웹마스터 도구 장점
'빙'의 장점은 '무료'로 h1이 2번 이상 들어간 '심각한 오류' 등을 세심하게 잡아내고 수정방향을 안내해 주는 것입니다. 또한 SEO 카테고리가 있어서 백링크, 키워드 조사, SEO보고서, Site Scan을 지원합니다.
 |
| <SEO 카테고리> |
Google PageSpeed Insights
1. 사용하는 방법
1) Google PageSeed Insights 공식 사이트 접속하기.
2) '웹페이지 URL 입력창'에 검사하고 싶은 사이트의 주소를 넣고, <분석> 클릭!
3) 30초~1분 이내로 하단에 분석결과가 나타남.
예시) 분석결과
- 모바일 버전의 페이지 속도
- 데스크톱 버전의 페이지 속도
- 진단 결과 (현재 사이트 상태)
- 수정 권장사항 (사용하지 않는 자바스크립트, CSS 삭제, 랜더링 차단 리소스 제거 등)
- 통과한 결과 안내
 |
| <Google PageSpeed Insights> |
2. 구글 분석도구의 장점
Google PageSpeed Insights 는 매우 사용하기 편리합니다. 별도의 로그인이나 회원가입 없이 사이트 첫 화면 중앙에 있는 '웹페이지 URL 입력창'에 분석하고 싶은 사이트 주소를 넣고 '분석' 버튼을 클릭하면 바로 사이트 상태와 수정 방향을 알려주기 때문에 문제점을 쉽게 파악할 수 있습니다.
또한, Google PageSpeed Insights에는 Lighthouse에서 분석한 '사이트 속도'가 자동 연동되어 표시되기 때문에 크롬 개발자도구를 사용하지 않고도 쉽게 결과를 파악할 수 있어서 좋습니다. 사이트 속도는 3가지 색상으로 구분하여 표시되는데, 빨간색(0-49점: 나쁨), 주황색(50~89: 개선필요), 녹색(90~100: 좋음)입니다.
1 댓글
방문해주셔서 감사합니다~^