구글 SEO에 유리한 티스토리 이미지에 alt 태그 넣기

블로그를 시작하면서 누구나 내 글이 검색이 잘 되고 이왕이면 상위노출이 되길 바랄 것이다.
나 또한 그렇기에 구글 SEO 최적화에 신경을 쓰고 있다.
'이미지에 alt 태그 넣기'처럼 어렵지 않게 할 수 있는 일들은 검색엔진 최적화를 위해 바로 실행하도록 하자.

alt 태그란 무엇인가?

대체 텍스트라고도 불리는 alt 태그는 HTML의 이미지 태그에 쓰이는데 정확한 명칭은 alt 속성이다.

웹에서는 로딩 속도가 느리거나 렌더링 오류로 이미지가 보이지 않을 때 이미지를 대체해서 텍스트만 보여준다.

그리고 구글을 포함한 많은 검색 엔진들은 alt 태그를 읽어 이미지에 대한 정보를 얻는다. 검색엔진봇들은 사람과 달리 이미지를 시각적으로 해석할 수 없으니 우리가 적은 대체 텍스트를 읽어 정보 파악을 하는 것이다.

또한 스크린 리더라고 시각장애인을 위한 텍스트를 음성으로 들려주는 프로그램에서도 사용된다. 시각장애인 역시 이미지를 볼 수가 없으니 alt 태그를 통해 이미지에 대한 설명을 음성으로 듣게 되는 것이다.
alt 태그는 이런 점에서 검색 엔진 최적화뿐만 아니라 웹 접근성에도 좋은 영향을 준다.

귀찮은데 이미지에 alt 태그를 꼭 넣어야 하나?

필수는 아니고 선택이다. 이미지에 alt 태그를 넣지 않아도 상위 노출이 가능했다는 블로거들도 있으니.

하지만 구글 서치 콘솔에서 검색 엔진 최적화 검사를 해보면 이미지 요소에 alt 속성이 있고 없고에 따라 점수가 달라진다.

물론, 큰 점수 차이는 아니지만 검색 엔진에게 내 웹페이지에 대한 쉽고 빠른 정보를 제공하고 웹 접근성도 높여 구글 SEO 최적화에 좋은 점수를 준다는데 알고도 귀찮다고 안 할 이유는 없지 않을까 싶다.

실제로 alt 태그가 없던 이미지에 alt 태그를 넣어주니 구글 서치 콘솔의 평균 게재 순위와 구글 검색 순위가 소폭이지만 상승한 걸 경험했다.

예시 ) 구글 이미지 검색 결과에 노출된 비타민트의 포스팅 이미지

또한 단순히 구글 첫 페이지에는 포스팅 글만 노출이 되는 것이 아니라 이미지 또한 검색결과에 노출이 된다. 이미지 검색에서도 alt 태그는 유리하다. 위에 예시 이미지를 보면 다른 글보다 상대적으로 최신글인데도 구글 이미지 검색결과에 꽤 상위에 노출되는 모습을 볼 수 있다.

티스토리에서 alt 태그 넣는 방법

HTML 모드로 들어가 직접 alt 태그를 넣어도 되지만, 티스토리 글쓰기에서 간단하게 넣는 방법이 있다.

1. 글쓰기에서 이미지 파일을 불러오면 자동으로 이미지가 선택되며 위와 같이 선택 툴바가 생긴다. 이미지가 선택됐다는 걸 보여주는 검은 박스선과 선택툴바가 보이지 않는다면 다시 이미지를 클릭해 주면 된다.

2. 툴바에서 오른쪽 끝에 보이는 톱니바퀴 모양을 누르면 대체 텍스트를 입력할 수 있다. 입력 후에는 확인을 눌러주자. 나는 확인을 안 눌러서 alt 태그가 누락된 실수가 있었다.

위에 이미지를 보면 나의 경우 띄어쓰기 공백에 하이픈(-)을 넣어준 것이 보일 것이다. 이 또한 필수는 아니고 선택이다. 그냥 편하게 하이픈 없이 입력해도 된다는 의견과 하이픈을 넣어주는 게 좋다는 의견으로 갈리는데 나는 넣어주는 쪽을 택했다.

영어의 경우 굳이 넣을 필요 없지만 검색 엔진 봇이 한국어를 해석할 때 오류 없이 하도록 돕는다고 한다. 공백마다 하이픈만 더 넣어주는 게 뭐 어려운 일은 아니니까 그냥 넣어준다.

3. alt 태그와 캡션은 다르다. 위 이미지의 노란 부분을 보면 "이미지를 설명해 보세요"라고 되어있는데 이 부분은 캡션을 입력할 수 있는 부분으로 글자 부분을 클릭해서 작성하면 된다.
처음에 나는 캡션 부분을 입력하면 alt 태그가 만들어지는 줄 알았다. 그런데 의외로 나와 같이 혼동을 하는 사람들이 꽤 있더라.

캡션은 이미지 아래에 표시되며 이미지에 대한 추가 정보나 상세정보를 적어 글을 읽는 사람에게 추가정보를 주고 이미지의 이해를 돕는 역할을 한다. 나는 출처를 밝힐 때나 이해를 돕는 설명이 꼭 필요할 때 주로 활용한다.

alt 태그와 캡션이 엄연히 다르다는 것은 기본모드 말고 HTML 모드로 들어가 보면 확인이 가능하다.

위 이미지에서 보면 알 수 있듯이 alt 태그와 캡션은 따로 구분이 된다.

파일명은 우리가 이미지를 저장할 때 지정한 이름인데 나는 파일명을 적을 때 그냥 alt 태그 내용을 입력해 버리고 alt 태그 입력란에는 파일명을 복사해서 붙여 넣기를 한다. 나중에 혹시 이미지에 alt 태그를 누락했다 하더라도 파일명을 복사해서 붙여 넣기만 하면 되니까 이래저래 편해서 그렇게 하고 있다.

파일명과 alt 태그를 동시에 쓰려다 보니 아무래도 대체 텍스트를 더욱 간결하면서도 핵심적인 설명만 적으려고 노력 중이다.

alt 태그 작성하는 Tip

구체적이고 서술적이지만 간결하게 작성한다.

어떻게 구체적으로 자세히 설명하는데 간결하라는 거지? 나 또한 어렵게 느껴졌다.
그래서 나는 시각장애인에게 이미지에 대한 설명을 한다고 생각하면서 alt 태그를 작성한다.
설명이 충분한 건 좋은데 불필요한 설명까지 더하지는 말자는 거다. 내용 전달만 되면 충분하다.

이미지나 사진, 그림이라는 중복단어는 불필요하다.

다른 정보들로 이미 충분히 검색엔진봇은 이것이 이미지라는 걸 잘 알고 있는데 설명글에 중복적으로 넣을 필요가 없다는 거다.

키워드 스터핑에 주의하자!

이미지 검색 결과에 유리하도록 키워드를 자연스럽게 녹여내서 설명하는 건 좋은데 키워드만을 과도하게 나열하는 것은 키워드 스터핑으로 검색 엔진 최적화에 오히려 악영향을 끼친다.

# 우유를 마시는 어린이 이미지에 '우유'라는 키워드를 넣고 싶을 때를 예를 들어보자.

- 키워드만 나열한 안 좋은 예
"alt":"우유-딸기우유-바나나우유-초콜릿우유-멸균우유-우유효능"
- 서술적으로 설명한 좋은 예
"alt":"유리컵에-든-하얀-우유를-마시는-사랑스러운-여자-어린이"

alt 태그 넣기는 어렵지는 않지만 번거롭기는 하다. 하지만 조금 귀찮아도 이미지에 alt 태그를 넣는 습관을 들인다면 작은 차이로 긍정적인 결과를 얻을 수 있을 거라 생각한다.