이미지가 없을 때, 대체 이미지 아이콘(NO IMAGE)을 설정해주는 것은 SEO측면에서 중요한 일입니다. 대체 이미지 아이콘이란, 웹사이트나 앱에서 이미지가 로딩되지 않거나 오류가 발생했을 때 보여주는 아이콘을 말합니다. 이 아이콘은 사용자에게 이미지가 없다는 것을 알려주어, 사용자 경험을 향상시킵니다.
제가 사용하고 있는 NO IMAGE 아이콘들 – 무료니까 마음껏 가져다 사용하셔도 됩니다.
이미지의 링크를 이용해서 사용하시는건 X.
돈내고 사용하는 워드프레스 블로그라 ㅠ.ㅠ
사진을 다운 받으셔서 사용하세요.
이미지가 없을 때, 대체 이미지 아이콘을 사용하는 이유
사용자 경험 향상
이미지가 없는 공백은 사용자에게 불완전하고 불친절한 인상을 줄 수 있습니다. 대체 이미지 아이콘은 공백을 채우고, 사용자에게 정보를 제공하며, 디자인적으로 균형감을 주어 사용자 경험을 향상시킬 수 있습니다.
접근성 증진
시각 장애인이나 저시력자 등의 사용자들은 이미지를 볼 수 없거나 잘 볼 수 없습니다. 이런 사용자들에게는 대체 이미지 아이콘과 함께 대체 텍스트(alt text)를 제공하는 것이 중요합니다. 대체 텍스트는 스크린 리더와 같은 보조 기술을 통해 읽혀질 수 있으며, 이미지의 내용을 설명해줍니다. 예를 들어, “사람 얼굴 모양의 아이콘. 이름은 홍길동입니다.”와 같은 대체 텍스트를 제공할 수 있습니다.
아래는 구글의 SEO 공식 가이드입니다.
이미지가 없을 때, 대체 이미지 아이콘을 만들고 적용하는 방법
적절한 아이콘 선택
이미지의 내용이나 카테고리와 관련된 아이콘, 혹은 그냥 예쁜 아이콘((⊙_⊙)？)을 선택합니다. 가능하면 일관된 스타일과 색상의 아이콘을 사용합니다. 너무 복잡하거나 작은 아이콘은 피합니다.
대체 텍스트 작성
이미지의 내용을 간결하고 명확하게 설명하는 대체 텍스트를 작성합니다. 필요하다면 추가적인 정보도 제공합니다.
HTML 코드 작성
<img> 태그에 src 속성으로 이미지의 경로를, alt 속성으로 대체 텍스트를, onerror 속성으로 대체 이미지 아이콘의 경로를 작성합니다. 예를 들어, <img src=”hong.jpg” alt=”사람 얼굴 모양의 아이콘. 이름은 홍길동입니다.” onerror=”this.src=’face.png'”>와 같은 코드를 작성할 수 있습니다.
마무리
이상으로 이미지 없을 때, 대체 이미지 아이콘에 대해 알아보았습니다. 이 기능을 활용하여 웹사이트나 앱의 사용자 경험과 접근성을 높여보세요.
아래 링크한 글들도 추천 드려요
