티스토리 뷰

반응형

블로그 이미지 넣을 때 꼭 넣어야 하는 'Alt 태그'에 대한 설명을 그림으로 나타냄
'Alt 태그' 를 넣어야 하는 이유

 

블로그 이미지 삽입 시 필수인 Alt 태그에 대해 초보자도 쉽게 이해하도록 설명합니다. Alt 태그는 이미지가 로딩되지 않을 때 대체 텍스트를 제공하며, 시각 장애인의 웹 접근성을 높이고 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다. 좋은 Alt 태그 작성법(이미지 내용 간결 설명, 키워드 자연스러운 포함)과 피해야 할 행동을 구체적인 예시와 함께 안내하며, Alt 태그 사용의 중요성을 강조합니다. 이제부터 방문자와 검색 엔진 모두에게 친절한 블로그를 만들어 보세요.


🖼️ Alt 태그란 무엇인가요?

 태그라고 생각하시면 가장 쉽습니다.

쉽게 말해, 우리가 이미지를 웹페이지에 넣을 때, 이 이미지가 어떤 내용을 담고 있는지 글로 알려주는 역할을 합니다.

 

역할 설명
이미지 대체 어떤 이유(인터넷 연결 불량, 웹 브라우저 오류, 시각 장애인의 스크린 리더 사용 등)로 인해 이미지가 화면에 보이지 않을 때, 대신 이 텍스트가 나타나서 이미지의 내용을 알려줍니다.
검색 엔진 최적화 (SEO) 구글, 네이버 같은 검색 엔진은 이미지를 직접 '볼' 수 없습니다. Alt 태그에 있는 텍스트를 읽고 이 이미지가 무엇에 관한 것인지 파악하여, 검색 결과에 더 잘 노출되도록 돕습니다.

🔍 Alt 태그의 예시

아래와 같은 코드로 이미지를 삽입한다고 가정해 볼게요.

HTML
 
<img src="happy_puppy.jpg" alt="잔디밭에서 꼬리를 흔들고 있는 골든 리트리버 강아지">
  • src="happy_puppy.jpg": 실제 이미지 파일의 위치입니다.
  • alt="잔디밭에서 꼬리를 흔들고 있는 골든 레트리버 강아지": 이것이 바로 Alt 태그입니다.

만약 어떤 사람이 이 이미지를 볼 수 없다면, 화면에는 "잔디밭에서 꼬리를 흔들고 있는 골든 레트리버 강아지"라는 텍스트가 대신 나타나게 됩니다.


📝 Alt 태그 작성법 (초보자 가이드)

Alt 태그는 단순히 키워드를 나열하는 것보다, 이미지를 정확하고 간결하게 설명하는 것이 가장 중요합니다.

💡 좋은 Alt 태그 작성 팁

  1. 이미지의 내용과 목적을 설명하세요: 이미지가 담고 있는 핵심 정보를 문장 형태로 설명해 주세요.
    • 나쁜 예: 강아지 골든 리트리버 잔디밭 (키워드 나열)
    • 좋은 예: 잔디밭에서 꼬리를 흔들고 있는 골든 레트리버 강아지 (이미지 설명)
  2. 간결하게 작성하세요: 너무 길 필요는 없습니다. 보통 5~15 단어 내외가 적당합니다.
  3. 키워드를 포함하면 더 좋습니다 (자연스러울 경우): 만약 블로그 글의 핵심 키워드가 이미지 설명에 자연스럽게 들어갈 수 있다면 포함하는 것이 SEO에 도움이 됩니다.
    • 예시: 블로그 글 주제가 '스마트폰으로 사진 잘 찍는 법'이고, 이미지에 야경 사진이 있다면, 삼각대를 사용하여 스마트폰으로 찍은 선명한 도시 야경 사진과 같이 작성할 수 있습니다.
  4. 장식용 이미지에는 비워두거나 짧게: 단순히 글의 디자인을 위해 넣은 구분선, 아이콘 등 정보 가치가 없는 이미지라면, alt="" 처럼 alt 태그를 비워두거나 아주 짧게 "구분선" 등으로만 작성할 수도 있습니다.

🛑 피해야 할 행동

  • 키워드만 반복 나열: "강아지, 리트리버, 애완동물, 귀여운, 사진"처럼 의미 없는 키워드를 반복해서 넣지 마세요. 검색 엔진이 스팸으로 판단할 수 있습니다.
  • 너무 모호한 설명: "이미지" 또는 "사진"과 같이 설명 가치가 전혀 없는 단어만 넣지 마세요.

🧐 왜 Alt 태그를 꼭 사용해야 하나요?

Alt 태그는 선택이 아니라 필수라고 보시는 것이 좋습니다.

  • 웹 접근성 향상: 시각 장애인 분들이 웹 콘텐츠를 이해하는 데 결정적인 도움을 줍니다. 이는 모든 사람이 정보를 쉽게 얻을 수 있도록 하는 중요한 요소입니다.
  • 검색 노출 증가: 검색 엔진이 블로그 글의 내용을 더 잘 이해하고, 이미지를 검색하는 사용자에게도 노출될 기회가 높아집니다.
  • 이미지 로딩 실패 대비: 혹시나 모를 서버나 네트워크 문제로 이미지가 로딩되지 않을 때, 사용자에게 최소한의 정보를 제공할 수 있습니다.

Alt 태그는 방문자와 검색 엔진 모두에게 친절한 블로그를 만드는 기본 단계이니, 이미지를 삽입할 때마다 잊지 말고 꼭 작성해 주세요! 😊

반응형