티스토리 블로그를 운영하다 보면 ‘alt 태그(대체 텍스트)’라는 용어를 자주 접하게 됩니다. 많은 초보자분들이 alt 태그가 무엇인지, 왜 꼭 넣어야 하는지, 실제로 어떻게 작성해야 하는지 궁금해하실 텐데요.
오늘은 alt 태그의 개념부터 SEO(검색엔진최적화)와의 관계, 그리고 티스토리에서 alt 태그를 다는 방법까지 초보자도 이해하기 쉽도록 자세히 알아보려고 해요.
■ alt 태그란 무엇인가?
alt 태그(정확히는 alt 속성)는 HTML에서 이미지를 설명하는 텍스트예요. 웹페이지에 이미지를 삽입할 때 `<img>` 태그 안에 `alt="이미지 설명"` 형태로 추가하는데, 이 텍스트는 이미지가 보이지 않을 때 대신 나타나거나, 시각장애인을 위한 프로그램이 이미지를 읽어줄 때 사용됩니다.
예를 들어, ‘고양이 자는 모습’ 그림을 올릴 때 alt 태그에 ‘고양이 자는 모습 사진’이라고 입력하면, 이미지를 볼 수 없는 사용자나 프로그램이 이 그림이 무엇인지 알 수 있습니다.
■ alt 태그를 꼭 넣어야 하는 이유
1. 웹 접근성 향상
alt 태그는 시각장애인 등 이미지 정보를 직접 볼 수 없는 사용자에게 이미지의 내용을 전달해 줍니다. 시각장애인을 위한 프로그램이 alt 태그에 입력된 설명을 읽어주기 때문에, 모든 사용자가 콘텐츠를 이해할 수 있도록 도와준다고 합니다.
2. 검색엔진최적화(SEO)에 유리
검색엔진(구글, 네이버 등)은 이미지 자체를 ‘읽지’ 못해요. 대신 alt 태그에 입력된 텍스트를 통해 이미지의 내용을 파악하고, 페이지의 주제와 연관성을 분석합니다. alt 태그가 잘 작성되어 있으면 이미지가 검색엔진에 노출될 확률이 높아지고, 블로그 전체의 노출 순위(SEO)에도 긍정적인 영향을 줍니다. (저도 처음엔 몰랐던 사실이에요. 그래서 정말 후회했죠)
특히 구글 이미지 검색, 네이버 이미지 검색 등에서 내 블로그의 이미지가 상위에 노출될 수 있는데, 이때 alt 태그가 중요한 역할을 합니다.
3. 이미지가 깨졌을 때 대체 정보 제공
네트워크 문제 등으로 이미지가 로드되지 않을 때, alt 태그에 입력한 텍스트가 대신 표시되어 방문자가 어떤 이미지였는지 알 수 있습니다.
★ 어떤 검색엔진에 유리할까?
alt 태그는 구글, 네이버, 다음 등 모든 주요 검색엔진에서 이미지와 웹페이지의 내용을 이해하는 데 활용됩니다. 특히 구글은 alt 태그를 매우 중요하게 여기며, 이미지 검색 결과와 웹페이지 순위 결정에 alt 태그 정보를 적극적으로 반영합니다. 네이버 역시 이미지 검색 및 페이지 주제 파악에 alt 태그를 참고합니다.
■ 티스토리에서 alt 태그 작성 방법
1. 기본(에디터) 모드에서 입력하기
- 이미지를 삽입한 뒤, 이미지를 클릭합니다.
- 우측 상단의 톱니바퀴(설정) 아이콘을 클릭합니다.
- ‘대체 텍스트’ 입력란에 이미지 설명을 작성합니다.
- '확인' 하면 자동으로 alt 태그가 적용됩니다. 이걸로 끝!
2. HTML 모드에서 직접 입력하기
* 단, 티스토리에서는 HTML 모드에서 직접 입력할 때 오류가 발생할 수 있으니, 기본 모드에서 입력하는 방법을 추천해요.
- 에디터를 HTML 모드로 전환합니다.
- 아래의 alt 태그 적용 전 - 적용 후 예시를 참조해 보세요.
■ alt 태그 작성 시 주의사항 및 팁
- 이미지를 명확하고 간결하게 설명해야 해요.
예: “노란 튤립 꽃다발” - 키워드를 자연스럽게 포함하면 SEO에 도움이 됩니다.
예: “서울 남산타워 야경 사진” - 키워드만 나열하거나 의미 없는 문장은 피하세요. (이러면 오히려 불리할 수 있어요)
- 장식용 이미지(예 : 단순 구분선 등)는 alt를 비워두거나 “ ”로 처리할 수 있습니다.
alt 태그는 단순히 ‘이미지 설명’ 그 이상이네요~!🤓
웹 접근성을 높이고, 검색엔진에 내 블로그를 더 잘 알릴 수 있는 필수 요소입니다. 티스토리 블로그를 운영하신다면, 앞으로 이미지를 올릴 때 반드시 alt 태그를 꼼꼼히 작성해 보세요.
작은 습관이 블로그의 성장과 더 많은 방문자 유입에 큰 도움이 될 거예요.
이 글을 읽은 여러분 모두 도움이 되셨으면 좋겠습니다!!🤩
'블로그' 카테고리의 다른 글
티스토리 Meta Description 중복 제거 방법 완벽 정리 (18) | 2025.06.11 |
---|---|
구글 애드센스 승인! 수익을 위한 첫 걸음, 티스토리 블로그에 광고 적용하는 방법 (35) | 2025.05.06 |
티스토리 블로그 구글 애드센스 등록하는 법 | 처음부터 끝까지 쉬운 가이드 (7) | 2025.04.19 |
티스토리 블로그에 구글 서치 콘솔 연결 방법: 단계별 가이드! (1) | 2025.04.10 |
티스토리 개설 후 네이버 서치 어드바이저(Search Advisor) 연결하는 방법가이드! (5) | 2025.04.07 |