구글 SEO 이미지 최적화 alt 태그 사용 방법

구글 SEO

안녕하세요!  오늘은 구글 SEO 이미지 최적화를 위해 사용하는 alt에 대한 설명과 이 alt 태그를 티스토리에 적용하는 법에 대해 정리해 보았습니다.

구글 seo에 조금이라도 관심이 있고 내가 운영하는 사이트, 블로그 최적화에 관심이 있다면 도움이 되실 거예요.

 

 

요즘 수익형 블로그와 마케팅에 관심을 가지면서 글 SEO 검색엔진 최적화에 대해서도 더 많이 알고 싶어 졌답니다.

제가 이 분야에 관심을 가지게 된 이유가 바로 수익형 블로그 때문이에요. 

지금 저는 재취업을 해야만 하는 상황인데 아이 학교 등원이 정상적으로 이루어지지 않으니  당장 구직활동에 어려움을 겪고 있어요.

내년에 취업을 하여 안정적인 급여가 들어오더라도 지금 시간적인 여유가 있을 때 수익 파이프라인을 구축 해 두면 좋을 것 같아 공부하고 있답니다.

 

 

 

구글 SEO에 대해 공부하면서 당장 책을 구입하지는 않았어요.

공부를 잘하기 위해서는 기본인 교과서 내용을 잘 이해해야 하잖아요. 저 역시 구글 검색의 기본을 알기 위해 구글에서 제공하는 SEO 기본 가이드를 보고 있어요.

링크 주소는 아래 있으니 관심 있으신 분은 보시면 도움이 되실 거예요.

developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko&utm_source=wmx&utm_campaign=links&visit_id=637205719901031789-1856413564&rd=2#images

Search Engine Optimization (SEO) Starter Guide  |  Google 검색 센터

 

 

구글 SEO 검색가이드 보면 이미지 최적화 하기 부분에 보면 'Alt'속성을 사용하라고 되어있어요.

구글 검색센터 SEO가이드

Alt는 alternate text 대체 텍스트란 의미로 Html 태그의 속성 중 하나로 이미지와 관련이 있는 태그예요. 

• 인터넷이 느려서 데이터 전송이 늦어 이미지를 표시하지 못할 때
• 이미지 파일 주소가 잘 못 되었을 때

alt 속성으로 이미지에 대체 텍스를 입력 해 놓으면 이미지가 안 보이더라도 텍스트가 대체되면서 어떤 이미지에 대한 설명인지 알 수 있게 됩니다.

 

 

쉽게 이해할 수 있도록 예시로 파일을 직접 만들어봤습니다.

alt 적용 비적용 이미지

1번 이미지는 alt  속성이 없고 이미지 경로가 잘못되어 이미지가 제대로 출력되지 않고 설명이 없어 어떤 이미지인지 알 수가 없습니다. 네  맞아요! 이미지가 깨져 보이는거죠.

 

하지만 3번은 이미지가 깨져서 안 보이지만 '꽃과 책'이라는 설명이 있어 이미지에 대한 내용을 알 수  있습니다.

 

또한 화면을 읽어주는 스크린리더는 alt 태그 속성을 읽어주기 때문에 보는데 어려움을 겪는 분들도 이미지에 대한 설명을 들을 수 있어요.

 

Alt 태그는 구글 SEO 이미지 최적화뿐만 아니라 웹 접근성을 위해서라도 사용하면 좋을 것 같습니다.

 

 

 

 

실제 사이트에서 Alt 태그가 사용 된 사례

구글 홈페이지에서 alt 사용

구글 홈페이지를 열어 F12을 눌러 소스를 보면 구글 로고 부분에 alt 속성이 연말 스페셜로 지정된 것을 볼 수 있어요.

 

 

ㅇ

인터넷 사용할때 이미지에 마우스 롤 오버 했을때 연한 노락색 박스로 글씨가 보이는 것은 title 태그 속성 때문입니다.

• Alt = 이미지가 안 보일때 대신할 대체 텍스트
• title = 하이퍼링크 설명

이렇게 이해하면 도움이 되실것 같습니다.

 

 

그럼 티스토리 이미지에 Alt 태그는 어떻게 적용해야 하나?

 

티스토리에  Alt태그 입력하는것은 어려지 않으나 손품이 좀 들어갑니다.

포스팅 하실때 사용한 이미지 하단에 이미지 설명을 적어주면 alt태그 속성 넣어주는 작업이 한결 쉽고 빨라지니 넣어주세요.

이미지 하단에 설명넣기

포스팅이 완료되면 HTML 모드로 들어갑니다.  Ctrl + F를 눌러 'img' 로 검색하면 이미지가 들어간 부분을 쉽게 찾을 수 있어요.

저는 아래 이미지처럼 이미지 사이즈 뒷 부분에 alt 속성을 넣었습니다.

html에 alt 태그 넣기

제가 아까 포스팅 하실 때 이미지 하단에 설명 적어주시면 좋다고 했잖아요.

위 파란 형광색 부분이 포스팅 할때 적어준 이미지 설명 내용입니다. 이 내용을 보고 Alt 속성 내용을 빠르게 입력할 수 있는거죠. 

 

내용은 적은데 포스팅 하다보니  시간이 굉장히 오래 걸리네요.  블로그 수익화의 길은 참 험난하네요ㅠㅠ

 

구글 SEO 이미지 최적화 alt 태그 사용 방법에 대해서 정리했는데요 도움이 되셨나요?

구글 seo 열심히 해서 제가 포스팅 한 글들이 구글 검색 상위 점령해서 돈벼락 맞았으면 좋겠네요. ㅎㅎㅎㅎ