블로그 운영 시 이미지에 alt나 title 속성을 꼼꼼하게 넣는 것은 SEO 최적화에서 매우 중요한 요소입니다. 특히 검색엔진이 이미지를 어떻게 인식할지를 결정짓는 핵심 데이터가 바로 alt 속성이죠. 하지만 매번 이미지를 업로드할 때마다 이 설명을 일일이 넣는 것은 상당히 번거로운 작업입니다.
이번 글에서는 업로드된 이미지의 파일명을 기반으로 alt와 title을 자동으로 삽입해주는 자바스크립트 코드를 소개합니다. 블로그스팟(Blogger) 사용자라면 누구나 간단히 설정하여 SEO 효과를 누릴 수 있습니다.
📌 이미지 설명(alt, title)이 중요한 이유
이미지의 alt 속성은 단순히 마우스 오버 시 나타나는 설명이 아니라, 검색 엔진이 이미지를 "이해"하는 데 사용하는 핵심 메타 정보입니다.
또한 title 속성은 방문자에게 추가 정보를 제공할 수 있어 사용자 경험(UX) 측면에서도 유용합니다.
이 속성들이 누락되면:
- SEO 점수 하락
- 검색 결과에 이미지 노출 누락
- 접근성(A11Y) 저하
결국 블로그 전체의 품질 지표가 떨어질 수 있습니다.
⚙️ 자동 삽입 자바스크립트 코드 설명
아래 코드는 페이지에 있는 모든 <img> 태그를 탐색하여, src 속성에서 이미지 파일명을 추출하고 이를 alt, title 속성에 자동으로 넣어주는 구조입니다.
<!-- 업로드된 이미지 파일명 기준으로 title, alt 자동 입력되는 코드 -->
<script>
function setAltAndTitleFromSrc(img) {
const src = img.getAttribute('src');
if (!src) return;
const decodedSrc = decodeURIComponent(src);
const fileName = decodedSrc.split('/').pop().split('.')[0]; // 확장자 제거
if (!img.hasAttribute('alt') || img.getAttribute('alt') === '') {
img.setAttribute('alt', fileName);
}
if (!img.hasAttribute('title') || img.getAttribute('title') === '') {
img.setAttribute('title', fileName);
}
}
function autoApplyAltTitleToImages() {
const imgs = document.querySelectorAll('img');
imgs.forEach(setAltAndTitleFromSrc);
}
document.addEventListener('DOMContentLoaded', autoApplyAltTitleToImages);
</script>
이 코드는 jQuery 없이 작동하는 순수 자바스크립트(Vanilla JS)로 구성되어 있어 가볍고 빠릅니다.
✅ 어떤 조건에서 자동 삽입되나요?
이 코드가 작동하려면 아래 조건을 만족해야 합니다:
<img>태그에src속성이 정상적으로 입력되어 있어야 함alt또는title속성이 없거나, 비어 있어야 함 (alt=""또는 아예 없음)
즉, 수동으로 이미 alt/title을 입력한 경우에는 해당 값을 유지하고, 비어 있는 경우에만 파일명을 자동 삽입합니다.
기존 데이터는 절대 덮어쓰지 않으므로, 안심하고 사용할 수 있습니다.
🧪 이미지 예시로 보는 적용 결과
HTML 원본 예시:
<img src="https://example.com/images/travel_sunset.jpg">
적용 후 결과:
<img src="https://example.com/images/travel_sunset.jpg" alt="travel_sunset" title="travel_sunset">
파일명이 곧 alt, title로 변환되며, travel_sunset이라는 키워드가 자동으로 이미지에 설명처럼 들어가게 됩니다. 이는 검색 노출 시 강력한 보조 역할을 합니다.
🧠 적용 방법과 SEO 효과
적용 위치:
-
블로그 HTML 편집기에서
<body>닫는 태그 전에 </body> 삽입하면 됩니다. - 또는 전체 템플릿에 넣어 자동 적용되도록 설정할 수 있습니다.
SEO 향상 기대 효과:
- 이미지 검색 결과 노출 증가
- 구글, 네이버의 이미지 정보 수집에 유리
- 블로그 전문성 상승 및 신뢰도 강화
리뷰를 마치며
이미지는 단순한 시각 보조 수단을 넘어, 블로그의 SEO 품질을 좌우하는 핵심 요소로 자리 잡았습니다. 이번에 소개한 자바스크립트 코드를 블로그에 적용하면, 이미지마다 일일이 설명을 달지 않아도 파일명을 기준으로 자동 설정되어 블로그 관리가 훨씬 편해집니다.
특히 블로그스팟처럼 HTML을 직접 다룰 수 있는 플랫폼에서는 누구나 쉽게 사용할 수 있는 강력한 자동화 도구입니다. 아직 alt, title을 수동으로 넣고 있었다면, 지금 이 코드를 적용해보세요. 시간은 아끼고, SEO는 살리는 일석이조의 효과를 누릴 수 있습니다! ✨
