이미지 제목 속성 이해하기
게시 됨: 2020-10-23웹사이트의 이미지를 최적화하는 것은 쉬운 일이 아닙니다. 긴 페이지 로딩 시간을 방지하기 위해 파일 크기를 관리할 수 있어야 할 뿐만 아니라 간과하기 쉬운 SEO(검색 엔진 최적화)를 개선할 수 있는 많은 기회를 제공합니다. 예를 들어 이미지 제목 속성과 사이트의 시각적 요소에서 이 속성이 수행하는 역할을 모를 수 있습니다.
이 게시물에서 우리는 이미지 제목 속성에 대해 조명하고 이것이 alt 속성과 어떻게 다른지 논의하고 SEO 전략에 대한 의미에 대해 이야기할 것입니다. 사이트 방문자에게 숨기는 방법도 알려드립니다.
바로 뛰어들자!
YouTube 채널 구독
이미지 제목 속성 소개
가장 먼저 해야 할 일: 이미지 제목 속성이 이미지의 파일 이름과 동일 하지 않습니다 . 오히려 사진이나 그래픽의 HTML 태그에 포함될 수 있는 정보입니다. 다음은 제목 속성이 끝에 있는 예입니다.
<img src="filename.jpg" alt="description of your image" title="image title">
title 속성의 가장 주목할만한 영향은 사용자가 이미지 위로 마우스를 가져갈 때 사이트 프런트 엔드에서 "도구 설명"으로 볼 수 있다는 것입니다.
모든 브라우저가 이 기능을 지원하는 것은 아닙니다. 그러나 Firefox는 그렇게 하는 몇 안 되는 브라우저 중 하나이며 웹에서 세 번째로 인기 있는 브라우저입니다. 미디어 라이브러리를 통해 WordPress에 이미지 제목 속성을 추가할 수 있습니다. 문제의 이미지를 클릭하고 제목 필드를 채우십시오.
블록 편집기에서 직접 추가할 수도 있습니다. 이미지 블록에 대한 고급 설정을 확장하고 제목 속성 필드를 입력합니다.
마우스 오버 시 이미지 제목을 표시하는 목적은 방문자에게 약간의 추가 컨텍스트를 제공하는 것입니다. 예를 들어, 일부 콘텐츠 제작자는 이미지에 묘사된 사람들의 이름을 포함하거나 사용자가 알면 도움이 될 수 있는 주요 세부 정보를 포함합니다.
그러나 특히 모든 브라우저에서 사용자에게 표시되지 않는 제목 속성에만 의존하고 싶지는 않습니다. 어떤 경우에는 캡션이 더 효과적일 수 있습니다. 또한 제목 속성이 있더라도 항상 이미지에 대체 텍스트를 추가해야 합니다.
제목 속성을 만들 때 몇 단어로 유지하는 것이 가장 좋습니다. 호버 텍스트가 너무 길지 않고 방문자에게 가치를 제공하도록 선택적이고 설명적이어야 합니다.
Title 속성과 Alt 속성의 차이점
제목 속성을 포함했더라도 이미지에 대체 텍스트를 추가하는 것이 중요하다고 앞서 언급했습니다. 콘텐츠 제작자가 이미지 제목 속성을 alt 속성과 혼동하거나 둘 다 사용하는 것이 과하다고 생각하는 것은 일반적인 실수입니다.
alt 속성은 HTML 태그에서 이미지의 대체 텍스트를 지정합니다. 이전 예제에 나열된 두 번째 속성입니다.
<img src="filename.jpg" alt="description of your image" title="image title">
대체 텍스트의 목적은 이미지를 로드하지 못하거나 화면 판독기를 사용하기 때문에 볼 수 없는 사용자에게 시각적 요소를 설명하는 것입니다. 이 텍스트는 렌더링할 수 없는 경우 이미지 대신 표시됩니다.
WordPress에서 미디어 라이브러리 또는 블록 편집기의 이미지 블록 설정을 통해 이미지에 대체 텍스트를 추가할 수 있습니다. 이는 사이트가 접근성 표준을 충족하는지 확인하는 데 중요하므로 그렇게 하는 것이 좋습니다.
alt 속성을 대체하기 위해 이미지 제목 속성을 사용하지 않는 것이 매우 중요합니다. 모든 화면 판독기가 제목 속성을 지원하는 것은 아니며 키보드 탐색에 의존하는 사용자가 이미지를 보기 위해 마우스를 가져갈 수 있는 방법이 없으므로 사이트에 심각한 접근성 문제가 발생할 수 있습니다.
이미지 제목 속성이 SEO에 미치는 영향
이미지 제목 속성이 SEO에 얼마나 중요한지에 관해서는 혼재된 메시지가 많이 있습니다. 일부는 추가 키워드를 통합하는 훌륭한 방법이라고 주장하지만 다른 일부는 검색 엔진 봇이 해당 키워드를 크롤링하지도 않는다고 말합니다.
추격을 위해 이미지 제목 속성은 직접적인 순위 요소가 아닙니다. 모든 이미지에 제목을 추가하여 이미지를 최적화해도 검색 엔진 결과에서 페이지의 가시성에 큰 변화가 없을 것입니다.
그러나 제목 속성을 포함해도 SEO 관점에서 사이트가 손상 되지는 않습니다. 실제로 Google은 권장합니다. 검색 엔진 봇이 크롤링하고 키워드를 통합하면 최소한 Google 이미지 검색 결과에서 이미지를 향상시킬 수 있습니다.
또한 이미지 제목은 방문자와 주요 세부 정보를 공유하여 사이트의 사용자 경험(UX)을 개선할 수 있습니다. 이는 페이지 조회수, 세션 시간 및 기타 측정항목과 같은 순위 요소에 영향을 주어 SEO에 간접적으로 기여할 수 있습니다.
그럼에도 불구하고 여러 번 언급했듯이 모든 브라우저와 장치가 호버 텍스트를 지원하는 것은 아닙니다. 미디어 라이브러리를 살펴보고 모든 파일에 제목을 추가하는 것은 대부분의 사용자가 볼 수 없다면 엄청난 시간 낭비가 될 수 있습니다.
WordPress에서 이미지 제목 도구 설명을 숨기는 방법
이미지 제목 도구 설명을 숨기는 것이 좋습니다. 방문자가 귀찮게 생각할 수도 있고 주로 SEO 목적으로 사용하고 싶지만 독자가 귀하의 콘텐츠를 이해하는 데 도움이 될 필요는 없다고 생각합니다.
블록 편집기와 미디어 라이브러리의 이미지에서 제목 속성을 제거하면 됩니다. 그러나 그렇게 하면 잠재적인 SEO 이점을 잃게 됩니다.
툴팁을 숨기려는 대부분의 사람들은 이미지 태그에 속성을 유지할 수 있지만 프런트 엔드에는 표시되지 않도록 JavaScript를 사이트에 추가합니다. 이 프로세스를 더 쉽게 하려면 머리글 및 바닥글 삽입과 같은 플러그인을 사용하는 것이 좋습니다.
스크립트 태그로 래핑된 다음 코드를 <head> 섹션에 추가합니다.
jQuery(document).ready(function($) {
$('img[title]').each(function() { $(this).removeAttr('title'); });
});
Divi를 사용하는 경우 추가 플러그인 설치를 건너뛰고 Divi > 테마 옵션 > 통합 으로 이동하여 이 코드를 추가할 수 있습니다.
이 화면의 첫 번째 코드 편집기는 머리글 및 바닥글 삽입과 마찬가지로 사이트의 <head> 섹션에 JavaScript를 추가합니다.
결론
수년 동안 온라인 콘텐츠를 만들고 이미지의 제목 속성에 대해 생각하지 않는 것이 가능합니다. 그러나 완전히 무시하면 사용자에게 추가 컨텍스트를 제공할 기회를 놓칠 수 있습니다. 더 중요한 것은 이 속성을 오용하면 사이트의 접근성과 SEO에 부정적인 영향을 미칠 수 있다는 것입니다.
이 게시물에서는 SEO를 극대화할 수 있도록 이미지 제목 속성과 alt 속성의 차이점에 대해 논의했습니다. 또한 방문자가 사진이나 그래픽 위로 마우스를 가져갈 때 볼 수 없도록 프런트 엔드에서 이미지 제목 도구 설명을 숨기는 방법을 안내했습니다.
이미지 제목 속성 또는 이미지 최적화에 대해 질문이 있습니까? 아래 댓글 섹션에 남겨주세요!
Jane Kelly의 이미지 / Shutterstock.com