[블로그] 티스토리 사진 삽입시 알트 태그(alt tag) 쉽게 넣는 방법

안녕하세요, 리뷰당입니다. 블로그당 메뉴 첫글을 작성하게 되었네요.
이번 포스팅에서는 "티스토리에서 알트 태그를 쉽게 넣는 방법" 이 있다고 해서 알아보았습니다.

티스토리에서 쉽게 알트 태그를 넣는 방법은  21년 11월 티스토리 업데이트 이후 적용되었다고 하네요. 이전에는 HTML 화면에서 소스를 일일이 변경해줘야 했기 때문에 HTML 이 익숙하지 않으신 분들께서는 굉장히 까다로운 작업이었다고 생각됩니다. (이전 블로그를 하셨던 분들의 노고는 정말 감탄스러울 정도네요. 대단합니다^^) 그럼 티스토리에서 알트 태그 넣는 방법에 대해서 배워보도록 하겠습니다.

 

1. 알트 태그란 무엇 인가?

구글에서 시각 장애인들이 Web 이용 시 그림을 시각으로 볼 수 없기 때문에 글/음성으로 인식할 수 있도록 이미지를 대체하는 텍스트를 말합니다. 그리고, 사진이 안 뜨는 상황에서 이미지에 대한 대체하는 텍스트를 통해 이를 유추할 수 있게끔 만들어 놓은 HTML 구조라고 이해하시면 될 것 같습니다.

 

구글에서 시각장애인들의 편의를 위해 사진에 알트 태그 등록하는 것을 장려하고 있기 때문에 알트 태그가 있는 문서들은 검색 상위 노출의 가능성이 높아진다고 합니다. 그래서 사진에 알트 태그 등록에 신경 써줘야 할 부분이기에 꼭 알아두셔야 되겠죠?

 

2. 알트 태그 넣는 방법 

그럼 이미지에 알트 태그 넣는 방법에 대해 설명드리고자 합니다. 

정말 간단히 태그를 입력할 수 있기 때문에 잘 따라와 주세요!

 

▼ 일단 넣고자 하는 이미지 삽입합니다. 글쓰기의 상단 메뉴에 [첨부] - [사진]에 들어가 주시면 되겠습니다.

 

넣고자 하는 이미지

 

▼ 삽입한 이미지를 마우스로 클릭하게 되면 이미지 위에 메뉴바를 확인하실 수 있을 것입니다. 

 

▼ 이미지 상단바의 맨 오른쪽 아이콘을 클릭하면 아래와 같이 텍스트 입력창이 나타나는데요. 여기에 이미지를 대체할 텍스트를 기입해주시면 이미지의 알트 태그가 입력되는 것입니다. 저는 예시로 아래와 같이 기입해보았습니다. 이제 알트 태그를 입력했으니 제대로 되었는지 결과 확인이 필요하겠지요. 

 

3. 알트 태그 입력 확인

 

▼ 텍스트 입력을 완료하였으면 확인을 해봐야 합니다. 제대로 이미지에 알트 태그가 입력되었는지. 

글쓰기 창 상단 메뉴의 맨 우측에 [기본 모드] > [HTML]으로 변경해주세요.

 

▼ HTML 환경에서 작성된 글의 코드를 확인할 수 있습니다. 저희가 입력한 이미지에 대한 코드 부분을 확인하여 보시면, 아래와 같이 "alt":"알트 태그 내용" 이 부분이 제대로 생성되어 있음을 확인할 수 있습니다. 이렇게 이미지를 대체 택스트로 인식을 하는 것이지요. 알트 태그 입력 정말 간단하지요?

 

4. 정리

설명해드린 방식을 보시면 정말 간단하게 이미지에 알트 태그를 입력할 수 있음을 확인하였습니다. 저 같은 경우도 이렇게 할 수 있다는 사실을 알고 간단하게 입력을 꼭 해줍니다. 알아본 바로는 구글 SEO에서도 이미지에 알트 태그 입력을 권장하고 있음을 확인하였는데요, 티스토리 블로그를 운영하는 블로거의 입장에서 무시할 수 없는 부분인 것 같습니다. 티스토리의 업데이트 이전에는 HTML 환경에서 일일이 적어줘야 했기 때문에 귀찮아도 정말 감사하는 마음으로 입력할 수 있을 것 같습니다.

 

그럼 이번 포스팅은 마무리하며 끝까지 글 읽어주셔서 감사합니다.