
티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴
미니쿠파
·2020. 3. 14. 10:00
변환하기
alt태그란
우선 alt태그란 이미지의 대체 문구(alternative text)를 뜻하며, 이 alt태그는 이미지가 깨졌을 때 대체하여 보여지는 설명용 텍스트입니다.
네이버 웹마스터 가이드와 구글 검색엔진 최적화(SEO) 초보자 가이드에 따르면 이 alt태그를 작성하면 검색엔진이 해당 이미지를 이해하는데 도움을 줄 수 있으며, 이미지 검색결과에 활용할 수 있는 매우 중요한 정보로 간주된다고 합니다.
사용 방법
기존에는 티스토리가 따로 이미지에 alt태그를 달아주는 기능을 지원하지 않아서, 글쓰기 모드를 html모드로 바꾸고, 하나 하나 직접 번거롭게 alt 태그를 입력해줘야 했습니다. 수동으로 계속 입력하다 보니까 아무래도 헷갈리기도 하고 귀찮아서 이걸 글에 있는 이미지의 설명을 바탕으로 자동으로 달아주는 툴을 만들었습니다.
솔직히 전 주로 앱을 만들고, 자바스크립트는 별로 만질일이 없어서 소스가 지저분하거나, 제가 발견하지 못한 오류가 있을 수 있습니다. 그런부분은 댓글로 알려주시면 바로 수정해보도록 하겠습니다.
이 alt 툴의 사용 방법은 간단합니다. 우선 글의 html 코드를 복사하여, 이글로 와서 'html 코드를 입력해주세요.'라고 나와있는 입력칸에 붙여넣기하고 'alt 태그 추가' 버튼을 클릭해주면 됩니다.
작동 원리는 간단하게 설명하면 사진을 클릭하면 나오는 '이미지를 설명해 보세요' 입력칸의 있는 설명글을 바탕으로 alt태그를 만드는 것 입니다. 이미지의 설명이 없으면, alt=""이렇게 빈칸으로 나옵니다.
alt 태그 추가 버튼을 클릭한 모습입니다. f12를 눌러 개발자 모드로 봤을 때 이미지 설명을 바탕으로 alt태그가 생긴걸 확인할 수 있습니다. 이미 alt태그가 존재하면 덮어씌우고, 그룹 이미지로 되어있어도 지원합니다.
이제 이렇게 해서 만들어진 html 코드를 글에다가 붙여넣기 하시면 됩니다.
관련 글
https://github.com/minikupa/tistoryAltTool
minikupa/tistoryAltTool
Contribute to minikupa/tistoryAltTool development by creating an account on GitHub.
github.com
[JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동
자바스크립트 / 티스토리 다른 페이지, 글 또는 개인 도메인 자동 이동
자바스크립트 / 티스토리 다른 페이지, 글 또는 개인 도메인 자동 이동 티스토리나 타 사이트에서 글을 올렸는데 모종의 이유로 그 글을 삭제하고, 새로 글을 올렸거나, 티스토리에 개인 도메인을 추가해줬을 때..
MK
'개발 > JS, 티스토리' 카테고리의 다른 글
티스토리 비 로그인자의 댓글 기본 프로필, 아이콘 바꾸기 (6) | 2020.09.01 |
---|---|
티스토리 애드센스 상단 광고 2개 다는 방법 (26) | 2020.05.11 |
티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴 (13) | 2020.03.14 |
[JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동 (7) | 2020.02.17 |
땅꾸새
2020.03.14 11:39 신고
유용한 정보 감사합니다!
츄츄낙타
2020.03.14 13:29 신고
어렵네요~
α∝∑
2020.06.25 14:04 신고
안녕하세요. 지금은 사용이 안되는건가요? ㅠㅠ 안되네요
워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
2020.08.15 21:57 신고
좋은 툴 감사합니다. 다음에 글 작성할 때 한 번 시도해봐야겠네요.
good
2020.10.13 14:35
코드 복사해서 나온 alt태그 코드(alt="")를 하나하나 다시 이름을 지정해야 되는 건가요? 아님 그냥 알트태크 변환된거(alt="") 이미지이름 적지않고 그대로 발행하면 되나요?
2020.12.06 16:26
비밀댓글입니다
잡헌터
2021.02.10 15:45 신고
포스팅 내에서 직접 실행했었는데 이제 안되고 링크된 파일 다운로드 받아서 실행하니까 작동합니다~ 좋은 툴 공유해주셔서 감사합니다^^