안녕하세요. 오픈타임 입니다. alt 태그란 검색 엔진 최적화를 알아 보면, 한번쯤은 접했을 단어 입니다. 이번 포스팅에선 alt 태그 (img alt)에 대해 다뤄보겠습니다.
이 글을 보면, alt 속성을 알아보며, 적용하는 법까지 이해가 될 것입니다.
Alt 태그( 이미지 태그 )란 어떤건가?
Alt 태그는 대체 텍스트(Alternative text)라는 의미를 가지고 있습니다. 웹페이지에 삽입된 이미지가 어떤 내용인지 검색 엔진에게 설명하는 역할을 합니다. 이미지가 어떤 이유 떄문에 로딩 되지 않거나, 또는 시각 장애인이 스크린 리더를 사용할 때 이런 im alt 태그의 내용이 보여지게 됩니다.
alt 태그( 이미지 태그 ) 는 이미지의 정보를 검색 엔진과 사용자가 쉽게 이해할 수 있게 도와주는 html 코드입니다. 코드는 아래와 같습니다.
<img src="이미지URL" alt="이미지를 설명하는 대체 텍스트">확인을 원하는 웹페이지에서 F12(개발자 모드) 를 켠 후 cltl + F(찾기) 를 누른 후 ‘img’ 를 검색하면 확인 할 수 있습니다.
이미지에 img alt 를 사용하는 이유는??
이미지에 alt 속성을 사용하는 이유는 2가지로 나눌 수 있습니다.
- 웹 접근성 향상
- SEO
1. 웹 접근성 향상
alt 태그는 시각적인 애용을 전달하며, 스크린 리더를 사용자들의 이미지에 내용을 설명해줍니다. 페이지를 로딩하는 도중 인터넷 연결이 끊기던가, 서버가 문제가 생길 경우 이미지의 대체 설명을 해줌으로써 웹 접근성을 향상할 수 있습니다.
2. 검색 엔진 최적화
사실 이 글을 보는 이유일 것입니다. 검색 엔진은 html 구조로 웹페이지를 이해하며 정보를 수집합니다. 인간은 이미지를 완벽하게 이해할 수 있지만 검색 엔진은 형태로써 인식을 합니다.
그런 검색 엔진에게 이런 이미지에 대한 설명을 해주면 이해하기 쉬울 것입니다. 검색 엔진에게 정보 수집이 쉽게 하므로 alt 태그를 사용하는 것은 검색 엔진에 도움을 주는 것이죠. 또한 이미지 검색 결과에 노출이 될 수 있기 때문에 한개의 트래픽이 아쉬운 이때, 이런 트래픽을 유도할 수 있습니다.
HTML img alt 추가하는 방법
HTML에서 이미지에 alt 태그를 추가하는 방법은 간단합니다. 아래의 기본 구조를 살펴봅시다.
<img src="이미지URL" alt="이미지를 설명하는 대체 텍스트">
이미지 URL은 이미지의 주소 경로를 입력하면 되고, 이미지를 설명하는 대체 텍스트 란에 이미지의 대체 텍스트를 적용하면 됩니다.
예를 들어, 밥잘먹는 아내라는 설명을 추가하고 싶다면, 다음과 같이 alt 태그를 추가할 수 있을 것입니다.
<img src="wife.jpg" alt="밥잘먹는 아내">
이런 식으로, 웹 페이지의 각 이미지에 대해 잘 설명하는 alt 태그를 작성하면 웹 접근성을 높이고, 검색 엔진 최적화에도 큰 도움이 됩니다.
워드프레스를 사용하시는 경우, 이미지를 업로드 한 후 대체 텍스트를 글 작성 창에서 쉽게 설정할 수 있습니다.
웹사이트에 alt 태그가 적용 되었는지 확인하기
하나하나 위와 같은 개발자 도구에서 확인할 수 있습니다. 하지만 이는 대규모 웹사이트에선 시간이 많이 소요 되므로 크롬 확장 프로그램 SEO META in 1 CLICK를 통해 쉽게 확인할 수 있습니다.
1. 크롬 웹스토어에서 SEO META in 1 CLICK를 다운로드 합니다.
2. alt 태그를 확인 하고 싶은 페이지를 찾아서 크롬창 오른쪽 위의 확장 프로그램을 누른 뒤 ‘IMAGES’ 로 가서 ‘with ALT’ 를 확인합니다.
3. alt 태그가 적용 안된 페이지의 이미지를 수정해줍니다.
정말 간단하게 alt 태그에 대해 알아보았습니다. 검색 엔진 최적화를 하시는 분들은 위의 확장 프로그램을 통해 쉽게 확인한 후 적용해보시길 바랍니다.
긴 글 읽어주셔서 감사합니다. 🙂
함께 읽으면 좋은 글 : 구글 상위노출 10가지 방법, 1페이지에 랭크 되고 싶은 분만 보세요