신에디터에서 alt 속성 추가하는 방법

티스토리 신에디터에서 이미지 태그에 alt 속성 추가하는 방법에 대해 알아보도록 하겠습니다. 구에디터와 달리 alt 속성을 입력하는 부분이 없는데 어떻게 입력해야하는지 그리고 왜 alt 속성을 입력해야하는지도 살펴볼게요.

티스토리 블로그 신에디터에서 alt 속성 추가하는 방법

블로그를 운영하다보면 글에서 이미지 파일을 넣고나면 꼭 alt 속성을 추가하라는 말을 들어보셨을거에요. 그렇다면 alt는 무엇일까요?

▶ alt 속성이란?

alt는 alternative(뜻:대체 가능한, 대안이 되는)의 약자로 이미지 사진이 네트워크 문제 등으로 사진파일 불러오기 오류가 발생했을 때 이 이미지를 설명해주는 대체 설명글(대체 텍스트)입니다.

또한 이 대체 언어는 시각 장애인들을 위한 것이기도 해요. 사진을 보기 어려운 분들을 위해 사진 대신 글로 설명해주어 그게 어떤 사진인지 가늠해 볼 수 있게하는 역할이기도 합니다.

◾ 이미지 태그에 alt 속성을 넣어야하는 이유는 무엇일까요?

간단하게 한마디로 정리하면 각종 검색엔진 특히 구글이나 빙에서 검색이 잘 되기 위해서에요.

alt 속성은 사회적 약자에 대한 시스템(barrier-free system)의 일종으로 구글이나 마이크로소프트와 같은 글로벌 대기업들은 사회적 기여 및 제도 등의 이유로 기업이 갖추어야하는 체계이기도 합니다.

때문에 이 alt 속성을 넣은 블로그들은 글을 발행할때 구글, 빙, 네이버, 다음 등 각 검색엔진의 로봇(bot)이 웹페이지를 수집할 때 이 alt 속성을 넣은 블로그에 높은 점수를 주어 SEO(검색엔진최적화) 알고리즘에 알맞다고 평가할 가능성이 높아지는 것이죠.

그러니 번거롭더라도 태그에 alt 속성을 꼼꼼히 넣어주어야 각종 검색엔진 SEO에 높은 점수를 받아 내 블로그 글이 상위노출할 가능성이 높아진다고 할 수 있습니다.

예시

alt 속성을 적지않으면 빙 웹마스터도구에서 ' 태그에 alt 속성 내용이 정의되지 않았습니다.'라고 뜰거에요. 이렇게 오류 수가 많아지면 빙에서 검색이 안되는 상황이 발생할 수도 있어요. 빙에서 유입되는 수는 타 사이트보다는 적지만 이렇게되면 힘들여서 빙 웹마스터도구에 등록해서 블로그 최적화 한 의미가 없어지잖아요. 그렇지 않기 위해서라도 꼭 넣어주어야합니다.

👉빙 웹마스터도구 등록방법 바로가기

그럼 alt 속성의 중요성을 알아보았으니 이제 alt 속성을 추가하는 방법을 알아보도록 해요.

1. 신에디터 글쓰기에서 HTML 모드 선택하기

2. 태그에 alt 속성 추가하기

data-filename="그림1.png" 뒤에 alt="이미지 설명글"을 넣어주세요.

data-filename="이미지 파일명" 뒤에 alt="이미지 대체 설명 내용"을 넣어주세요

위 사진을 보시면 노란색으로 표시한 부분이 제가 alt 속성을 추가한 부분입니다.

alt 속성은 태그 내 어느 곳이든 추가해주기만 하면 돼요. 하지만 저는 data-filename=" " 뒤에 추가한 이미지의 파일명이라 어떤 사진인지 구분이 편해서 위처럼 그 바로 뒤에 alt 속성을 넣어주고 있어요.

◾ 이미지 하단에 설명부분은 alt 속성일까?

신에디터에서 사진 첨부 예

신에디터에서 사진파일을 넣고 이미지 사진에 마우스를 갖다대면 위 사진처럼 하단에 '이미지를 설명해 보세요'라는 문구로 적힌 부분이 있을거에요. 어떤 분은 '이 부분이 신에디터에서 alt 대체다.'라고 생각하시는 분이 있는데 이것은 alt 속성 대체는 아니고 구에디터의 자막 부분입니다.

때문에 저 이미지 설명글을 넣더라도 HTML 모드로 들어가서 꼭 alt를 손수 넣어주어야 합니다.

728x90

반응형

from http://plugin-b.tistory.com/50 by ccl(A) rewrite - 2021-02-20 22:26:26