본문 바로가기
블로그 이야기/티스토리 집짓기

포스팅할때 팁, 크롤링과 이미지 ALT

by MinorityOpinion 2020. 3. 20.
728x90

티스토리는 에디터가 두가지가 있는데, 구에디터와 새로운 에디터로 나누어 집니다. 새로운 에디터는 UI적으로는 깔끔해 보이는데, 기능적인 면으로는 크게 없어진 것이 많아서 좀 별로 였지만 그래도 포스팅하는데 형식을 크게 신경쓰는 편이 아니었고, 글을 그대로 작성하였지만 나중에는 아차 싶었습니다. 바로 ALT기능때문입니다.


크롤링 예시구글이 크롤링을 하는 과정

네이버 검색엔진이나 다음 또는 구글의 검색엔진에 글을 검색하면 여러가지 게시글들이 나오게 됩니다. 이 과정은 저절로 이루어진것이 아니라, 봇(bot)라는 웹페이지 수집 기계가 돌아다니면서 적합한 게시글을 노출을 시켜줍니다. 참고로 이런 알고리즘은 대외적으로 공개하지는 않는데, 악용의 우려가 있기 때문입니다. 아마 이런 알고리즘을 완벽하게 이해하는 사람이 있다면 그 사람은 굉장히 쉽게 큰돈을 벌 수 있겠지요


이야기가 옆으로 빠졌는데, 본론으로 돌아갑시다.


그런데 봇은 눈이 없습니다. 어떤 형형색색의 사진이 있더라도 봇은 이 사진을 구분하지 못합니다. 그래서 나온것이 ALT입니다. 사진에다가 설명(주석)을 달아 놓음으로 봇에게 이 사진은 어떤 뜻을 가지고 있어라고 알려주는 역활을 합니다.


그런데 신에디터에서는 이 기능이 빠져 있습니다...(HTML모드로 들어가서 수동으로 해야 합니다.)



신에디터신에디터로 사진을 첨부하는 예시


이렇게 사진을 첨부하면 아래에다가 이미지를 설명해보세요 라고는 나오는데... 이는 ALT가 아니고 그냥 글이었습니다.


구에디터로 접근해서 사진을 클릭해보면


구에디터구에디터로 사진을 첨부하는 예시


이렇게 나오는데 대체 텍스트가 있는 부분이 ALT입니다. 만약에 사진이 깨져서 엑박이 나오게 되면 엑박과 함께 ALT로 지정된 대체 텍스트가 나옵니다.


자막은 사진 아래에 추가적으로 표시되는 문구입니다. 대체 텍스트는 넣더라도 자막은 빼셔도 됩니다.


엑스박스가뜬사진사진은 안나오지만 ALT가 대신 출력이된다.

요런 식으로 말이지요, 엑박이 뜨고 대신에 ALT가 나온 것을 볼 수 있습니다.



HTML에 ALT가 추가된 예시이미지코드에 ALT코드가 삽입된 것을 확인 할 수 있다.


HTML코드에서 보시면 위 처럼 alt코드가 추가된 것을 볼 수있습니다.


신에디터에서 사진하나하나 찾아서 alt코드를 넣는것보다 구에디터에서 간단하게 처리하는게 훨씬 좋습니다.


이렇게 alt를 넣어주게되면 아마 봇이 좀 더 좋아하는 환경이 만들어져서 노출이 늘어나지 않을까 생각을 해봅니다.


거기에 검색의 효율성 말고도 다른 이유가 하나 있는데 웹페이지의 접근성을 위해서 입니다. 예를 들어서 시각장애인의 경우, 텍스트를 대신읽어주는 등의 보조기구를 통해서 인터넷을 하는데 이런 사진에 설명이 있다면 시각장애인도 무리없이 사이트를 즐길 수가 있습니다. 공공기관의 경우 웹페이지 접근성에 대한 평가를 하고 미달될경우 불이익이 있습니다.

728x90