티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

썸네일

변환하기

alt태그란

alt태그 설명

우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다.

네이버 웹마스터 가이드와 구글 검색엔진 최적화(SEO) 초보자 가이드에 따르면 이 alt태그를 작성하면 검색엔진이 해당 이미지를 이해하는데 도움을 줄 수 있으며, 이미지 검색결과에 활용할 수 있는 매우 중요한 정보로 간주된다고 합니다.

사용 방법

직접 alt 추가

기존에는 티스토리가 따로 이미지에 alt태그를 달아주는 기능을 지원하지 않아서, 글쓰기 모드를 html모드로 바꾸고, 하나 하나 직접 번거롭게 alt 태그를 입력해줘야 했습니다. 수동으로 계속 입력하다 보니까 아무래도 헷갈리기도 하고 귀찮아서 이걸 글에 있는 이미지의 설명을 바탕으로 자동으로 달아주는 툴을 만들었습니다.

솔직히 전 주로 앱을 만들고, 자바스크립트는 별로 만질일이 없어서 소스가 지저분하거나, 제가 발견하지 못한 오류가 있을 수 있습니다. 그런부분은 댓글로 알려주시면 바로 수정해보도록 하겠습니다.

입력칸에 html 코드 붙여넣기

이 alt 툴의 사용 방법은 간단합니다. 우선 글의 html 코드를 복사하여, 이글로 와서 'html 코드를 입력해주세요.'라고 나와있는 입력칸에 붙여넣기하고 'alt 태그 추가' 버튼을 클릭해주면 됩니다.

작동 원리는 간단하게 설명하면 사진을 클릭하면 나오는 '이미지를 설명해 보세요' 입력칸의 있는 설명글을 바탕으로 alt태그를 만드는 것 입니다. 이미지의 설명이 없으면, alt=""이렇게 빈칸으로 나옵니다.

alt 태그 자동 추가된 모습

alt 태그 추가 버튼을 클릭한 모습입니다. f12를 눌러 개발자 모드로 봤을 때 이미지 설명을 바탕으로 alt태그가 생긴걸 확인할 수 있습니다. 이미 alt태그가 존재하면 덮어씌우고, 그룹 이미지로 되어있어도 지원합니다.

이제 이렇게 해서 만들어진 html 코드를 글에다가 붙여넣기 하시면 됩니다.

 

관련 글

https://github.com/minikupa/tistoryAltTool

minikupa/tistoryAltTool

[JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동

자바스크립트 / 티스토리 다른 페이지, 글 또는 개인 도메인 자동 이동