티스토리 h1과 alt 태그문제 해결방법

티스토리 블로그를 시작하면서 여러가지 검색을 통해 Seo 최적화의 필요성을 느끼고 해보려고 하지만 제대로 이에 대해 다루면서 블로그에 포스트를 올리거나 유튜브 영상을 올리기보다는 대부분 그냥 조회수나 올리려고 하는 경우가 대부분이라 난감한 경우가 많다. 또는 오랜 시간이 지난 포스트들이라 지금의 상황과는 거리가 먼 경우도 있다.

 

alt 태그 와 h1 태그 오류

 

Bing 웹마스터 툴을 이용해서 URL검사를 해보면 기본적인 싸이트 최적화 여부를 확인할 수가 있는데 그 중에 나처럼 티스토리 블로그를 시작한지 얼마 안 된 사람들이 가장 골치아픈 것 두 가지가 이미지의 alt 태그와 h1 태그다.

 

이미지의 alt 태그는 티스토리에서는 '이미지 대체 삽입'으로 해결이 된 듯하지만 이것을 비웃기라도 하는 듯 Bing 웹마스터 툴로 검사해보면 본문에 이미지는 하나밖에 사용하지도 않았는데 alt 태그 오류가 4개씩 생긴다는 것이다.

 

h1 태그의 경우 블로그 이름이 이미 h1으로 설정되어 있어, 제목만 입력해도 자동으로 h1 태그가 2개가 되버린다. h1 태그를 수정하는 방법을 검색해서 직접해봐도 뭔가 제대로 되는 것을 찾기도 어렵다.

 

1) alt 태그 오류의 원인과 해결 방법

 

현재 티스토리에서 나오는 alt 태그의 오류는 사용자가 직접 본문에 삽입하는 이미지와는 상관이 없다. 즉 리뉴얼된 티스토리 스킨 자체의 문제이다. 실제로 스킨편집 - HTML에서 alt를 검색해보면 총 10개가 검색이 된다. 그리고 이 이미지 알트 태그들은 모두 ""로 입력값이 없다.

 

반응형

 

티스토리 자체에서 사용하는 블로그 스킨 이미지들로 이 중에서 alt 태그 오류가 생기는 것이다. 물론 사용자가 직접 삽입하는 사진의 경우도 이미지 삽입시 생기는 톱니바퀴 모양을 클릭하고 텍스트를 입력하는 '이미지 대체 삽입'을 사용해야 한다. 검색된 10개의 alt=" " 이 부분을 alt="img_1"처럼 입력값을 임의로 넣어주면 더 이상 img alt와 관련한 오류를 만나지 않아도 된다. 

 

2) h1 태그 오류의 원인과 해결 방법 (포스터 스킨)

h1 태그 오류의 원인은 앞서 언급한대로 블로그 이름이 이미 h1으로 설정되어 있기 때문이다. 

 

 

해당 부분을 div 태그를 사용해서 변경해주면 된다.

 

 

수정할 부분

 

<h1><a href="https://showtal.tistory.com/">인화만사성</a></h1>

 

위 부분을 아래로 변경하는 것으로 h1 태그 관련 오류를 더이상 만나지 않아도 된다.

 

 

 

수정 후

 

    <div class='logo'>

  <br>  

  <a href="https://showtal.tistory.com/" style="text-align: center; display: block; margin-top: 1em; text-decoration: none; color: black;">

    <strong style="font-size: 25px;">인화만사성</strong>

  <br>  

  </a>

</div>

 

 

h1태그를 div 태그로 변경하는 것만으로는 블로그 이름이 엉뚱한 곳에 배치되거나 글자가 작거나 색깔이 달라지거나 링크때문에 밑줄이 생긴다. 그 때문에 style 함수를 사용하여 가운데로 정렬시키고, 위아래 여백을 조정하고 링크로 생기는 밑줄을 없애고 색깔을 원래 블로그 이름에 사용되는 색깔로 변경하고 글씨 크기를 변경한 후 Bold처리를 한 것이다.

 

마치며

 

실제로 h1 태그 오류나 alt 태그 오류가 구글 상위 노출에 얼마나 영향을 미치는 지는 미지수지만 티스토리를 시작한지 얼마나 안된 사람들에게는 이랬든 저랬든 여간 신경쓰이는 게 아니다. 그런 분들에게 도움이 되길 바라며 HTML을 수정하는 게 불안하신 분들은 작업하기 전에 미리 메모장 같은 곳에 전체복사 해두시기 바란다. 참고로 위와 같이 해도 검색이나 유입에는 아무런 지장이 없으니 안심하셔도 좋다.

 

위 처럼 작업 후 Bing 웹마스터 툴에서 URL검사를 실행해보면 alt와 h1 태그 관련한 오류는 모두 정리된다.

 

 

현재 나오고 있는 오류는 Meta Description 오류로 <meta description> 태그의 설명 길이와 관련된다. 이 오류도 해결하게 되면 다음 포스팅으로 올리도록 하겠다.

 

(인용시에는 출처를 밝히고 링크를 걸어주시기 바랍니다.)

 

일일이 입력하기 어렵기 때문에 h1 태그 수정하는 부분만 텍스트 파일로 올려둡니다. 필요하신분 사용하세요.

 

http://naver.me/xqoYlHre

h1 태그 수정하기.txt