[블로그] 티스토리 게시글 내 이미지 삽입 팁(feat. ALT 태그)

티스토리 알트 태그 삽입 꿀팁

 

티스토리 블로그 이미지 ALT 태그 쉽게 삽입하기

ALT 태그 꿀팁!

 

클래스 101 리뷰요정리남님 강의 중 '검색에 유리하게 글 쓰는 방법'편에서 ALT 속성에 대해서 잠깐 나왔었는데, HTML과 관련된 것들이 아직은 생소하기도 했고, HTML에 들어가서 alt를 추가하는 게 어렵게만 느껴져서 포기했었다.

 

그런데 티스토리를 통한 수익형 블로그 관련해서 서치를 하다보면 구글 SEO(최적화)가 항상 키워드로 등장했고, 어느정도는 최적화를 위해 필요하겠다 싶어 검색을 했다.

다행히 티스토리 기능이 업데이트 되어 직접 HTML 소스를 건들이지 않아도 ALT태그를 삽입할 수 있게 되었다는 걸 알고 꿀팁을 공유하고자 포스팅 한다 :)

 

■ ALT 태그는 무엇인가?

• HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 대체 문자열을 지정하기 위한 값이다.
• 리뷰요정리남님이 설명을 빌리자면, 텍스트는 텍스트 그 자체에 키워드가 있어서 로봇이 이런 걸 파악한다. 그런데 이미지는 무슨 내용을 담고 있는 것인지 로봇이 판단할 수가 없다. 이 때 이미지 태그에 ALT 속성을 추가해서, 로봇이 이게 어떤 이미지인 지 알 수 있게 도와주는 것이라고 한다. 여기서 꿀팁! 이미지 파일명도 가급적이면 사진과 관련있는 키워드를 넣는게 좋다고 한다.
• 즉 화면에 출력되는 이미지는 글을 읽을 수 볼 수 있는 사람을 위한 설명, ALT 속성은 글을 읽지 못하는 사람(로봇)을 위한 설명이라고 이해하면 된다.

 

■ ALT 태그는 왜 필요한가?

• ALT 태그는 이미지가 제대로 화면에 뜨지 않을 경우 대신 보여지는 대체 택스트이다. 
• 수많은 검색 엔진에서 그림에 대한 정보를 ALT태그를 통해 얻기 때문에 최적화를 위해서는 꼭 필요한 속성이다.
• 또한, 시각장애인 등을 위해 문서의 내용을 목소리로 변환해 주는 음성 합성 기술을 이용한 스크린 리더 소프트웨어에서도 사용되기 때문에 중요하다.
• 티스토리의 경우 구글 애드센스 광고를 가장 많이 활용한다. 효과적인 구글 광고를 위해서는 구글 SEO(최적화)는 필수이다. 구글에서는 친절하게도 SEO 가이드를 제공하고 있는데, '이미지 최적화하기'에서 ALT 속성을 사용할 것을 안내하고 있다. 귀찮았지만 구글에서 하라니까 그냥 하자는 마음이 되었다

 

■ ALT 태그 쉬운 삽입 방법!

 ① 본문에 이미지를 삽입한다.

 ② 삽입된 이미지를 클릭한다.

 ③ 대체텍스트 삽입 아이콘을 클릭하여 ALT 속성에 들어갈 간단한 이미지 설명을 입력한 후 확인 버튼을 누른다.

대체텍스트삽입 아이콘

 

 

위 과정을 모두 하고 HTML로 모드를 바꿔서 보면, ALT태그가 삽입된 것을 확인할 수 있다.

HTML모드 시 ALT태그 확인 가능

 

■ ALT 태그 삽입 시 피해야 할 사항(Feat. 구글 SEO)!

•  image1.jpg, pic.gif, 1.jpg와 같은 일반적인 파일 이름을 사용하는 경우 
• 매우 긴 파일 이름을 작성하는 경우
• 대체 텍스트를 키워드로 채워 넣거나 전체 문장을 복사하여 붙여넣는 경우
• 스팸으로 간주될 수 있을 정도로 대체 텍스트를 지나치게 길게 작성하는 경우
• 사이트 탐색에 이미지 링크만 사용하는 경우