글을 작성할 때 사진을 첨부하는 것이 방문자의 체류율을 높이고, 글을 읽고 이해하는데 도움이 됩니다. 블로그의 가독성을 높이기 위해 글 사이사이에 사진을 첨부하며 포스팅을 작성하게 됩니다. 그동안 저는 사진을 첨부할 때 alt 태그 없이 작성을 하였습니다. 하지만 그렇게 html 태그 화면에서 사진 설명이 없으므로 구글 로봇은 이를 해석하지 못합니다. 그래서 사진을 넣는 것에 그치지 말고 반드시 사진의 설명, alt 태그를 입력해 주어야 합니다. 구글, 네이버 등의 포털 검색엔진은 검색엔진에게 최적화된, 즉 SEO(Seart Engine Optimization)가 적용된 포스팅 글을 최우선적으로 노출을 합니다.
목 차
alt 태그란?
alt 태그는 HTML에서 이미지 태그에 사용되는 속성입니다. 그림이 렌더링 되지 못할때에 나타낼 문자열을 지정하기 위한 값입니다. 시각장애인을 위해 문서의 내용을 목소리로 변화해 주는 Software(TTS, Text to Speech)에서 활용되기도 합니다. 검색 엔진은 그림 사진 이미지에 대한 정보를 그림 자체로는 이해할 수 없기 때문에, alt 속성 정보를 읽고 수집합니다.
<img sec="주소" art="그림/>
HTML에서 img 태그는 위와 같이 사용됩니다. alt 속성이 추가된 것을 알 수 있습니다. 이미지가 어떤 정보를 가지고 있는 것을 넣어준다면 검색엔진 최적화에 엄청나게 유리합니다.
예전에는 이미지 태그를 입력하는 것이 html 편집화면에서 직접 입력 수정하거나, 변환 프로그램을 이용해야 하는 등 불편한 점이 많았습니다만, 이제는 티스토리 블로그 에디터 창에서 간단하게 alt 속성을 이미지에 추가할 수 있어 정말 편리하게 되었습니다.
alt 태그 예시
그렇다면 alt 태그가 어떻게 웹페이지 화면에서 나타나는지 알아보도록 하겠습니다. 제가 운영하고 있는 티스토리 블로그의 페이지 소스보기 예입니다. 자신이 원하는 웹페이지에서 맥 운영체제 기준으로 CMD + Shift + C 단축키를 누르면 소스보기 화면이 나옵니다. 원하는 이미지에 마우스를 가져다 대면 우측에 html 모드에서 이미지의 태그 구성을 볼 수 있습니다.
▲ 위 그림을 보시면 이미지의 html을 이해하실 수 있으실 겁니다. 포스팅에 이미지는 <figure> 태그로 시작하고 </figure>끝납니다. figure 태그 안의 내용을 분석하면 어느 정도 이해할 수 있습니다. 안에 img src 태그, alt 태그가 있습니다. 그림처럼 alt 속성 설명을 이미지에 달아주면 html 코드에도 나타나는 것을 알 수 있습니다.
alt 속성 태그 추가 방법
티스토리 블로그는 에디터에서 손쉽게 alt 속성을 추가할 수가 있습니다.
▲ 이미지를 선택하면, 위 그림처럼 상단에 아이콘에 생깁니다. 여러개의 아이콘 중 맨 우측의 '대체 텍스트 삽입' 설정 아이콘을 선택하면 이미지 속성 태그를 입력할 수 있는 창이 나타납니다. 이미지 설명을 넣고 확인을 눌러주세요.
대체 텍스트를 입력할 때 위와 같이 입력해도 되지만, 띄어 쓰기를 하는 대신 하이픈(-) 혹은 언더바(_)를 하는 것이 좋습니다. html 코딩에서는 띄어쓰기는 지양하는 것이 좋다고 합니다. <이미지-alt-태그-설명> 보다는 <이미지-alt-태그-설명> 이렇게 입력하시면 되겠죠?
매번 이미지를 삽입할 때마다 이런 alt 속성 태그를 입력하는 것이 귀찮을 수 있습니다만, 그래도 입력하는 것이 검색 최적화에 도움이 되므로 포스팅할 때마다 넣어주시는 것이 좋을 듯합니다.
또한, 그림 하단에 이미지 설명 입력창에도 이미지 설명을 동시에 넣어주시구요. 이미지를 저장하실 때도 이미지 이름을 지정해주시고, 이런 그림 파일을 삽입하는 것이 좋습니다. html 코딩에 이미지 파일 이름도 들어가기 때문에 검색 최적화에 유리합니다.
종합해보면, alt 태그는 시각장애인을 위한 사진에 대한 정보를 얻을 수 있도록 하는 기능이고, 구글 및 네이버는 이러한 alt 태그가 포함된 문서를 좋은 글이라고 판단하고 검색 시 상단에 노출시켜 줍니다. 따라서 이미지를 업로드할 때에는 반드시 alt 태그를 넣어주세요.
'수익형 블로그 만들기 > 티스토리' 카테고리의 다른 글
| 수익형 블로그 티스토리 다음(Daum) 저품질 방지 및 최적화 방법 (0) | 2022.12.06 |
|---|---|
| [티스토리 블로그 만들기] 비실명 지메일-카카오계정으로 회원 가입 방법 (0) | 2022.12.05 |
| 티스토리 포스팅 글 작성 날짜 시간 업데이트 방법 (0) | 2022.11.27 |
| 티스토리 네이버 나눔스퀘어네오 폰트 적용하는 방법 (0) | 2022.11.27 |
| 티스토리 에디터 제목1~제목3(H태그)와 본문1~본문3 문단 모양 작성 방법(구글 SEO) (0) | 2022.11.24 |
| 티스토리 블로그 북클럽 스킨 목차 자동으로 넣기 (0) | 2022.11.23 |
| 티스토리 북클럽 스킨(뉴북) 썸네일 정사각형으로 변경하기 (1) | 2022.11.22 |
| '빠르고 가독성 있는' 티스토리 북클럽 스킨 초기 세팅 최적화 방법 (0) | 2022.11.22 |
댓글