이미지의 검색노출을 높이기 위한 Alt태그와 Title태그 활용법

이 글을 쓰기에 앞서, 이미지들을 제대로 활용하기 위해서는 위 두 가지 태그를 꼭 사용해주는 것이 좋다. 사용방법은 매우 간단하다. 위의 속성과 키워드를 작성해서 이미지를 업로드하면 되는데, 이미 올라간 이미지라면 개발자 도구를 통해서 태그를 넣어주거나 HTML 편집을 통해서 넣어주면 된다.

워드프레스의 경우에는 자동으로 Alt태그와 Title태그를 넣어주는 플러그인이 있어서 매우 간편하지만, 티스토리의 경우에는 대부분 직접 작성해야만 한다. 프로그램을 조금 다룰 줄 알거나 코드를 전문적으로 다루게 된다면 다른 방법으로 쉽게 해결할 수 있겠지만, 그전까지는 직접 작성해야만 한다.

이미지를 입력하면 이미지 태그와 함께 이미지의 주소 경로가 HTML에 작성된다. 대부분은 이 두 가지를 크게 신경 쓰지는 않지만, 매우 중요한 요소임에는 틀림이 없다. 특히, 구글 검색엔진에서 이미지 검색을 많이 하는 사람들에게 직접적인 노출로 이어질 수 있기 때문에 노칠 수 없는 요소이다.

특히, 이미지 태그에 Alt태그와 Title태그를 적용하는 것은 검색엔진 최적화(SEO)에 있어서도 매우 중요한 것임은 틀림이 없다. 그리고 나의 경우에는 검색엔진을 웹마스터 도구에 사이트를 등록시켜 적극적으로 노출이 되는 것을 실시간으로 확인하고 있기 때문에 이미지의 경우에도 이미지를 통해서 트래픽이 발생했는지를 확인하고 있다. 실제로도 이미지를 통해서 접속 유입이 많이 생기기 때문에 이미지를 소홀히 할 수 없는 것이다.

워드프레스나 자체 문서를 통해서 사이트나 블로그를 운영하는 사람들에게는 이미지를 최적화시키는 것이 매우 까다롭고 여간 귀찮은 것이 아니다. 나의 경우에는 처음에 워드프레스를 운영했을 때, 이미지 최적화 때문에 많은 시간과 노력을 투자할 수밖에 없었다. 이미지 용량이 크면 압축을 시켜주거나 사이즈를 줄여서 트래픽 과부하를 막아야 했고, 동시에 이미지 화질이 선명하게 표시되도록 해야 했기 때문이다. 그렇게 하기 위해서는 전반적으로 이미지에 대한 이해도가 있어야만 했다. 그리고 CDN을 통해 이미지를 압축시킬 때는 그 원리마저도 새롭게 배워야만 했으니 말이다.

이미지의 Alt 태그와 Title 태그

Alt태그와 Title태그는 이미지를 설명해주는 중요한 요소다. 이미지를 텍스트로 설명하기 위한 요소라고 할 수 있다. Alt태그의 경우 '대체 문구'라 하여, alternative text의 줄임말로 사용이 되고 있다. Alt태그는 시각장애인들에게 유용하기 때문에 이를 위해서도 웹 표준에서 권장하고 있는 요소 이기도하다. 인터넷을 사용하는 데 있어 누구나 공평하고 자유롭게 인터넷을 활용할 수 있어야만 하기 때문이다. 시각장애인들에게 지금 어떤 콘텐츠를 보고 있는지 설명해주기 때문에 Alt태그가 필요하다고 할 수 있다. 뿐만 아니라, 검색로봇이 이미지를 읽을 때, Alt태그에 작성된 텍스트를 읽는다.

따라서, 검색엔진을 최적화시키는 것에 있어서 Alt태그를 작성하는 것이 SEO에 유리할 수밖에 없다. 검색엔진은 사이트를 돌아다니면서 문서를 읽고 긁어내는 작업을 한다. 이를 크롤링이라고 한다. 이 작업을 통해서 무수히 많은 인터넷의 문서들을 수집하고 읽어낸다. 그리고 검색엔진에 노출을 시키는데, 우선순위를 정하는 데 있어 Alt태그 또한 중요하게 활용된다.

그러면, Alt태그와 Title태그를 구분 짓는 것은 무엇일까, Title태그도 마찬가지로 중요하다. 보통 Alt태그는 이미지의 키워드라고 이해할 수 있고, Title태그는 이미지의 제목이라고 이해할 수 있다. 일반적으로 IE 브라우저에서 이미지 위에 마우스를 올리면 이미지의 제목이 표시된다. 그것이 바로 Title태그가 적용된 예시라고 이해할 수 있다. 이 Title태그 역시도 검색엔진에 있어서 매우 중요하다.

웹페이지를 읽는 사람이나 로봇에게 있어서 조금 더 구체적인 정보를 제공하기 때문에, Title태그를 입력해주는 것이 매우 중요한 것이다. 따라서 대부분 많은 웹사이트 운영자들이 놓치고 있는 부분이 이 두 가지 요소이기 때문에, 이미지를 추가할 때 Alt태그와 Title태그를 넣어주는 습관을 기른다면 훨씬 양질의 콘텐츠를 인터넷에 제공할 수 있는 것이다.

웹사이트로 방문하는 고속도로가 생긴 것과 같다.

Alt 태그와 Title 태그를 적용한 전과 후의 변화

가장 인상적으로 검색 유입의 증가가 크게 늘어난다. 이미지를 많이 사용하는 사이트일수록 그 효과는 더욱 크다. 또한, 검색로봇 역시도 이미지를 쉽게 수집할 수 있고 웹 표준에 최적화가 되기 때문에, 내가 작성한 웹문서가 높은 품질로 평가받을 가능성이 높아진다. 이것만으로도 평소에 발생하는 트래픽의 약 30% 이상을 늘릴 수 있을 것이다.

사이트맵

SEO 최적화를 위한 사이트 체크

사이트 체커를통해서 내 사이트를 쉽게 점검하고 보완할 수 있다. Alt태그와 Title태그를 포함한 SEO 최적화 요소에 문제가 되는 부분을 확인할 수 있다. 티스토리에서 모든 기능을 사용할 수는 없기에 아쉽게도 해결하지 못한 부분들이 있지만, 치명적인 에러는 모두 잡았다. 이외의 요소들에서는 티스토리 내의 치환 값으로 적용되는 카테고리 페이지의 타이틀 길이 등과 같은 문제들, 짧은 메타 설명 부분들이 문제가 된다.

사이트 체커를 통한 SEO최적화 분석 - 크롤러 리포트

그럼에도 불구하고 굉장히 높은 점수를 받았으며, 별도의 작업을 하지 않은 티스토리 사이트로 체크를 해보면, 상당히 낮은 점수로 나타나는 것을 확인할 수 있다.

• 크리에이티브 스튜디오 라이브러리의 SEO 관련글입니다.