오늘은 티스토리 Alt 태그 삽입 방법과 주의사항에 대해 알아보겠습니다. 블로그를 본격적으로 시작하고 알아보시는 분들이라면 구글 SEO를 들어보셨을텐데요. 구글 SEO에서 이미지 Alt 태그는 생각보다 중요한 요소 중 하나입니다.
이미지 알트(Alt) 태그란 무엇일까?
Alt 태그란 이미지에 이미지 설명을 텍스트로 간략하게 넣어 두면 특정한 상황에서 이미지가 제대로 뜨지 않는 사용자들에게 텍스트를 통해 해당 이미지에 대한 대략적인 유추가 가능하도록 간략하게 넣는 문장을 말합니다. 실제로는 구글과 같은 검색엔진에서 이미지 검색 시 등에 사용되는 용도도 있으므로 그 중요성이 결코 낮게 평가되지 않는 부분입니다. 쉽게 말해 이미지가 나타나지 않을 때 대체로 표시되는 텍스트입니다.
알트(Alt) 태그를 사용해야 하는 이유
- 웹 접근성 향상
Alt 태그는 보조 기술이나 텍스트 전용 브라우저를 사용하는 경우에도 방문자가 웹사이트의 콘텐츠에 액세스하고 즐길 수 있도록 한다. 시각 장애가 있는 사용자가 웹사이트를 방문하면 스크린 리더가 해당 페이지의 텍스트를 읽는다. 이미지에 도달하면 ALT 태그를 사용해 해당 이미지가 무엇인지 설명한다. ALT 태그가 없으면 스크린 리더가 대신 이미지 파일 이름을 읽는다. 그러나 이는 일반적으로 이미지를 올바르게 설명하는 데 효과적이지 않을 뿐 아니라, 특히 파일 이름이 SEO 최적화되지 않은 경우 혼란스러울 수 있다. 워드프레스에서 이미지의 대체 태그 필드를 비워 두는 경우와 같이 화면 판독기는 해당 이미지를 모두 건너뛴다. 웹 페이지에 포함된 이미지가 목적에 부합한다고 가정하면, 이러한 부재는 방문자가 여러분의 콘텐츠를 소비할 때 의도한 가치나 경험을 충분히 얻지 못하고 있음을 의미한다. - 웹 사이트의 검색엔진 순위 상승
이미지 대체 태그를 사용하면 타기팅하려는 키워드의 순위를 쉽게 지정할 수 있다. 검색엔진 봇(bot)은 지능적이지만 인간이 할 수 있는 것과 같은 방식으로 이미지의 시각적 측면을 해석하고 이해할 수 없다. 대체 속성은 이미지를 번역하고 보다 구체적으로 관련 키워드를 통합하기 위한 텍스트 기반 대안을 제공한다. 대상 키워드가 포함된 텍스트 설명은 이미지 검색에서 순위가 높아질 가능성이 높아진다. 검색엔진 최적화(SEO)에서 이미지가 수행하는 중요한 역할을 강조하려면 “킹 사이즈 침구”에 관한 검색엔진 결과 페이지(SERP)를 고려하길 바란다.
티스토리 Alt 태그 삽입 방법
방법은 아래와 같습니다.
- 먼저 티스토리 글쓰기 환경에서 사진을 업로드 합니다.
- 업로드 된 이미지를 탭 하여 톱니바퀴 모양 [대체텍스트]를 클릭합니다.
- 대체텍스트를 입력하고 [확인] 버튼을 눌러 완료합니다.
티스토리 블로그에서는 업데이트를 통해 Alt 태그를 아주 쉽게 넣을 수 있게 변경되었습니다.
위와 같이 저는 풍경 사진을 업로드했습니다. 업로드를 한 뒤 오른쪽 윗부분 톱니바퀴 모양의 [대체텍스트]를 입력해주세요. 해당 텍스트 부분이 HTML 소스에서 Alt 태그로 잡히는 것을 확인할 수 있습니다.
HTML모드에서 확인해 보면 이미지 소스 안에 [alt]라는 태그가 생성된 것을 확인할 수 있습니다. 예전에는 일일이 소스를 찾아 알트(Alt) 태그를 타이핑하여 적용하여야 했지만 티스토리에서 업데이트를 통해 이미지에 알트(Alt) 태그를 넣는 버튼을 추가한 것이죠. 이는 네이버보다도 빨리 알트(Alt) 태그의 중요성에 대해 인식했다고 볼 수도 있겠습니다. 네이버 블로그는 아직도 해당 기능을 추가하지 않고 있죠.
티스토리 Alt 태그 적용 시 주의사항
- 구체적이고 서술적이어야 한다: ALT 태그의 목적은 이미지를 설명하는 것이므로 가능한 한 구체적이기를 원한다. 설명이 충분한지 확실하지 않은 경우 해당 텍스트 줄만 볼 경우 어떤 이미지를 시각화할지 고려한다.
- 짧게 유지한다: 자세하게 설명하고 싶지만, ALT 태그를 단락 길이(또는 전체 문장)로 만들 필요는 없다. 최대 100–125자를 목표로 한다.
- 중복하지 말아야 한다: ALT 태그를 최대한 활용하기 위해 불필요한 단어를 포함하지 않도록 한다. 여기에는 설명 앞에 “그림의” 또는 “이미지의”를 추가하는 것이 포함된다. 이러한 요소는 이미 암시되어 있으므로 불필요하다.
- 관련성 높은 키워드를 자연스럽게 통합한다: 타깃 키워드를 고려하고 가능한 경우 페이지 콘텍스트 내에 유기적으로 통합한다. 텍스트와 일치하는 관련성이 높은 이미지를 사용할 때 더 쉽다.
- 키워드 스터핑(Keyword stuffing)을 피하라: ALT 태그에 키워드를 사용하면 SEO를 개선할 수 있지만 과도하게 사용하지 않도록 주의한다. 키워드 스터핑은 실제로 검색엔진 최적화(SEO)에 해를 끼치고 사용자 경험을 저하할 수 있다.
- 텍스트 대신 이미지를 사용하지 말아야 한다: ALT 태그의 주요 목적은 페이지의 시각적 요소를 처리하고 해석할 수 없는 컴퓨터에 텍스트 콘텍스트를 제공하는 것이다. 따라서 이미지 내에서 텍스트, 특히 제목과 페이지 제목에 텍스트를 사용하는 것은 적합하지 않다.
마무리
오늘은 티스토리 Alt 태그 넣는 방법 및 주의사항에 대해 자세하게 알아보았습니다. 예전에는 대체텍스트를 넣는 UI가 따로 없어서 HTML 편집으로 들어가 억지로 코드를 삽입했는데요. 티스토리 블로그가 해당 코드의 중요성을 인지했는지, 쉽게 삽입할 수 있도록 변경하였습니다.
관련 카테고리
https://bamkyul.kr/category/sns/blog/