티스토리 SEO 최적화를 위한 이미지 alt 속성 자동 추가 방법

 

티스토리 alt 속성 자동 추가 방법

 

이미지에 alt 속성 추가가 필요한 이유

SEO 최적화를 위해 많은 분들이 구글의 page speed insight 를 이용하고 계실 겁니다.
블로그 포스트 주소를 넣고 분석을 하면, 어떤 부분이 보완되어야 하는지 내용을 알려줍니다. 검색 결과 상위노출을 위해서 지적사항들을 하나씩 보완하는 방식으로 최적화하게 되죠.
여기서 흔히 보이는 지적사항 중 하나가 바로, 아래의 메시지입니다.

이미지 요소에 alt 속성이 없음

 
우리가 열심히 작성한 포스트가 검색 상위노출이 되지 않는다면 많은 사람들이 방문하지 못하게 됩니다. 따라서 어떻게든 지적사항을 하나라도 줄여서 점수를 높이고 싶을 겁니다.

 

 

이미지에 alt 속성이 없는 이유

이건 티스토리의 기본 동작이 그렇습니다. 이미지를 삽입한 직후에는 alt 속성이 없는 상태입니다. 기본 값이라도 넣어주던지, 아니면 파일명으로 입력을 해주던지 했으면 좋겠으나... 그런 친절은 베풀지 않습니다.
alt 속성 존재 여부를 직접 확인하고 싶으시다면, 크롬 DevTools 등을 이용하여 현재 표시되고 있는 페이지의 HTML 코드 내용을 확인해 보시면 알 수 있습니다.
혹은 Page speed insight 지적사항에 보시면 분석 지점의 HTML 태그도 보여주게 되는데, 여기에서도 <img> 태그에 srcset, data-filename 등의 다른 속성들은 존재하지만 alt 속성은 존재하지 않는 것을 확인하실 수 있습니다.

page speed insight에 표출된 분석 내용. 역시 &amp;amp;lt;img&amp;amp;gt; tag에 alt 속성은 보이지 않는다.

 
 

해결방법 1 - alt에 들어갈 값을 이미지별로 입력해 주기

우선, 이를 해결하는 아주 쉬운 방법은 직접 alt 속성에 들어갈 값을 수작업으로 입력해 주는 것입니다.
삽입된 이미지를 클릭하면, 상단에 메뉴가 표출됩니다. 메뉴 버튼 중에서 제일 우측에 있는 "대체 텍스트 삽입" 톱니바퀴 버튼을 클릭하시면 alt 속성을 입력할 수 있습니다.

대체 텍스트 입력 버튼의 모습

 
이쯤 되면 예상하실 겁니다. 이미지 수가 적다면 이런 식으로 입력이 가능하지만 이미지 수가 많은 포스트를 작성하게 되면 상당히 귀찮고 시간을 소비하게 됩니다.
또한, 내가 alt 속성을 입력했는지 안 했는지 직관적으로 확인이 어렵기 때문에 page speed insight 분석을 수행해서 누락된 부분을 찾아 다시 수정해줘야 하는 번거로움이 있습니다. 저는 이게 가장 큰 문제점으로 다가왔습니다.
 
 

해결방법 2 - 스킨 편집으로 alt 속성이 이미지에 자동으로 추가되도록 설정하기

거두절미하고 이미지에 alt 속성을 자동으로 추가하시려면, 스킨 편집에 들어가셔서 아래의 코드를 추가하시면 됩니다.
코드 삽입 위치는 </body> 바로 위입니다. (body 태그가 종료되기 직전)
아래의 우선순위로 alt 값이 자동 추가됩니다. 동작을 바꾸고 싶으시면 구문이 어렵지 않으니 수정하시면 될 것 같습니다. (우선순위를 바꾼다거나)

1. figcaption (이미지 하단 설명)
2. 이미지 파일명
3. 기본값 (Default alt text)

아직 Javascript에 익숙하지 않아서 chat gpt에 물어봐서 만들었지만, 하나씩 검색해 가며 각 구문의 의미는 대략 이해한 상태이고 직접 적용 시에 문제없이 잘 동작하는 것을 확인했습니다. (한 번씩 chat gpt에서 오류가 있는 코드를 답변해서 곤란한 경우가 있습니다.)

  <!-- 자동 alt 추가 -->
  <script type="text/javascript">
    $(function() {
      $.each($('div.entry-content img'), function(i, el) {
          $img = $(el);
          // 가장 가까운 figure 태그 찾기
          var $figure = $img.closest('figure');
          // figcaption의 텍스트 가져오기
          var captionText = $figure.find('figcaption').text();
          
          if (captionText) {
              // figcaption이 있을 경우 figcaption의 텍스트로 alt 속성 설정
              $img.attr('alt', captionText);
          } else {
              // figcaption이 없을 경우 figure의 data-filename 속성 사용
              var filename = $figure.attr('data-filename');
              if (filename) {
                  $img.attr('alt', filename);
              } else {
                  // data-filename도 없을 경우 기본 값 설정 (선택사항)
                  $img.attr('alt', 'Default alt text');
              }
          }
      });
  });
  </script>
  <!-- 자동 alt 추가 종료 -->

 

 

마치며

지금은 단념하긴 했지만, 다른 분들께서 만들어두신 무료 블로그 스킨들을 적용해보려 했던 적이 있습니다. 저보다 경험이 훨씬 많은 분들께서 잘 만들어두신 스킨을 적용하면, 보다 쉽게 SEO 최적화도 하고 보기 좋은 블로그를 만들 수 있을 것 같다는 기대 때문이었죠.
하지만 제가 블로그를 시작한 이유 중 하나는, 웹 공부도 있었기 때문에 불편한 부분이 있을 때마다 코드를 하나씩 확인해서 직접 스킨을 만들어보기로 마음먹었습니다.
불편함을 해결한 것도 좋지만, 그 과정에서 얻어가는 것들이 있어 더욱 좋았던 것 같습니다. 앞으로도 느슨해지지 않고 이런 노력을 계속 이어나갈 수 있었으면 하는 바람입니다.