[javascript] 검색엔진 최적화를 위해 블로그 이미지에 alt 속성을 자동으로 추가하는 방법

이미지에 alt 속성을 하는 것은 검색 최적화에 많은 도움이 됩니다.

구글의 경우에는 이미지로 검색할 때 이미지 alt 속성의 텍스트를 우선 검색 대상으로 사용합니다. 다만 구글의 경우에는 검색 인덱스를 생성할 때 이미지 alt 속성이 참조 대상이며 전체 검색 결과에서 미치는 영향은 미미합니다.

네이버의 경우에는 alt 속성이 없는 이미지를 포함한 글은 색인을 생성하지만 문제가 있는 글로 분류를 해서 표시합니다. 네이버 블로그나 네이버 안의 글에 대한 색인 생성 방식을 기준으로 구분을 하기 때문에 검색 결과 표시에서 우선 순위가 밀리게 됩니다.

alt 속성 입력을 지원하지 않거나 입력이 불편한 블로그 플랫폼도 있기 때문에 alt 속성을 잘 사용하지 않게 되는 경향이 있지만, alt 속성을 사용하면 검색 결과 순위를 올리는데 도움이 되며, 특히 이미지 검색을 할 때 이미지가 상위에 노출될 가능성이 높아집니다.

블로그 플랫폼이나 셀프호스팅 블로그 시스템에 따라서는 alt 속성을 자동으로 입력해주는 기능을 제공해주는 경우도 있지만, 대부분의 경우는 직접 입력하거나, 기능을 커스터마이징을 해야 합니다.

자바스크립트 코드 삽입이 가능한 블로그 플랫폼이거나, 셀프호스팅 서비스를 사용해서 블로그를 운영하는 경우 다음 자바스크립트 코드를 삽입해서 검색 색인을 개선할 수 있습니다.

다음 코드는 고스트CMS를 사용할 때 본문 글에서 alt 속성이 없는 이미지가 있으면, 이미지 파일 이름(확장자 제외)을 대문자로 alt 속성에 자동으로 입력(생성)해주는 자바스크립트 코드입니다.

고스트에서 본문글 안의 모든 이미지를 선택하는 쿼리선택자는 "div.gh-content img" 입니다.

window.addEventListener("DOMContentLoaded", function(){
  const imgs = Array.from(document.querySelectorAll("div.gh-content img"))
  imgs.forEach(img => {
    if(img.alt == ""){
      const altText = img.src.split("/").at(-1).split(".").slice(0, -1).join(".").replaceAll("-","").toUpperCase()
      img.setAttribute("alt", altText)
    }
  })
})

티스토리의 경우 기본 구조를 사용하거나, 일반적인 스킨을 사용할 경우 "div.article img"로 본문 안의 모든 이미지들을 선택할 수 있습니다.

이미 alt 속성이 입력되어 있는 이미지는 제외하기 때문에 기존에 작성한 글에 영향을 주지 않습니다.