[구글 검색엔진 이미지 최적화] 이미지에 alt 속성을 넣는 이유는...
반응형
[구글 검색엔진 이미지 최적화] 이미지에 alt 속성을 넣는 이유는? (이미지에 alt 속성 넣는 방법)
이미지태그에 alt속성
안녕하세요. 애리포터 입니다:)
티스토리 유입경로를 보시면 네이버, 다음, 구글, 빙 다양한 곳에서 유입이 됩니다. 전 특히 구글 유입이 가장 많습니다. 티스토리 자체가 다음 기반의 블로그이지만, 다음 같은 경우는 최근 글 위주로 상위 노출이 되기 때문에 장기적으로 봤을 때는 구글에 노출이 많이 되어야 블로그를 오래 운영할 수 있다고 생각합니다.
목차
1. alt 속성이란?
2. 이미지에 alt 속성을 넣어야 하는 이유
3. 이미지에 alt 속성 넣는 방법
4. 여러 이미지에 자동으로 alt 속성 넣는 방법
1. alt 속성이란?
이미지가 랜더링 되지 못할 때, 즉 이미지가 깨질 때 이미지를 대체할 문자를 지정하는 값이라고 생각하면 됩니다.
이런 식으로 이미지가 보이지 않을 때, 이 이미지가 어떤 이미지인지 설명을 해주는 기능을 합니다.
이미지에 alt속성 넣기
2. 이미지에 alt 속성을 넣어야 하는 이유
첫 번째, 웹 표준에 어긋난다[ 웹표준 규칙: alt="" ]
alt속성은 음성인식기를 사용하는 시각장애인들을 위한 속성으로 반드시 " " 안에 이미지에 대한 설명을 기입해야 합니다.
두 번째, 이미지가 깨졌을 때 이미지 대신 문자로 대체하기 위함이다
인터넷 로딩 문제나 혹은 해당 이미지를 링크로 첨부했을 때 링크가 없어진 경우에 어떤 이미지인지 확인을 할 수 없을 때 alt 속성을 넣으면 어떤 이미지인지 알 수 있습니다.
세 번째, 검색엔진 최적화(SEO: Search Engine Optimization)
검색엔진이 특정 사이트를 크롤링할 때, 이미지가 있으면 이미지의 alt속성을 이용해서 해당 이미지를 더 잘 이해하고 검색 결과 순위에서 적절하게 색인할 수 있도록, 즉 찾을 수 있도록 합니다. 그러니 이미지에 alt속성이 없으면 검색엔진이 이미지를 색인하지 못하겠죠.
구글 검색엔진 최적화 기본 가이드에도 "이미지 관련 정보는 'alt'속성을 이용해 제공할 수 있습니다"라고 명시되어 있습니다. 그러니 이미지에 alt속성을 넣는 게 구글 유입에 도움을 줍니다.
구글 검색엔진 이미지 최적화
3. 이미지에 alt 속성 넣는 방법
이미지에 alt 속성 넣는 방법은 아주 간단한데요. 글을 전부 작성하고 나서 상단에 있는 기본 모드를 눌러줍니다. 그러면 서브 메뉴가 나오는데 밑에 HTML을 눌러줍니다.
티스토리 기본모드에서 HTML
HTML모드를 누르면 이미지가 HTML 코드로 보이는데요.
이미지 HTML모드
이미지코드는 앞쪽에 Image라고 되어 있습니다.
이미지코드
두 개의 코드가 있는데 똑같은 이미지를 한 개 더 복사했습니다. 두 번째 이미지에만 alt속성을 넣어주겠습니다.
이미지alt속성
코드에 |alignCenter| 와 data-origin-width 사이에 alt속성을 넣어주시면 됩니다.
이미지alt속성2
마우스 오른쪽 눌러서 검사를 해보시면 이미지에 alt속성이 추가된 걸 보실 수 있습니다.
이미지 alt속성 완료
4. 여러 이미지에 자동으로 alt 속성 넣는 방법
글에 이미지가 많을 경우에는 이미지 하나하나에 alt 속성을 넣기가 귀찮고 시간이 걸리잖아요. 그럴 때 자동으로 alt속성을 넣을 수 있는 툴이 있는데, 미니 쿠파라는 분이 만드신 툴이 있어요.
미니 쿠파님의 alt 속성 툴
글을 전부 작성한 뒤에 HTML모드로 모든 코드를 복사한 다음에 여기 링크에 들어오셔서 입력 칸에 붙여 넣기를 하고 'alt태그 추가'버튼을 누르면 자동으로 이미지에만 alt태그가 들어갑니다. 그런데 이미지 밑에 설명글을 적지 않으면 alt=""이렇게 빈칸으로 나옵니다.
alt속성이 추가된 코드를 다시 복사해서 원래 글에 있던 코드를 삭제하고 복사한 코드를 붙여넣기 하면 됩니다.
728x90
반응형
from http://hg605329.tistory.com/161 by ccl(A) rewrite - 2021-09-29 22:26:07
댓글
댓글 쓰기