alt 태그 자세히 적어서 구글 SEO 최적화 점수 높이는 방법

alt 태그란 'alt 텍스트', 'alt 속성' 또는 '대체 텍스트'라고 불리는 HTML의 한 요소입니다. alt 태그를 잘 적어야 구글 SEO 점수가 올라가고 검색에 더 잘 노출됩니다. 우리가 네이버나 티스토리 블로그, 워드프레스, 블로그스팟 등에서 글을 적을 때 이미지를 첨부하는 경우 사용됩니다. 그런데 그냥 무작정 넣는다고 효과가 있을까요? 전혀 아닙니다. 구글 seo에 실질적 도움이 되는 alt 태그에 대해 자세히 설명드리겠습니다. 

 

[목차]

1. alt 태그(대체 텍스트)는 무엇인가
2. 구글 SEO 최적화 점수를 높이는 이유
3. alt 텍스트를 잘 적는 방법
4. alt 속성의 나쁜 예와 좋은 예
5. alt 태그 사용 시 주의해야 할 사항

 

alt 태그(대체 텍스트)는 무엇인가

위에서 설명한 것처럼 HTML의 한 요소이고 웹페이지나 블로그를 작성할 때, 이미지를 사용하면 필요합니다. 구체적인 정의는 위키에 간결하게 잘 설명되어 있습니다. 간추려서 설명하면 2가지 이유로 사용됩니다. 첫째는 이미지가 표시되지 않을 경우, 두 번째는 시각 장애인을 위해서입니다.

 

HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링 되지 못할 때 나타날 문자열을 지정하기 위한 값이다. 다음과 같은 이유로 사용된다.

● 그림의 링크가 죽었거나, 인터넷 연결 속도나 품질이 낮다든지 화면이 제한적인 이동형 장비에서 그림을 내려받지 않고 문자열만 보여주기 위해 사용된다.
● lynx나 w3m과 같은 텍스트 전용 웹 브라우저에서 사용된다. 텍스트 브라우저들은 일반적으로 그림을 직접 보여줄 수 없으므로 alt 속성에 있는 값을 보여주는 경우가 많다. 그러나 예외적으로 w3m-img는 그림을 직접 보여 준다.
● 수많은 검색 엔진은 그림에 대한 정보를 alt 속성을 읽어서 얻는다.
● 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린 리더(또는 Text-to-speech) 소프트웨어에서 사용된다.

예를 들어 아래와 같이 사용하면 그림이 표시되지 않는 웹 브라우저에서는 '그림'이라는 문자열이 표시되며 스크린 리더를 이용할 경우 이미지의 URL이나 링크 대신 alt 속성으로 지정한 문구 '그림'이 목소리로 출력된다.
   <img src="주소" alt="그림" />
별다른 의미 없이 화면을 꾸미기 위해 사용된 그림 등이 웹 브라우저나 스크린 리더가 잘못 인식하는 것을 방지하려면 alt=""처럼 빈 속성 값을 지정하면 된다.

이미지 위에 마우스 커서를 올려놓을 때 나오는 툴팁 문구를 지정하기 위한 방법으로 여러 인터넷 브라우저에서는 alt 속성을 전통적으로 사용해왔지만 실제 그림의 제목을 지정하기 위해서는 title 속성이 따로 사용된다.

 

구글 SEO 최적화 점수를 높이는 이유

그런데 구글 SEO 최적화 점수를 높여야 한다고 말하는데, 도대체 왜 높여야 하는지를 알아야 합니다. 크게 다음 2가지 이유입니다. 

 

반응형

 

첫 번째는, 구글 오가닉 검색 결과에서 높은 순위로 올리기 위해서입니다. 우리가 웹페이지나 블로그 글을 작성하는 이유는, 결국 검색하는 사람들에게 정보를 제공하기 위해서입니다. 수많은 글들 중에서 검색 결과 상위에 올라가는 글들은, 키워드 매칭이나 사이트 점수 외에도 구글 SEO 점수가 포함됩니다. 그리고 수많은 SEO 요소들 중에서 alt 태그도 꽤 중요한 위치를 차지합니다.

 

두 번째는, 이미지 검색 결과에 표시되기 위해서입니다. 많은 사람들이 텍스트 검색뿐 아니라 이미지 검색도 사용합니다. 내가 올린 이미지가 단순히 글을 장식하는 것 외에 이미지 검색에서도 상위에 표시되고 싶다면, alt 속성에 신경을 써야 합니다. 

 

alt 텍스트를 잘 적는 방법

alt 태그를 잘 적는 방법이란 결국 구글 SEO에서 높게 점수를 매기는 방법이라는 뜻입니다. 어떻게 하면 잘 적을 수 있는지는 대체 텍스트의 목적을 생각해 보면 간단합니다. 구글, MS, 네이버 등 대기업들은 웹 접근성 측면에서 이것을 신경 쓸 수밖에 없습니다. 

 

첫 번째, 이미지가 표시되지 않을 때 텍스트가 표시됩니다. 이 경우에 표시되는 텍스트를 통해 이미지를 추측해야 합니다. 간단한 단어보다 상세하게 적힌 문장이 추측에 더 도움이 되는 것은 당연합니다. 

두 번째, 시각 장애인들이 보조 프로그램을 통해 웹페이지나 블로그를 읽을 때 필요합니다. 시각 장애인들은 alt 텍스트를 통해 이미지를 상상하게 됩니다. 머릿속에서 그림이 그려질 수 있을 정도로 생생한 설명이 있다면 더할 나위 없습니다.

 

alt 속성의 나쁜 예와 좋은 예

이제 나쁜 예들과 좋은 예를 설명드릴게요. 이것을 보면 바로 이해가 가실 겁니다. 

 

1. 여자가 핸드폰을 보고 있는 사진의 경우

☞ 나쁜 예: 여자, 여자와 핸드폰

☞ 좋은 예: 갈색머리의 여자가 공원원에서 아이폰을 사용하고 있는 중

 

2. 닭이 울고 있는 사진

☞ 나쁜 예: 닭, 붉은 닭

☞ 좋은 에: 붉은 벼슬의 닭이 울고 있음

 

3. 남자가 에스컬레이터를 내려가는 사진

☞ 나쁜 예: 남자, 에스컬레이터를 내려감

☞ 좋은 예: 검은 배낭을 메고 에스컬레이터를 타고 내려가는 남자

 

alt 태그 사용 시 주의해야 할 사항

이제 여러분은 네이버나 티스토리 블로그, 워드프레스, 블로그스팟 등에서 글쓰기를 할 때 이미지를 위한 alt 속성을 빠뜨리지 않을 것입니다. 이것은 좋은 효과를 볼 테지만 혹시나 어뷰징 행위에 대한 아이디어가 생길 수도 있습니다. 대체 텍스트에 키워드를 섞어 넣는 등의 발상 말입니다. 하지만 이것은 위험할 수 있습니다. 아래 주의해야 하는 사항도 꼭 읽어보세요.

 

1. 이미지를 가능한 한 구체적으로 설명합니다. 대체 텍스트는 무엇보다도 이미지를 볼 수 없는 사용자에게 이미지에 대한 텍스트 설명을 제공하도록 설계되었습니다. 이미지가 진정으로 의미/가치를 전달하지 않고 디자인 목적으로만 존재하는 경우 HTML이 아닌 CSS 내에 있어야 합니다.

2. (상대적으로) 짧게 유지하십시오. 가장 널리 사용되는 스크린 리더는 대체 텍스트를 약 125자로 잘랐으므로 해당 문자 수 이하로 유지하는 것이 좋습니다.

3. 키워드 사용 대체 텍스트는 페이지에 타깃 키워드를 포함할 수 있는 또 다른 기회를 제공하며, 따라서 귀하의 페이지가 특정 검색어와 관련성이 높다는 것을 검색 엔진에 알릴 수 있는 또 다른 기회를 제공합니다. 우선순위는 이미지를 설명하고 콘텍스트를 제공하는 것이지만 그렇게 하는 것이 합리적이라면 페이지에 있는 하나 이상의 이미지에 대한 대체 텍스트에 키워드를 포함시키십시오.

4. 키워드 스터핑(스팸덱싱)을 피하십시오. Google은 잘못 작성된 대체 텍스트에 대해 점수를 부여하지 않지만 대체 텍스트를 생각할 수 있는 한 많은 관련 키워드를 입력할 기회로 사용하면 문제가 발생합니다. 이미지에 콘텍스트를 제공하고 가능한 경우 대상 키워드를 포함하는 설명적인 대체 텍스트를 작성하는 데 집중하고 그대로 두십시오.

5. 이미지를 텍스트로 사용하지 마십시오. 이것은 대체 텍스트 관련 모범 사례라기보다는 일반적인 SEO 친화적 웹 개발 신조에 가깝습니다. 검색 엔진은 이미지 내의 텍스트를 읽을 수 없기 때문에 단어 대신 이미지를 사용하는 것을 피해야 합니다. 그렇게 해야 하는 경우 대체 텍스트 내에서 사진이 말하는 내용을 설명하십시오.

6. 대체 텍스트에 불필요한 "~의 이미지", "~의 사진" 등을 포함하지 마십시오. 대체 텍스트가 이미 이미지를 참조하고 있다고 가정하므로 지정할 필요가 없습니다.

7. longdesc=""를 잊지 마세요. 더 긴 설명이 필요한 더 복잡한 이미지의 경우 longdesc="" 태그를 사용하여 탐색합니다.

8. 양식 버튼을 무시하지 마십시오. 웹사이트의 양식이 "제출" 버튼으로 이미지를 사용하는 경우 alt 속성을 지정하십시오. 이미지 버튼에는 "검색", "지금 신청", "가입" 등과 같이 버튼의 기능을 설명하는 alt 속성이 있어야 합니다.

 

[글쓰기 관련 유용한 글들]

전현무 글쓰기 어플 - 브런치 앱

 

글쓰기 능력 좋아지는 문장 구성 방법 (블로그 글쓰기)