블로그 포함 웹사이트가 단순히 글로만 구성되어 있다면 얼마나 지루할까? 이를 해소하기 위해 보통 이미지를 함께 삽입하게 되는데, 이미지를 단순히 장식용으로만 사용한다면 그 효과는 반감될 수밖에 없다.
사용자 경험을 향상하고,나의 블로그를 검색엔진에 효과적으로 알려주는데 이미지만 한 것도 없으며, 이미지 역시 텍스트만큼이나 검색엔진 최적화(Search-engine Optimization, SEO)를 성공으로 이끄는데 중요한 요소로 작용한다.
그러려면 이미지를 어떻게 활용해야 하는 걸까? 그를 위한 전략으로 이미지 alt 속성에 대해 얘기해볼 수 있으며, 이미지 alt 속성을 효과적으로 활용하여 검색에진 최적화(SEO)를 향상하고, 더 많은 사람들에게 나의 티스토리 블로그를 알릴 수 있는 방법을 자세히 알아보려고 한다.
1. 이미지 alt 속성이란?
이미지 alt 속성은, 웹페이지 연결 중 이미지가 로딩되지 않았을 때 대신 표시되는 텍스트로, 이미지에 대한 간략하고 정확한 설명을 제공하는 것이다. 없어도 오류를 일으키지 않기 때문에 태그라기보다는 이미지 속성이라고 할 수 있다.
예시.
<img src="image.jpg" alt="한강뷰 호텔에서 바라본 서울의 도시 풍경과 야경">
2. 이미지 alt 속성의 중요성
2-1. 구글(Google) 이미지 검색
이미지 alt 속성은 검색엔진이 이미지를 더 빨리 발견하고 이해하도록 하여 트래픽을 유도하는데 도움을 준다. 검색엔진이 이미지를 인덱싱할 때 alt 속성의 텍스트를 기반으로 하여 검색엔진 최적화(SEO) 순위를 향상시키기 때문에, 결과적으로 구글 이미지 검색을 통한 추가적인 유입을 기대할 수 있는 것이다.
사용자는 텍스트 링크보다 배너나 이미지를 클릭하는 경향이 더 높기 때문에 시각적으로 노출되는 이미지는 웹사이트의 참여를 크게 높일 수 있고, 구글 역시 검색 결과 페이지에 이미지를 넣어 사용자에게 풍부한 결과를 보여주고 있다.
2-2. 웹 접근성 향상
이미지 alt 속성은 시각 장애인을 위한 대체 텍스트로 이용되며, 시각 장애인이 스크린 리더를 통해 이미지 내용을 이해할 수 있도록 읽어주는 역할을 하여 웹 접근성 향상에 도움을 준다.
3. 이미지 alt 속성 설정 방법
3-1. html 코드에 삽입하는 방법
첫 목차의 예시와 동일하다. <img>로 시작하는 이미지 태그 뒤에 alt=" "만 추가하면 된다. 여기서 중요한 건, 가능하면 이미지의 파일명에도 적절한 이름을 넣어주고, 확장자는 jpg와 png를 사용하는 게 좋다.
<img src="image.jpg" alt="한강뷰 호텔에서 바라본 서울의 도시 풍경과 야경">
3-2. 블로그 삽입하는 방법
입력 및 편집 구조로 이루어진 블로그 내에서 이미지 alt 속성을 추가하는 것은 html의 간단함보다 더 간단하다.
- 티스토리 블로그: 글쓰기 > 이미지 삽입 > 이미지 클릭 > 톱니바퀴 모양의 '대체 텍스트 삽입' 클릭 > 대체텍스트 입력
- 네이버 블로그: 글쓰기 > 이미지 삽입 > 이미지 클릭 > 하단 '사진 설명을 입력하세요' 영역에 텍스트 입력 (
네이버는 정식 이미지 alt 속성은 없다. '사진 설명을 입력하세요'가 비슷한 역할을 해줄 뿐이다.)
아래는 설정 방법 설명 차 올리는 티스토리 글쓰기 예시다. 대체 텍스트를 뭐라고 썼을까?
'티스토리 및 네이버 블로그에 이미지 alt 속성 설정하는 방법'라고 썼다. 정말 단순하고 쉽지 않은가? 중요한 건, 작은 것 하나도 놓치지 않는 것이다.
하지만, 모든 이미지에 alt 속성이 필요할까?
검색엔진 최적화(SEO) 관점에서만 생각하면 간단하다. '검색엔진에게 의도를 알려 사용자에게 의미를 전달해야 하는가?' 그렇다면 'Yes'다. 하지만 '화자의 감정 표현 목적인 이모티콘이나 짤 이미지, 꾸미기 목적의 브러시나 선형 이미지' 등에는 'No'라고 말하겠다. 무조건 금지라는 건 아니지만 비워 두는게 더 낫다는 의미이다. 의미도 없는 해당 이미지를 통해 웹 접근성 향상을 노린다고? 그 어떤 방문자보다 앞단에서 나의 웹사이트를 방문하는 것은 '검색엔진'이다.
또한 이미지 alt 속성은 콘텐츠의 맥락과 일치해야 하며, 문장 구조가 자연스러워야 한다. 트래픽 유도를 위해 무작위로 키워드만 삽입한 경우, 구글 알고리즘은 이러한 alt 속성을 스팸으로 간주하고 검색엔진에 색인을 생성하지 않게 된다.
한 때 유명했던 밈을 예로 들어 설명해 보겠다. 콘텐츠의 내용은 '올겨울 가장 추운 서울 아침, 체감 온도 영하 20도'이며, 이미지는 '꽁꽁 얼어붙은 한강 위로 고양이가 걸어다니는 이미지'이다.
잘못된 이미지 alt 속성 예시
<img src="image.jpg" alt="꽁꽁, 한강, 고양이, 겨울, 얼음, 고양이 귀여워, 웃음, 감동">
올바른 이미지 alt 속성 예시
<img src="image.jpg" alt="꽁꽁 얼어붙은 한강 위로 고양이가 걸어다닙니다">
이번 콘텐츠의 흐름상 심플하게, 올바른 alt 속성을 사용하여 보는 이 모두의 이해도를 높여준 기자님이라고 칭해드리고 싶으며, 나는 위 이미지의 alt 속성은 설정하지 않았다.
'나우인포뉴스 > IT' 카테고리의 다른 글
[유튜브 SEO] '구글 키워드 플래너' 무료 사용법 알고, 검색엔진 최적화하기 (1) | 2024.08.20 |
---|---|
[블로그 방문자 늘리기] 롱테일 키워드 예시를 활용한 검색엔진 최적화(SEO) (5) | 2024.08.12 |
[티스토리 네이버 노출] 서치어드바이저 등록방법 (2) | 2021.01.23 |
[구글링 하는법] 구글 검색 달인 되기, 사진 구글링 하기 (4) | 2020.12.11 |
[티스토리 HTML] 티스토리 본문 목차(TOC) 만들기 (4) | 2020.11.09 |