본문 바로가기
돈이 되는 정보/블로그

이미지 알트 alt 태그 넣는 방법 티스토리 블로그

by 돈지킴이 2024. 11. 19.
반응형

블로그는 이미지와 텍스트로 구성되어 있습니다. 올바른 사진 사용 또한 검색엔진 상단 노출에 중요한 포인트입니다. 이미지 알트 태그라는 단어, 티스토리 블로그 운영자라면 한 번쯤 들어 보았을 텐데요. 초보자도 쉽게 alt 태그 넣는 방법 소개 드립니다.

 

이미지 alt 태그 정의

이미지 알트 태그는 Alternative Text입니다. '얼터네이티브' 많이 들어본 영어 단어일 텐데요. 바로 '대안', '대체'라는 뜻을 가지고 있습니다.

 

즉, 환경적 요인으로 이미지가 모니터에 뜨지 않거나, 시작 장애인과 같이 화면을 직접 보기 어려운 분들을 위해 대안이 되는 유용한 기능입니다.

 

이는 Google처럼 다양한 환경을 고려하는 글로벌 기업에 있어, 중요한 검색엔진 최적화(SEO) 평가 항목입니다.

 

구글 사이트 접근성 개선을 위해 대체 텍스트 사용 권고

 

사이트 접근성 개선하기 - 사이트 도구 고객센터

 

support.google.com

 

한국과 달리 해외는 인터넷 속도가 빠르지 않은 지역도 존재하는데요. 알트 태그를 활용하면 사용자가 image 없이도 내용 이해하는데 도움 됩니다.

 

뿐만 아니라, 글로벌 기업답게 소수의 시각 장애인을 위한 화면 설명은 기업의 윤리경영과도 관계가 있습니다.

 

대부분의 글로벌 기업들이 윤리 경영, 사회적 책임(CSR)을 중요하게 여기고 있기 때문입니다.

  • 왜 Alt 태그를 사용해야 하나?
  1. 검색엔진 최적화 - 검색엔진이 image를 쉽게 이해할 수 있음
  2. 다양한 사용자 접근성 강화 - 시각 장애인에게 유용한 기능
  3. 인터넷 환경 극복 - 로딩이 어려운 환경에서도 내용 이해 가능

티스토리 알트 태그 넣는 방법

네이버와 달리 티스토리 블로거는 대부분 구글 검색엔진 노출을 기대합니다.

 

따라서 단순 사진 업로드 만으로는 구글 검색 엔진의 선택을 받기 어렵습니다.

 

네이버와 달리 이미지 내 alt 태그 삽입하여, 검색엔진의 이해를 높이고 상단 노출에 도움 받을 수 있습니다.

 

Tistory 사진 Alt 태그 넣는 방법은 다음과 같습니다.

 

티스토리-사진-첨부

1. 글 작성화면에서 좌측 상단 첨부를 클릭하고 사진을 선택합니다.

 

티스토리-이미지-넣기

2. 사진 파일 선택 후, 열기를 눌러 줍니다.

 

대체-텍스트-삽입

3. 우측 톱니바퀴(대체 텍스트 삽입) 모양을 눌러 대체 텍스트 작성 합니다.

 

이미지를-설명해-보세요-티스토리

4. 필요시 이미지 하단 '이미지를 설명해 보세요' 부분도 작성해 줍니다.

 

Alt 태그 작성 시 주의할 점

알트 태그 사용 시 주의할 점에 대해서 이야기드리면 다음과 같습니다.

 

  • 간결하고 명확한 내용 전달

버즈-이어폰을-잡고-있는-손

예를 들어 상단 image 업로드 한다면 대체 텍스트 문구 작성 시 '버즈-이어폰을-잡고-있는-손'으로 표현하면 좋습니다.

 

굳이 '뚜껑이-열린-버즈-이어폰을-두-손가락으로-잡고-있는-손'과 같이 장문으로 작성하면 로봇이 이해하기 어렵습니다.

 

  • 검색 키워드 포함시킬 것

SEO를 위해서 주요 키워드를 대체 텍스트에 자연스럽게 포함시켜 주는 것이 중요합니다. 이는 구글 검색 노출에 도움 됩니다.

 

만약 버즈 이어폰에 대한 설명 글이라면, 위 사진에서 '버즈', '이어폰'이라는 단어가 핵심 키워드라고 볼 수 있습니다.

 

  • 글 내용과 관계없다면 알트 속성 넣지 말 것

텍스트로만 작성된 블로그는 다소 지루할 수 있어, 많은 분들이 내용과 관련 없어도 image 삽입하곤 합니다.

 

장식용 사진이기 때문에 굳이 대체 텍스트 삽입하지 않습니다. 공백으로 처리해도 문제 되지 않습니다.

 

html 모드에서 보았을 때 <img src="design.jpg" alt="">로 사진 설명이 별도 표시되지 않습니다.

 

대체 텍스트 관련 FAQ

초보 블로거라면 사진 삽입에 어려움을 겪곤 합니다. 오히려 더 좋은 글을 작성하고자 하는 욕심 때문에 여러 기술(?) 사용하려다 실수하곤 하는데요.

 

알트 태그 삽입 시, 자주 묻는 질문 확인해 보겠습니다.

 

Q1. 대체 텍스트와 이미지 설명의 차이점은 무엇인가요?

대체 텍스트는 위에서 이야기드린 대로 SEO와 시각 장애인, 인터넷 환경이 좋지 못한 검색 사용자들의 접근성 강화가 주요 목적입니다. 따라서 실질적인 구글 검색엔진 노출 시 영향을 미칩니다.

 

Tistory Blog 사진 설명은 글을 읽는 구독자에게 추가 정보 전달의 목적일 뿐, 검색 엔진에 영향을 미치지 않습니다.

 

즉, 불필요한 설명은 굳이 넣지 않아도 됩니다.

Q2. HTML 모드에서만 Alt 태그를 삽입해야 하나요?

HTML을 전혀 몰라도 상관없습니다. 이미지 설정 창에서 쉽게 입력할 수 있습니다.(상단 내용 참고)

 

Q3. Alt 태그는 꼭 넣어야 하나요?

검색 엔진 최적화를 위해 필수 키워드와 관계있는 image는 반드시 넣어주는 것이 좋습니다. 다만, 글의 흐름과 관계없는 장식용이라면 생략해도 무관합니다.

 

티스토리 블로거는 이미지도 중요!

많은 분들께서 기존 네이버 블로그 운영하다 수익 모델을 찾지 못해 티스토리로 넘어오곤 합니다.

 

하지만, 네이버와 달리 구글이라는 검색 엔진에 맞춰 글 작성하지 않으면 상단 노출이 어려운데요.

 

검색엔진 최적화(SEO)는 사진 하나조차 중요한 역할을 합니다.

 

네이버와 달리 많은 사진보다는 적재적소에 핵심 키워드가 들어간 대체 텍스트 이미지가 검색엔진이 글 이해하는데 도움 됩니다.

 

검색 노출을 높이고 싶다면 꼭 Alt 태그 제대로 이해하고 넣어주기 바랍니다^^

 

※ Tistory 가독성을 높이기 위해 설정 꿀팁 함께 확인해 보세요.

 

티스토리 가독성 글자 크기 자간 설정 방법

티스토리 블로그는 모바일과 데스크톱 환경에 따라 가독성에 큰 차이를 보이는데요. 모니터에서는 적당한 크기와 간격으로 잘 읽히지만, 모바일에서는 작은 글씨와 좁은 자간 때문에 가독성이

mifu.tistory.com

반응형