이미지 alt 자동 추가 설정 (caption 값 사용)

1. 이미지에 alt 속성을 추가해주는 이유?

구글 SEO 최적화 가이드를 참고해보면 이미지 최적화 방법을 확인할 수 있습니다.
그 중 하나로 이미지의 html tag 속성에 alt 값 추가를 권장하고 있습니다.

google SEO 기본 가이드

alt 속성이란 웹사이트에서 이미지를 표시할 수 없을 때, 해당 이미지 대신 표시되는 문구입니다.
아래의 이미지와 같이 티스토리에서 글을 작성 시, 이미지의 하단에 caption 값을 입력할 수 있습니다.

티스토리 caption 확인 예시 이미지

위의 예시 이미지의 하단의 '티스토리 글쓰기 페이지 화면 상단'문구가 caption 값 입니다.
해당 caption 값을 본문내의 이미지 태그 속성으로 자동으로 추가해주는 설정을 진행합니다.

2. 스크립트 코드 추가 하기

티스토리 블로그관리 페이지에서 '스킨편집'을 클릭하여 해당 페이지로 이동합니다.

티스토리 블로그관리 꾸미기 항목

스킨편집 페이지에서 'html 편집' 버튼을 클릭 후, html 탭을 선택합니다.

티스토리 스킨편집 화면

티스토리 스킨편집 html 탭

위의 빨간색 네모 박스의 위치에 아래의 코드를 복사해 붙여넣어 줍니다.

<script type="text/javascript">
$(function() {
	$.each($('div.entry-content img'), function(i, el) {
        $img = $(el);
        $img.attr('alt', $img.closest('figure').find('figcaption').text());
    });
});
</script>

티스토리 스킨편집 스크립트 코드 추가 후

위와 같이 코드를 추가해준 후, 상단의 '적용' 버튼을 눌러 저장해줍니다.

3. 적용 결과 확인

아래의 이미지와 같이 본문의 이미지 태그에 caption 값이 alt 값으로 추가된 것을 확인할 수 있습니다.

이미지 태그 alt 값 생성 확인