구글 페이지 스피드 인사이트에서 검사해보면 아이프레임 요소에 제목이 없음이라는 오류가 뜰 때가 있죠? 이걸 깔끔하게 해결하는 방법을 알려드릴게요. 웹 접근성도 챙겨서 스크린 리더 사용자들을 배려하고, 자바스크립트를 살짝 써서 사용자 경험까지 좋게 만드는 노하우예요.
웹 접근성 점수, 왜 아이프레임 제목이 중요할까요?
웹 접근성이라는 건 장애가 있는 분들을 포함해서 누구나 평등하게 웹사이트 정보를 볼 수 있어야 한다는 약속이에요. 구글 PageSpeed Insights 점수 항목 중에 접근성 부분에서 경고가 뜨는 가장 흔한 이유가 바로 iframe title 속성이 빠져있기 때문인데요.
화면을 읽어주는 스크린 리더는 페이지에서 아이프레임을 만나면 title 속성에 적힌 설명을 읽어주거든요. 이 설명이 없으면 사용자는 이게 광고인지 동영상인지, 아니면 다른 기능인지 알 수가 없어서 답답할 수밖에 없어요. 이렇게 되면 사용자 경험이 나빠지니 웹 페이지 성능 평가에서도 당연히 감점이 되는 거고요.
오류를 고치면 무엇이 달라질까요?
이 문제를 해결하면 사이트 신뢰도도 올라가고 검색 로봇이 내 글을 더 잘 수집하게 돼요. 속성이 있을 때와 없을 때 어떤 차이가 있는지 표로 정리해봤어요.
2. 바로 쓸 수 있는 코드 예시
아래 코드를 복사해서 블로그 스킨 편집의 head 태그 안쪽에 넣어주면 돼요. 티스토리 블로그 iframe 경고가 사라질 거예요. 만약 아이디(ID)가 다르다면 getElementById 안에 있는 이름만 살짝 바꿔서 쓰면 된답니다.
script
window.addEventListener('DOMContentLoaded', function() {
var iframe = document.getElementById('editEntry');
if (iframe) {
iframe.setAttribute('title', '티스토리 블로그 편집기');
}
});
/script질문 1: 모든 iframe에 제목을 넣어야 하나요?
답변: 네, 맞아요. 웹 표준(WCAG)에 따르면 페이지에 있는 모든 iframe은 그게 뭔지 설명하는 제목이 꼭 있어야 해요. 스크린 리더 사용자를 위해서 비어있지 않게 채워주세요.
질문 2: title 속성 추가가 구글 검색 순위에 영향이 있나요?
답변: 직접 순위를 올리는 건 아니지만, 구글은 접근성 점수를 웹사이트 품질을 평가하는 중요한 기준으로 봐요. 그래서 점수가 오르면 간접적으로 SEO 순위가 오르는 데 도움이 돼요.
질문 3: 타이틀이 중복되면 어떻게 하나요?
답변: 각각의 프레임이 하는 역할에 맞게 다른 제목을 쓰는 게 좋아요. 만약 내용이 같다면 문구를 조금씩 다르게 적어서 중복 오류를 피하는 게 좋습니다.
아이프레임 요소에 제목이 없음 문제를 해결하는 건 단순히 오류를 없애는 걸 넘어서, 누구나 편한 웹 환경을 만드는 과정이에요. 자바스크립트로 조금만 신경 쓰면 기술적인 문제도 금방 해결할 수 있답니다. SEO 꿀팁들을 하나씩 적용하다 보면 검색엔진도, 방문자도 좋아하는 블로그가 될 거예요.
누구나 차별 없이 정보를 얻을 수 있는 곳이 검색엔진에서도 좋은 점수를 받는다는 사실, 잊지 마세요.
