본문 바로가기
카테고리 없음

블로그에 ALT 태그 넣는 법 (SEO 최적화)

by richjin7285 2025. 10. 11.

블로그에 ALT 태그 넣는 법 사진

ALT 태그(정확히는 img 태그의 alt 속성)는 화면에 보이는 이미지를 텍스트로 설명하는 문장입니다. 시각장애인 사용자에게는 스크린리더가 읽어 주는 “대체 텍스트”이고, 이미지가 깨졌을 때 대신 노출되는 설명이기도 하죠. 검색엔진 입장에서도 ALT는 이미지의 의미를 이해하는 핵심 단서이기 때문에, 같은 글이라도 ALT를 잘 쓰면 이해도·접근성·검색 노출이 함께 좋아집니다. 반대로 “IMG_1234.jpg” 같은 파일명만 두고 ALT를 비워두면, 크롤러는 이미지를 거의 해석하지 못하고, 사용자 경험도 떨어집니다. 이 글은 초보도 바로 적용할 수 있게 ① 개념과 원칙 → ② 플랫폼별 입력 방법(티스토리/블로그스폿/워드프레스/마크다운) → ③ 품질 체크·자동 진단과 템플릿 순서로 정리했습니다. 좋은/나쁜 예시를 나란히 보여 드리고, 실제 운영에서 자주 생기는 함정(키워드 남발, 장식용 이미지 ALT 처리, 표/차트 설명)까지 해결책을 제시합니다.

1) ALT 태그 기본기: 무엇을, 왜, 어떻게 쓰는가

ALT는 “이미지를 보지 못해도 핵심 정보를 잃지 않게 하는 한 줄 설명”입니다. 접근성(스크린리더), 로딩 실패 시 대체 문구, 검색엔진 이해도 3가지를 동시에 해결합니다. 많은 분이 SEO 때문에 키워드를 억지로 넣지만, 우선순위는 항상 사람입니다. 사람 기준으로 명료하게 쓰면, 검색엔진은 그 문장을 더 잘 이해합니다. 반대로 키워드 나열(keyword stuffing)은 접근성을 해치고, 검색 품질 신호에도 불리합니다.

ALT를 써야 하는 이미지와 쓰지 않아도 되는 이미지

  • ALT 작성 필수: 스크린숏, UI 단계 설명, 제품/서비스 사진, 차트/표/인포그래픽, 다이어그램, 지도, 폼 안내 배너(의미가 있을 때).
  • ALT 비움(alt="") 권장: 분리선, 배경 패턴, purely decorative 아이콘, 반복 로고(같은 페이지에 여러 번 등장) 등 정보가 없는 장식 요소.
  • 링크 이미지: 클릭하면 어디로/무엇을 하는지 목적을 ALT로 명시(“가격표 다운로드”, “상세 페이지 이동”).

좋은 ALT의 5가지 원칙

  1. 맥락 우선 — 이미지가 본문에서 무엇을 보조하는지 반영합니다. 같은 사진도 글 주제에 따라 ALT가 달라질 수 있습니다.
  2. 문장형 — 단어 나열이 아니라 1~2 문장으로 무엇/어떤 상태/결론을 자연어로 설명합니다.
  3. 핵심 요약 — 차트/표이면 결론을 먼저(“7월 피크, 9월 -15% 하락”). 스크린숏이면 행동을 먼저(“필터 보기 생성 클릭”).
  4. 불필요 생략 — “이미지/사진/그림” 같은 단어, 사이트명 반복, 해시태그·키워드 나열은 제거.
  5. 길이 절제 — 80~125자 권장. 더 길어지면 핵심만 남기고 나머지는 <figcaption>이나 본문으로 보냅니다.

도메인별 작성 팁(상황별)

  • 스크린숏: “어느 화면에서 무엇을 어떻게 하는 장면인지”를 답합니다.
    예) “데이터 > 필터 보기에서 ‘새 필터 보기’ 버튼을 클릭하는 단계”
  • 차트/인포그래픽: 숫자 전체를 쓰기보다 추세/차이/결론을 요약합니다.
    예) “2025년 1~9월 채널별 세션: 검색 48%로 1위, 광고 30%, 소셜 22%”
  • 제품/리뷰 사진: 모델/색/상태/용도를 포함합니다.
    예) “로지텍 MX Anywhere 3 블랙, 측면 스크롤 휠 클로즈업”
  • 지도/위치: 범위/랜드마크/방향을 명시합니다.
    예) “강남역 11번 출구 기준 도보 3분, 남서쪽 블록의 매장 위치 표시 지도”
  • 폼/배너(의미 있는 안내): 행동을 유도하는 목적을 씁니다.
    예) “뉴스레터 구독 양식: 이메일 입력 후 구독 버튼”

좋은/나쁜 예시 모음

나쁜 ALT
  • alt="이미지1"
  • alt="구글 시트, 구글 시트 함수, 구글 스프레드시트 사용법"
  • alt="차트"
  • alt="배너"
  • alt="사진, 사진, 사진"
좋은 ALT
  • alt="구글 시트에서 VLOOKUP 범위를 절대참조로 고정하는 설정 화면"
  • alt="월별 전환율 추세: 6월 2.3%에서 9월 3.1%로 상승"
  • alt="티스토리 에디터의 이미지 대체 텍스트 입력 창"
  • alt="" (분리선·장식용 아이콘)
  • alt="가격 비교표: 플랜 A 9,900원, 플랜 B 14,900원(월)"

HTML 패턴과 권장 속성

<img
  src="/images/sheets-filter-view.png"
  alt="구글 시트 필터 보기에서 조건을 추가하는 팝업"
  width="900" height="520"
  loading="lazy">
  • width/height: 레이아웃 안정(CLS 감소)에 도움.
  • loading="lazy": 지연 로딩으로 속도 개선.
  • alt="": 장식용 이미지는 비워 스크린리더가 건너뛰게.

파일명·캡션·주변 텍스트와의 협업

  • 파일명: img_0001.png 대신 google-sheets-filter-view.png처럼 의미 있는 케밥케이스 사용. 과도한 키워드 금지.
  • 캡션: ALT가 요약이라면, 캡션은 추가 맥락/세부 수치를 제공합니다.
  • 주변 텍스트: ALT에서 다 못한 설명은 문단에서 보충(특히 차트/표 요약 → 본문 표로 재현).

차트/표—ALT와 캡션 역할 분담

<figure>
  <img src="/img/kpi-trend.png"
       alt="7월 매출 피크 후 9월 -15% 하락, 검색 채널 비중 48%">
  <figcaption>2025년 1~9월 월별 매출·채널 비중(검색>광고>소셜 순)</figcaption>
</figure>

언어·브랜드·민감 정보 주의

  • 언어: 블로그 언어와 동일하게 씁니다. 영문 블로그의 ALT는 영어, 다국어 페이지는 해당 언어 별로.
  • 브랜드: 로고 ALT는 페이지 첫 등장에서만 의미를 부여(“사이트 로고: Aros100”), 반복 로고는 alt="".
  • 민감 정보: 스크린숏에 개인정보가 보이면 마스킹하고 ALT에도 민감 필드를 서술하지 않습니다.

템플릿(복붙용)

스크린샷 ALT = "[서비스/화면]에서 [버튼/설정]을 [수행]하는 장면"
차트 ALT   = "[기간/대상] [지표] 추세: [핵심 요약/수치]"
제품 ALT   = "[브랜드/모델] [색상/형태], [사용/상태] 모습"
지도 ALT   = "[기준점/방향/거리] 기준 [목적지] 위치 안내"
장식 ALT   = ""

자주 하는 실수와 빠른 교정

  • 모든 이미지에 같은 ALT — 각 이미지의 역할에 맞춰 개별 작성. 반복 로고는 alt="".
  • 키워드 스팸 — 문장형 설명로 바꾸고, 키워드는 자연스럽게 포함되면 OK.
  • 차트 ALT 없음 — 결론 문장 1개로 보완, 상세 수치는 캡션/본문 표 제공.
  • 언어 혼용 — 페이지 언어와 ALT 언어 일치.

발행 전 30초 체크리스트

  • 정보형 이미지에 ALT가 모두 있는가?
  • 장식용 이미지는 alt=""로 비워뒀는가?
  • 차트/표 ALT에 핵심 결론이 들어갔는가?
  • 파일명이 의미 있고 과한 키워드가 없는가?

2) 플랫폼별 ALT 입력 방법: 티스토리·블로그스폿·워드프레스·마크다운(실전 절차·문제 해결까지)

플랫폼별 ALT 입력 방법 사진

플랫폼마다 ALT 입력 위치와 에디터 동작이 달라서 헷갈리기 쉽습니다. 원칙은 간단합니다. 보이는 곳에 ALT 입력 칸이 없으면 HTML 모드로 전환해 직접 alt="..."를 넣는다. 이 섹션은 티스토리, 블로그스폿(Blogger), 워드프레스(블록 에디터/클래식), 마크다운(정적 블로그/노션 연동) 순서로 구체적인 클릭 경로와 자주 생기는 문제 해결까지 정리했습니다. 마지막엔 “올바르게 들어갔는지”를 확인하는 검증법(개발자도구/Lighthouse)과 대량 교정 팁도 제공합니다.

티스토리(Tistory): 에디터 패널 → 없으면 HTML에서 직접

  1. 이미지 삽입 후 이미지를 클릭 → 상단 또는 우측의 이미지 편집/설정 패널 열기.
  2. “대체 텍스트(ALT)” 또는 “설명” 입력 칸에 문장형으로 작성. (예: “데이터 > 필터 보기에서 ‘새 필터 보기’ 버튼을 클릭하는 장면”)
  3. 입력 칸이 보이지 않거나 스킨/에디터 버전에 따라 숨겨져 있으면, 편집창의 HTML 모드로 전환 → 해당 <img> 태그에 alt="..." 직접 추가.
<figure class="image">
  <img src="tistory-filter-view.png"
       alt="티스토리 에디터에서 이미지 대체 텍스트를 입력하는 패널 화면">
  <figcaption>이미지 편집 패널의 ALT 입력 예시</figcaption>
</figure>
  • 문제 해결
    • 저장 후 ALT가 사라짐 → 저장 직전 HTML 모드로 한번 열어 ALT가 남아 있는지 확인. 일부 스킨 스크립트가 빈 ALT를 제거하는 경우가 있어 alt=""가 아닌 alt="분리선"처럼 무의미 텍스트를 넣지 말고, 장식용은 alt="" + role="presentation" 유지.
    • 갤러리/슬라이더 위젯 사용 시 → 위젯이 내부적으로 <img>를 생성하므로, 위젯 설정에서 “캡션=ALT로 사용” 옵션이 있는지 확인. 없으면 HTML 템플릿을 편집해 alt="{{caption}}" 바인딩 추가.

블로그스폿(Blogger): 이미지 속성(Alt text) 버튼 → HTML 보기 보완

  1. 포스트 편집기에서 이미지를 클릭 → 작은 툴팁 메뉴의 이미지 속성 또는 대체 텍스트 선택.
  2. “대체 텍스트(Alt text)” 입력창에 문장형 설명 작성 → 저장.
  3. 필요하면 상단 탭의 HTML 보기 전환 → <img... alt="...">로 존재 확인/수정.
<img src="blogger-dashboard.png"
     alt="Blogger 편집기에서 이미지 속성 창을 열어 대체 텍스트를 입력하는 모습" />
  • 문제 해결
    • 모바일 테마에서 ALT가 적용 안 됨 → 테마 > HTML 편집에서 이미지 위젯 템플릿에 alt='<data:post.title/>' 등의 자동 채움이 강제돼 있을 수 있음. 해당 부분을 사용자 입력 ALT 우선으로 수정.
    • 이미지 링크가 외부(CDN) 일 때 → 핫링크 차단/만료로 이미지가 깨지면 ALT만 노출됨. 이 경우 ALT는 남되 UX가 깨지므로, 가능하면 미디어 업로드로 내부 호스팅 전환.

워드프레스(WordPress): 블록 에디터/미디어 라이브러리에서 확실히

  • 블록 에디터(Gutenberg)
    1. 이미지 블록 선택 → 우측 사이드바 블록 탭 → “대체 텍스트(alt 텍스트)” 입력.
    2. 같은 이미지를 여러 포스트에서 재사용한다면, 미디어 라이브러리에서 미리 ALT를 등록하면 기본값으로 적용.
  • 클래식 에디터
    1. 이미지 클릭 → 연필 아이콘(편집) → “대체 텍스트” 필드에 입력.
    2. 텍스트 탭(HTML)에서 직접 alt 확인/수정.
<img src="/uploads/kpi-trend.webp"
     alt="월별 전환율이 6월 2.3%에서 9월 3.1%로 상승한 추세"
     width="960" height="560" loading="lazy" />
  • 문제 해결
    • 테마/페이지 빌더(Elementor/Divi 등)에서 ALT가 안 먹음 → 개별 위젯의 이미지 설정 패널에 Alt 필드가 별도로 있음. 테마가 title을 ALT로 복사하는 경우가 있으니 Alt 필드를 직접 채우기.
    • 이미지 최적화 플러그인(WebP 변환)이 새 파일로 교체하면서 ALT 누락 → 플러그인 설정에서 “메타 복사” 옵션 확인, 누락 시 미디어 라이브러리에서 일괄 ALT 채우기 플러그인 사용(Media Library Assistant 등).

마크다운/정적 블로그(Hexo, Jekyll, Hugo)·노션 연동

  • 마크다운 기본:! [대체 텍스트](이미지경로 "타이틀(선택)") 구조. 대체 텍스트가 곧 ALT가 됩니다.
![구글 시트 슬라이서에서 채널=검색만 선택한 화면](/img/slicer-select.png "필터 슬라이서 예시")
  • 노션 → 퍼블리싱(티스토리/워드프레스): 익스포트/연동 툴이 이미지 설명을 ALT로 매핑하지 못하는 경우가 많음. 내보낸 HTML에서 <img> 태그의 alt를 수동 보완하거나, 연동 툴 설정에서 “Caption → Alt” 매핑 옵션이 있는지 확인.

차트/표/인포그래픽: ALT=결론, 캡션=세부 수치

  • 차트 이미지는 ALT에 핵심 요약만(추세/증감/순위) 담고, 구체 수치는 <figcaption>이나 본문 표로 제공합니다.
<figure>
  <img src="/img/channel-share.png"
       alt="검색 채널 비중 48%로 1위, 광고 30%, 소셜 22%">
  <figcaption>2025년 1~9월 채널별 세션 비중(검색>광고>소셜)</figcaption>
</figure>

장식용 이미지: alt="" + 역할 지정

  • 분리선/배경/장식 아이콘처럼 정보가 없는 이미지는 alt=""로 비우고, 가능하면 role="presentation" 또는 aria-hidden="true"를 함께 사용해 스크린리더가 건너뛰게 합니다.
<img src="/img/divider.svg" alt="" role="presentation" aria-hidden="true">

검증: ALT가 정말 들어갔는지 1분 점검

  • 개발자도구: 페이지 열기 → 우클릭 “검사(Inspect)” → Elements 탭에서 img [alt] 검색 → 빈 ALT(alt="")와 누락(img:not([alt]))을 빠르게 확인.
  • Lighthouse (크롬 DevTools): Accessibility 리포트의 “Image elements do not have [alt] attributes” 항목 확인 → 누락된 이미지 수 파악.
  • 스크린리더 테스트: Windows(내레이터) 또는 macOS(VoiceOver)로 이미지 구간을 이동해 읽히는 문구 확인.

대량 교정 팁(워드프레스/정적 사이트)

  • 워드프레스: Media Library Assistant/Auto Image Attributes 같은 플러그인으로 파일명→ALT 임시 자동 채움 후, 정보형 이미지만 수동 문장으로 재작성(최종 품질 확보).
  • 정적 사이트: 빌드 전에 간단한 스크립트로 <img> 태그를 파싱해 ALT 누락 리스트를 콘솔에 출력(작성 단계에서 누락 차단).

자주 겪는 함정과 해결

  • 키워드 나열로 ALT 채움 → 문장형 설명으로 교체, 키워드는 자연스럽게 포함되면 충분.
  • 레이아웃 라이브러리(슬라이더/갤러리)가 ALT 덮어씀 → 템플릿에서 데이터 바인딩 확인, “캡션=ALT 복사” 옵션 비활성화.
  • lazy-loading 스크립트가 data-src 사용 → 최종 DOM에서 <img>에 alt가 남는지 확인(SSR/클라이언트 렌더 체크).

핵심은 “보이는 편집창에서 입력 → HTML로 확인 → 접근성 리포트로 검증”의 3단 루틴입니다. 이 루틴을 발행 체크리스트에 넣어두면, 플랫폼이 무엇이든 ALT 품질이 일정하게 유지됩니다.

3) 품질 점검·자동 진단·템플릿: ALT를 ‘운영 습관’으로 만들기

ALT는 한 번 쓰고 끝나는 체크박스가 아니라, 운영 습관입니다. 새 글을 올릴 때마다, 오래된 글을 리라이트 할 때마다 같은 규칙으로 점검해야 사이트 전체 품질이 올라갑니다.

작성 템플릿(복붙용)

  • 스크린숏: “어느 화면에서 무엇을 수행하는 장면인지” + 결과
  • 차트/표: “무엇이 증가/감소/비중” + 수치 핵심
  • 제품/사진: “모델/색/상태/행동”
  • 장식용: alt=""
스크린샷 ALT: "[서비스/화면]에서 [버튼/설정]을 [수행]하는 장면"
차트 ALT: "[기간/분류] [지표] 추세: [핵심 요약/수치]"
제품 ALT: "[브랜드/모델] [색상/형태], [사용/배치] 모습"
장식 ALT: ""

금지/주의 체크

  • 키워드 나열, 문맥 없는 브랜드/키워드 반복(스팸) ❌
  • “이미지”, “사진” 같은 무의미한 단어만 작성 ❌
  • 중복 ALT(모든 이미지가 같은 ALT) ❌
  • 차트 이미지를 ALT 없이 첨부 ❌

자동 진단 루틴(간단)

  • 브라우저 검사: 포스트 열기 → 개발자도구(Elements)에서 img [alt] 검색 → 비어있는 ALT(alt="") 목록 확인.
  • Lighthouse (크롬): 접근성 리포트에서 “이미지 요소에 [alt] 속성 없음” 항목 확인.
  • 크롤러: 사이트맵 URL로 50~100개 페이지를 수집해, 간단한 스크립트(또는 크롤러 도구)로 ALT 유무를 집계.

운영 체크리스트(발행 전 1분)

  • 정보형 이미지에 ALT가 모두 있는가?
  • 장식용은 alt=""로 비워 두었는가?
  • 차트/표 ALT에 핵심 수치 요약이 들어갔는가?
  • 파일명은 의미 있게, 과한 키워드 없이 정리했는가?

리라이트(기존 글 개선) 요령

  • 유입이 많은데 체류가 낮은 글을 우선 선정 → 이미지 ALT와 캡션 보강.
  • “이미지 대체 텍스트 없음”이 많은 카테고리를 찾아 일괄 보정(월 1회).
  • 차트/표를 이미지로만 보여줬다면, 본문 아래 텍스트 표 버전을 추가해 접근성과 인덱싱 개선.

자주 묻는 질문(FAQ)

  • Q. ALT에 키워드를 꼭 넣어야 하나요?
    A. 설명에 자연스럽게 포함되면 좋지만, 억지 삽입은 감점입니다. 사람 기준으로 쓰면 충분합니다.
  • Q. 캡션과 ALT는 뭐가 달라요?
    A. 캡션은 화면에 보이는 설명, ALT는 보이지 않는 대체 텍스트(스크린리더/크롤러용). 둘 다 있으면 베스트.
  • Q. 배너/아이콘에도 ALT가 필요?
    A. 의미 없는 장식이면 alt="". 클릭 기능이 있으면 링크 목적을 ALT로 설명.

결론: “사람을 위한 문장”이 곧 SEO다

사람을 위한 문장 사진

ALT는 검색엔진 요령이 아니라, 사람을 위한 설명입니다. 이미지를 보지 못하는 독자도 핵심을 놓치지 않게 쓰면, 접근성과 신뢰가 올라가고 SEO는 자연스럽게 따라옵니다. 오늘부터는 모든 이미지에 “이 그림이 전달하는 핵심은 무엇인가?”를 묻고, 한 줄로 명확하게 적어 보세요. 스크린숏은 동작/맥락을, 차트/표는 결론/수치를, 제품 사진은 모델/상태를 담아 문장으로 설명합니다. 장식용 이미지는 alt=""로 비워 스크린리더가 방해받지 않도록 하세요. 플랫폼이 달라도 원칙은 같습니다. 티스토리·블로그스폿·워드프레스 어디에서든 ALT 입력 칸을 찾고, 보이지 않으면 HTML 모드로 직접 넣으면 됩니다.

루틴으로 굳히면 오래갑니다. 새 글 발행 전 “ALT 체크 4문항”, 오래된 글은 월 1회 ALT·캡션 리라이트. 차트 이미지는 텍스트 표를 덧붙이고, 자주 쓰는 이미지 유형에는 ALT 템플릿을 만들어 두세요. 결국 SEO는 기술이 아니라 배려의 다른 이름입니다. 친절한 한 줄이 독자와 검색엔진 모두에게 신호가 됩니다. 그 한 줄을 오늘 포스트부터 시작해 보세요.

티스토리툴바