티스토리에는 알트태그 alt 를 각 이미지에서 수동으로 넣을 수 있습니다. 이제 블로그를 시작하시는 단계에서는 사실 습관이 들면 알트 태그를 넣는게 그렇게 힘든 건 아닙니다. 이번 글에서는 알트태그를 그동안 입력하지 않았다가 한 번에 넣길 원하시는 분들을 위해 chatGPT와 씨름한 결과를 알려드릴까 합니다. 아랫글을 참조해주세요
ALT태그란
먼저 알트태그에 대한 글은 아랫글을 읽어봐주세요. 왜 넣어야 하는지 나와 있으니 한 번 읽어보세요
내용에서 보셨듯 알트태그는 SEO에 도움이 됩니다. 워드프레스 같은 경우는 자동으로 이미지의 알트태그를 달아주는 플러그인이 있습니다. 그런데 티스토리는 하나하나 수동으로 입력해야 되지요. 입력 방법은 아래에 있습니다.
알트태그의 예시를 볼까요?
- 파일명 : 빨간사과.png
- alt 태그 : 사과 이미지 알트태그
- title 태그 : 신선한 빨간사과
- caption : 캡션 빨간사과
라고 했을 때 티스토리의 html 코드는 아래와 같습니다.
<data-filename="빨간사과.jpg"> : 티스토리에서는 파일명이 data-filename 입니다.
<alt="사과 이미지">
< title="신선한 빨간 사과"> : 마우스 오버 하면 툴팁으로 보입니다.
<figcaption>캡션 빨간사과</figcaption> : 티스토리에서는 캡션이 figcaption 입니다.alt 태그(대체 텍스트)는 속성으로만 ‘사과 이미지’가 들어가서 검색엔진 크롤러가 인식하게 되는거라 가장 중요한 거에요. title 태그는 그냥 사진 위에 마우스를 올리면 ‘신선한 빨간사과’ 박스이미지가 나오는 거구요. 사진 밑에 보이는 ‘캡션 빨간사과’ 는 figcaption 이라고 해서 눈으로 보이게 부가설명을 다는 겁니다.
티스토리 이미지 태그 자동으로 넣기
만약 여러분이 기존에 티스토리 블로그를 운영하셔서 글이 좀 쌓인 상태인데, 알트태그를 넣지 않으신 분도 있을 거에요. 사진 밑에 넣는 캡션을 알트태그로 잘못 알고 계신 분도 있구요. 그동안 사진에 알트 태그와 타이틀 태그를 넣지 않으셨다면 스킨 편집에서 한방에 넣는 방법을 알려드립니다.
챗지피티를 한참을 혼내서 수정한 코드에요. 스킨편집 모드로 들어가서 </body> 위에 추가하시면 됩니다. 최근에 같은 곳에 자동목차 코드를 넣었었는데요. 그 밑에 또 넣으시면 됩니다. 넣는 방법은 하단 글을 참조해주세요.
알트태그 자동화 코드
코드를 복사해서 그대로 </body> 바로위에 넣어주시면 됩니다. 저장해주세요. 바디 끝에 넣는거 기억해주세요.
<!-- 티스토리 이미지 자동 알트 타이틀 태그 반영 -->
<script>
function addAltAndTitleTagsFromDataFilename() {
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
var filename = img.getAttribute('data-filename');
var altAttribute = img.getAttribute('alt');
var titleAttribute = img.getAttribute('title');
// 기존 알트 태그가 없으면 data-filename로 대체
if (!altAttribute && filename) {
var fileNameWithoutExtension = filename.split('.').slice(0, -1).join('.');
img.setAttribute('alt', fileNameWithoutExtension);
}
// 기존 타이틀 태그가 없으면 data-filename로 대체
if (!titleAttribute && filename) {
var fileNameWithoutExtension = filename.split('.').slice(0, -1).join('.');
img.setAttribute('title', fileNameWithoutExtension);
}
// 알트 태그와 타이틀 태그가 둘 다 없으면 둘 다 data-filename로 대체
if (!altAttribute && !titleAttribute && filename) {
var fileNameWithoutExtension = filename.split('.').slice(0, -1).join('.');
img.setAttribute('alt', fileNameWithoutExtension);
img.setAttribute('title', fileNameWithoutExtension);
}
}
}
window.addEventListener('load', addAltAndTitleTagsFromDataFilename);
</script>
<!-- 티스토리 이미지 자동 알트 타이틀 태그 반영 -->코드 내용 해석
이 코드는 이미지 요소들의 data-filename 속성을 활용하여 이미지에 대한 대체 텍스트(alt)와 툴팁(title)을 설정하는 역할을 합니다. 한 번 자세하게 설명드릴게요.
- 이미 수동 입력했던 알트 태그가 있고, 타이틀 태그가 없는 경우 : 알트 태그는 그대로 두고, 타이틀 태그를 파일 이름에서 추출한 값(data-filename)으로 설정합니다.
- 이미 수동 입력했던 타이틀 태그가 있고, 알트 태그가 없는 경우 : 타이틀 태그는 그대로 두고, 알트 태그를 파일 이름에서 추출한 값(data-filename)으로 설정합니다.
- 알트 태그와 타이틀 태그가 모두 없는 경우 : 알트 태그와 타이틀 태그를 모두 파일 이름에서 추출한 값(data-filename)으로 설정합니다.
- 알트 태그와 타이틀 태그가 모두 이미 존재하는 경우 : 아무 작업도 수행하지 않고 그대로 둡니다.
요약하면, 하나의 태그가 이미 존재하면 해당 태그는 그대로 두고, 다른 태그가 없는 경우에만 해당 태그를 파일 이름에서 추출한 값으로 설정합니다. 어떤 태그도 존재하지 않는 경우에는 둘 다 파일 이름에서 추출한 값으로 설정됩니다.
이제 티스토리에서 글을 쓸 때 원하는 알트태그를 넣으면 그대로 들어가고, 혹시나 까먹었더라도 알아서 자동으로 파일명으로 들어가니까 너무 신경 안쓰셔도 될 것 같습니다. 혹시 기존에 글 많았는데 요거 반영 후에 구글 유입이 조금이라도 늘어나시게 되면 말이죠.
잘 반영됐는지 확인하는 법
크롬에서 확인하고싶은 티스토리의 이미지가 있는 해당 글로 들어가 우클릭 한 다음 가장 하단의 검사를 누릅니다.
그리고 개발창이 뜨면 제일 왼쪽의 화살표나 요소를 누릅니다.
그리고 다시 그 블로그 글의 사진을 클릭해봅니다.
자 그럼 티스토리에서 업로드시 반영했던 파일명인 data-filename=”지출증빙현금영수증발급 (1).png” 에서 확장자가 빠진 지출증빙현금영수증발급 (1)이 자동으로 추출된 걸 확인할 수 있습니다.
최종적으로 알트태그인 alt=”지출증빙현금영수증발급 (1)”, 타이틀태그인 title=”지출증빙현금영수증발급 (1)”로 자동 반영되었습니다.
그리고 이미지 위에 마우스오버하면 해당 단어가 툴팁(Tool Tip) 으로 보이시게 될거에요. 이렇게 우리는 티스토리에서도 자동으로 기존 글을 모두 소급적용해서 알트 태그와 타이틀 태그를 적용시킬 수 있게 되었습니다. 사실 그냥 코드 하나 복사해서 넣으면 되는데, 이거 알아내려고 좀 많은 고생을 했습니다. ㅋㅋ
자동화 태그 반영이 안되는 경우
티스토리도 시간이 지나면서 과거와 이미지에 관련된 코드가 많이 바뀌었습니다. data-filename같은 경우 스킨에 따라서도 조금 다르구요, 같은 스킨이라도 과거와 최근의 이미지 태그에 관련된 명령어가 바뀔 수도 있습니다. 그럴 때는 검사를 통해서 해당 이미지를 불러오는 명령어만 파악하면 코드를 짜서 넣으실 수 있습니다.
그리고 가로로 사진을 두장 씩 넣거나 한 경우에는 자동코드로 잘 안먹더라구요. 그럴 때는 알트코드를 수동으로 넣어주시면 될듯합니다.
HTML 코드 자유자재로 가지고 노는 법
저도 문과생으로서 개발자는 더더욱 아닙니다. 그래도 챗지피티를 가지고 원하는 만큼 코드를 맘대로 바꾸고 짤 수 있게 되었습니다. 그 방법은 아래 글을 참조하시기 바랍니다. 여러분도 개발자 못지 않게 원하는 코드를 짤 수 있는 시대가 됐습니다.