Alt속성과 대체 텍스트는 같은 뜻으로, 업로드한 이미지에 대한 설명이 되겠습니다.
사이트나 블로그에 이미지를 업로드하게 되면은, HTML 형식으로는 아래처럼 표시가 됩니다.
<img src=”이미지파일명” alt=”이미지에 대한 설명“
여기서 alt=”이미지에 대한 설명” 부분이 Alt속성 즉 대체 텍스트가 되겠는데, 업로드한 이미지에 대해 모두 대체 텍스트를 설정해주는 것이 좋다는 것이겠습니다.
특히 워드프레스 블로그를 운영하는 입장에서는 이미지에 대한 대체 텍스트의 설정은 무시할 수 없는 것이니, 대체 텍스트를 설정해야 하는 이유와 설정하는 방법을 이 글에서 확인해보시고, 꼭 설정하는 것을 추천해봅니다.
1. 이미지 대체 텍스트의 역할
이미지에 설정한 대체 텍스트의 역할은 생각보다 중요하겠으며, SEO면에서도 상당히 중요한 역할을 하고 있기에, 모든 이미지에 대해 대체 텍스트를 설정하는 것이 좋겠습니다.
1-1. 검색엔진이 이미지를 이해
검색엔진은 텍스트를 이해할 수 있지만, 이미지를 이해할 수 있는 능력은 아직 많이 부족하겠습니다.
그래서 블로그에 아무리 중요한 이미지를 삽입했더라도, 검색엔진은 이미지를 해석하지 못하기에 블로그 내용에 도움이 되는 효과를 가져다주지 못하는 것이겠습니다.
따라서 이미지에 대체 텍스트를 설정하게 되면은, 검색엔진이 대체 텍스트를 통해 이미지의 내용을 파악하게 되어, 보다 블로그 내용을 더 잘 이해할 수 있게 되는 것이겠습니다.
검색엔진이 블로그 내용을 더 잘 이해하게 되면서, 결국 검색결과에 더 유리하게 노출될 수 있다는 것이겠습니다.
1-2. 이미지 검색결과에 노출
구글, 네이버 등 검색엔진에서 이미지를 검색하게 될 경우, 대체 텍스트에 입력한 내용으로 이미지가 매칭되겠습니다.
위 캡쳐에서 “일본 재입국출입국기록 카드 기입하는 방법“이라는 대체 텍스트를 이미지에 설정한 후, 구글 이미지 검색에서 “일본 재입국출입국기록 카드 기입하는 방법“을 검색하면은, 해당 이미지가 노출된다는 것입니다.
검색엔진의 이미지 검색에 노출이 되다보니, 이미지 검색으로도 방문자 유입이 발생할 수 있다는 것이기에, 대체 텍스트가 직접적인 블로그 유입에 영향을 준다는 것이겠습니다.
아래 또 하나 예를 더 들어보겠습니다.
위스키 가격에 관한 글에 삽입한 이미지에 “히비키 위스키의 소비자권장가격과 되팔이시세“라는 대체 텍스트를 설정 후, 검색키워드 “히비키 위스키의 소비자권장가격과 되팔이시세“로 구글 이미지 탭에서 검색을 하면은, 해당 위스키 가격의 글에 삽입한 모든 이미지가 다 노출되고 있습니다.
즉 대체 텍스트는 검색엔진의 이미지 검색에서 키워드 역할을 하고 있어, 꼭 설정하는 것이 좋다는 것이겠습니다.
1-3. 이미지가 표시되지 않을 때 대체 텍스트가 표시
블로그에 업로드한 이미지는 인터넷 환경 또는 설정 등의 문제로, 이미지가 제대로 표시되지 않을 경우가 있겠습니다.
이미지가 표시되지 않게 되면은, 방문자들은 어떤 내용의 이미지인지 전혀 파악이 되지 않고, 블로그 내용을 이해하는데 지장이 있을 수 있겠습니다. 만약 이미지에 대체 텍스트를 설정했다면은, 이미지가 표시되지 않을 경우 대체 텍스트가 표시되기에, 이미지가 보이지 않더라도 블로그의 내용을 이해할 수 있게 되는 것이겠습니다.
1-4. 텍스트 음성변환 기능에 도움
블로그 방문자가 스크린 리더 또는 웹페이지 텍스트를 음성변환으로 읽어주는 기능을 이용할 경우, 대체 텍스트가 설정되어 있지 않은 이미지는 파일명을 읽어주게 되겠습니다.
이미지의 파일명보다는 역시 대체 텍스트가 더 친절하고 이해하기 쉽기에, 대체 텍스트를 설정해주는 것이 좋겠습니다.
1-5. 네이버에서 대체 텍스트 체크
네이버 웹마스터도구에서 이미지에 대해 대체 텍스트가 설정되어 있는지 체크를 하고 있는데, 그만큼 대체 텍스트가 중요하다는 것이겠고, 설정해주지 않을 경우 경고 메시지처럼 계속 남아있게 되겠습니다.
이상의 5가지 이유로 업로드한 이미지에 대체 텍스트를 설정하는 것이 꼭 필요하다는 것이겠고, 워드프레스에서 대체 텍스트를 설정하는 방법은 아래 계속 이어가겠습니다.
2. 대체 텍스트 설정하는 방법
워드프레스에서 대체 텍스트의 설정은 미디어 라이브러리와 글 편집에서 진행할 수 있는데 서로 다른 용도가 되겠습니다.
미디어 라이브러리
이미지에 디폴트 대체 텍스트의 설정
글 편집
실제로 반영되는 대체 텍스트
두가지 용도에 대해 자세히 알아보겠습니다.
2-1. 미디어 라이브러리->대체 텍스트
미디어 라이브러리에서 이미지를 선택하면, 오른쪽에 대체 텍스트가 보이겠는데, 여기에 입력한 대체 텍스트는 이미지에 설정하는 디폴트 대체 텍스트로, 글을 작성할 때 라이브러리에서 이미지를 선택할 경우 자동으로 대체 텍스트가 삽입이 되는 것이겠습니다.
즉 글에서 먼저 이미지를 삽입하고, 나중에 미디어 라이브러리에서 대체 텍스트를 설정하게 될 경우, 해당 글의 해당 이미지에 대체 텍스트가 설정되지 않는다는 것입니다.
2-2. 글 편집->블록->대체 텍스트
글 편집->블록 항목에 대체 텍스트를 설정하는 곳이 있는데, 여기서 설정한 대체 텍스트가 실제로 적용되는 alt 속성이 되는 것이겠습니다.
미디어 라이브러리에서 대체 텍스트를 설정했더라도, 여기의 대체 텍스트가 공란으로 되어 있다면, 결국 alt 속성이 누락되는 현상이 발생한다는 것입니다.
따라서 양쪽의 대체 텍스트 모두 입력해주는 것을 추천합니다.
실제로 미디어 라이브러리의 대체 텍스트만 설정할 경우, 아래 글에서처럼 네이버 웹마스터도구에서 alt 속성 누락문제가 발생하게 됩니다.
3. 대체 텍스트에 입력해야 할 내용
이미지에 대해 대체 텍스트를 설정하는 것은, 블로그 글의 제목을 짓는 것과 같은 로직으로 생각하면서, 문구를 정하면 되겠습니다.
3-1. 검색키워드로 문구 작성
블로그 글이 검색엔진에 더 잘 노출되게끔 하기 위해, 우리는 검색키워드를 조합하면서, 또한 직접 구글에서 관련된 글을 검색해보면서 글의 제목을 짓게 되겠습니다.
그 이유는 글 제목이 검색엔진에 노출되는 것을 직접적으로 영향을 주고 있기 때문인데, 검색엔진의 이미지 탭에 우리의 이미지를 노출되기 위해서도 똑같은 원리로 대체 텍스트를 설정해주는 것이 필요하겠습니다.
그래서, 글 제목을 짓는 방법으로 이미지의 대체 텍스트도 똑같은 원리로 지어주면 되겠는데, 글 제목은 글 내용의 전반적인 뜻을 농축한 것이고, 이미지의 대체 텍스트는 그 이미지의 전반적인 내용을 농축한 것이 된다는 것이겠습니다.
그래도 잘 모르겠다면, 구글에서 다른 사람들이 글 제목을 어떻게 짓고 있는지 많이 검색해보면서 배우면 되겠습니다.
3-2. 키워드만 잔뜩 넣는 것은 역효과
제목을 지을 때도, 검색키워드를 가능한 많이 사용하고자 하지만, 키워드들만 잔뜩 나열해놓는 노출순위가 높은 글은 보지 못했을 것입니다.
검색엔진에서 키워드들만 잔뜩 나열한 것을 좋아하지 않는다는 것인데, 대체 텍스트도 똑같게 키워드들만 나열하는 것은 좋지 않고, 문장으로 만들어주어야 하겠습니다.
3-3. 공백보다 글 제목
가능한 모든 이미지에 대체 텍스트를 설정하는 것을 추천하지만, 의미가 없는 장식용 이미지일 경우 대체 텍스트를 공백으로 설정해두어도 좋다고 구글에서도 얘기하고 있기에, 공백으로 설정하는 것도 문제가 없겠습니다.
다만, 이미지가 검색엔진의 이미지 탭에 노출될 때, 블로그의 제목도 같이 노출해주기에, 의미가 없는 장식용 이미지이더라도 블로그 내용과 관련된 설명을 설정해줌으로 인해, 어느 정도 유입을 늘릴 수 있지 않나 생각해봅니다.
또한 네이버 웹마스터도구에서 대체 텍스트를 공백으로 설정한 것도 알림을 해주고 있어, 무언가를 설정해놓는 것이 보다 더 깔끔해지기도 하겠습니다.
4. 대체 텍스트 설정없음과 공백의 차이
대체 텍스트를 설정하지 않았다는 것과 대체 텍스트를 공백으로 설정했다는 것은 완전 다른 뜻이 되겠습니다.
대체 텍스트를 설정하지 않음
<img src=”이미지파일명”
대체 텍스트를 공백으로 설정
<img src=”이미지파일명” alt=””
대체 텍스트를 설정하지 않았다는 것은 alt= 문구자체가 없다는 뜻이고, 대체 텍스트를 공백으로 설정했다는 것은 alt=””로, “” 안에 아무것도 입력하지 않았다는 뜻이 되겠습니다.
대체 텍스트를 공백으로 설정하는 것은 문제가 없으나, 대체 텍스트를 설정하지 않는 것은 좋지 않다는 것이겠습니다.
워드프레스에서 대체 텍스트를 공백으로 설정하는 것보다, 아무것이라도 입력해놓는 것이 훨씬 더 편리하기에, 의미가 없는 이미지더라도 설명을 설정해놓는 것을 추천해봅니다.
5. 마무리
이미지에 대체 텍스트를 설정하는 것은, 검색엔진이 블로그 내용을 보다 더 잘 이해하게 되고, 검색엔진의 이미지탭에 노출될 때 키워드로 사용될 수 있겠습니다.
그래서 이미지에 대체 텍스트를 꼭 설정하는 것이 좋으며, 대체 텍스트는 글제목을 짓는 로직으로, 이미지의 전반적인 내용을 농축하여 문구로 표현해주면 되겠습니다.
의미가 없는 장식용 이미지일 경우 대체 텍스트를 공백으로 설정해도 된다고 구글에서도 얘기하고 있지만, 이미지는 검색엔진의 이미지탭에 노출되는데, 이미지를 통해 블로그에로 유입을 발생시킬 수도 있기에, 의미가 없는 장식용 이미지이더라도 무언가 설명을 추가해주는 것이 좋다고 봅니다.
댓글