누락된 alt 속성 입력해 블로그 이미지 최적화 하기

블로그를 시작하고 포털사이트에 사이트를 등록한 지 일주일 가량이 지났으나 아직까지도 블로그가 정상적으로 운영되기 위한 단계가 많이 있음을 느끼고 있습니다. 오늘은 그 해결의 일환으로 검색엔진 최적화(Search-Engine Optimization)를 위한 여러 항목 중 블로그에 이미지 파일을 업로드할 때 유의해야 할 alt 속성에 대해 알아보았습니다. 어떻게 하면 SEO를 저해하지 않는 이미지를 삽입할 수 있는지 방법을 알아보고 하단에 alt 속성을 입력을 쉽게 할 수 있는 방법과 자작 프로그램도 마련해 보았으니 관심 가져주시면 감사하겠습니다.

 

alt 속성이란?

alt 속성이란 이미지 파일이 랜더링 되지 못했을 때(엑박) 대체해서 표시되는 문자열로 alternative의 줄임말입니다. 인터넷 연결 속도나 품질이 낮은 경우나 화면이 제한적인 이동형 장비에서 그림을 내려받지 않고 문자열만 보여주기 위해 사용되는 것인데 우리에게 중요한 부분은 alt 속성이 누락될 경우 SEO에서 좋지 않은 평가를 받기 때문입니다. 검색엔진은 사진을 파악할 때 alt 속성을 기준으로 파악한다고 하니 사진을 잘 나타낼 수 있는 설명을 작성해 주는 것이 검색에 노출되는 것에 유리하겠죠.

 

 

내 블로그 진단하기

그럼 alt 속성이 제대로 입력되어 있는 것은 어떻게 확인할까요? 우선 네이버 서치 어드바이저의 사이트 최적화 현황을 살펴보았을 때 링크 관리 부분에 주황색 느낌표 표시가 있다면, 일단 alt 속성 누락을 의심해볼 필요가 있습니다.

 

 

빙 웹마스터 툴(Bing Webmaster Tools)에서 제공하는 SEO 관리 기능은 이 부분을 좀 더 상세하게 확인할 수 있었는데요(물론 네이버와는 로직이 다를 수 있겠지만), Site Scan과 URL 검사를 통해 전체 페이지와 개별 페이지의 문제점을 파악할 수 있었습니다. 우선, Site Scan을 통해서 전체적인 파악을 해보면 오류나 경고가 집계되는데 이 부분이 개선해야 할 부분입니다. 아래 사진에서 경고가 51건에서 21건으로 줄어든 것은 alt 속성을 수정하기 전과 후의 상태입니다.

 

 

제 경우에는 다른 유형들도 있지만 alt 특성에 대한 경고가 거의 대부분을 차지하고 있었습니다. 유형들을 클릭해보면 발생된 페이지들의 리스트를 확인할 수 있습니다. 

 

 

Site Scan에서는 문제가 발생한 페이지까지만 정보를 제공하고 구체적으로 어느 부분을 수정해야 하는지 나와있지 않기 때문에 문제가 발생한 URL을 확인하여 URL 검사를 진행하면 문제점을 파악하기가 용이합니다.

 

 

URL 검사 시 유의할 점은 색인된 페이지가 아니라 점입니다. 기존의 색인된 데이터는 과거의 페이지로 현재 상황과는 다를 수 있기 때문입니다.

 

 

위의 사진은 라이브 페이지에 대한 리뷰이고, 아래 사진은 색인된 페이지의 문제점에 대한 리뷰입니다. 만약 라이브 URL에서 아래 사진처럼 문제가 발생한다면 문제를 클릭해 html 코드를 확인할 수 있습니다.

 

 

상단에 내비게이터도 위치하고 있어 문제점을 파악하기에 용이합니다. 이제 이 부분들을 실제 웹페이지에서 수정해 SEO요건을 충족시켜주면 되는 것입니다.

 

 

티스토리 alt 속성

티스토리 구에디터에서는 alt 속성을 입력할 수 있었다는 글들을 확인할 수 있었지만 현재 신에디터에서는 html 편집을 통해서만 alt 속성을 입력할 수 있었습니다. 그렇기 때문에 html과 친숙하지 않다면 꽤나 어렵고 번거로운 작업이 불가피한 것입니다. 그래도 블로그 최적화를 위해서라면 감수해야겠죠!

 

html을 파악해보면 대략적으로 아래와 같은 형태로 이루어져 있고 이미지를 대체할 텍스트를 (alt 속성)이라고 표시한 부분에 alt="" 형식으로 입력하면 되는 것을 짐작할 수 있었습니다.

 

<!-- [샾샾_Image|파일경로|정렬기준|이미지 사이즈 등의 정보(alt 속성)|이미지 설명||_샾샾] -->
[샾#_Image|~/img.png|alignCenter|data-origin-width="0" data-origin-height="0" 
data-ke-mobilestyle="widthContent"|Bing Site Scan 결과화면||_#샾]

 

alt 속성 입력하기

위에서 진단한 문제 페이지에 대하여 alt 속성을 입력해줘야 하는데 블로그를 시작하고 별도로 관리하지 않았을 경우 모든 포스팅의 이미지를 변경해주는 작업을 진행해야 할 것입니다. alt 속성을 입력하는 방법은 다음과 같습니다.

 

1. 수기로 입력하기

앞서 설명드린 대로 html 태그에 적절한 alt 속성을 수기로 입력하는 방법입니다. data-origin-height 우측 편에 alt="" 항목을 넣어주면 되는데 확인 결과 순서는 조금 바뀌어도 에디터에서 정렬해주는 것을 확인할 수 있었습니다. 이 경우 기본 모드와 html 모드를 번갈아가며 확인을 해야 하고 어려운 코드를 해석해야 하는 불편함이 있었습니다.

 

2. 정규 표현식 활용

여러 블로거 분들이 포스팅해주신 내용을 확인해 보았을 때 정규표현식을 활용하면 복잡한 과정을 단순화할 수 있다는 아이디어를 얻을 수 있었습니다. 간단히 설명하자면 이미지 코드의 "|(이미지 설명)||_##] 부분이 규칙적으로 발생하는데 이것을 " alt="(이미지 설명)"|(이미지 설명)||_##] 으로 찾아 바꾸는 것을 정규표현식으로 한 번에 처리하는 것입니다. 그러기 위해서 글을 작성할 때 이미지마다 아래 사진에 표시된 부분을 모두 기입하는 작업이 필요합니다. 

3. 자작 프로그램

• 2021/02/08 - [Study/Python] - 티스토리 포스팅 alt 속성 입력 프로그램

정규 표현식을 활용해 파이썬으로 프로그램을 제작해 보았습니다. 위의 링크를 누르시면 다운로드 페이지로 이동할 수 있으니 많은 사용과 피드백 부탁드리니다. 정규식이나 html 코드에 대한 지식이 부족해 파악하지 발생할 수 있는 점은 양해 부탁드리며, 오류사항이 있다면 알려주시면 감사하겠습니다. (제 블로그 게시글에 대한 테스트는 마쳤습니다.)

 

추가로 확인해야 될 사항

포스팅한 사진들의 alt 속성을 모두 입력했는데도 alt 속성에 대한 문제가 남아있다면 블로그 스킨을 의심해보시는 것을 추천드립니다. 스킨 html 편집을 통해 해결이 가능하고 최적화가 잘되어있는 스킨을 사용하시는 것도 방법이 될 수 있을 것입니다. 감사합니다.