스크린 리더와 검색 엔진이 사이트 콘텐츠를 이해할 수 있도록 이미지 설명을 작성하세요.

대체 텍스트는 방문자가 이미지에 더 쉽게 접근할 수 있도록 이미지에 추가하는 짧은 설명입니다. 대체 텍스트는 일반적으로 페이지에 일반 텍스트로 표시되지 않지만, 스크린 리더가 방문자에게 음성으로 읽어주거나 이미지가 로드되지 않을 때 브라우저에 표시됩니다. 또한 검색 엔진이 사이트의 콘텐츠를 식별하는 데 사용됩니다.

일부 이미지는 다른 텍스트를 대체 텍스트로 자동 사용하지만, 이미지 블록과 자동 레이아웃에는 대체 텍스트를 직접 추가해야 합니다.

이미지에 대체 텍스트를 추가하는 방법 안내 비디오

대체 텍스트 작성 모범 사례와 사이트의 다양한 이미지에 대체 텍스트를 추가하는 방법을 알아보려면 이 비디오를 시청하세요.

효과적인 대체 텍스트 작성하기

대체 텍스트를 작성할 때는 다음 사항에 유의하세요.

• 이미지를 볼 수 없는 사람에게 설명하듯이 작성하세요.
• 관련 키워드를 자연스럽게 포함하되 키워드 남용은 피하세요.
• 간결하게 작성하세요. 일반적으로 150~200자가 적당합니다.
• '사진', '이미지' 등의 단어는 생략하세요. 예를 들어, 녹색 꽃병 사진 대신 녹색 꽃병으로 작성하세요.
• 단어 사이에 하이픈 대신 공백을 사용하세요.

Squarespace AI로 대체 텍스트 생성

Squarespace AI를 사용하여 대체 텍스트를 생성하는 기능은 버전 7.1 의 플루이드 엔진 섹션 에서만 사용할 수 있습니다.

SEO 보고서 도구는 사이트에서 대체 텍스트가 없는 이미지를 찾아 검토, 편집 및 저장할 수 있는 설명을 제안합니다. 이미지 블록, 갤러리 섹션, 자동 레이아웃에서 대체 텍스트가 누락되었는지 확인합니다. 이 도구는 컬렉션 아이템에 추가된 이미지를 스캔하지 않습니다.

SEO 보고서 도구로 대체 텍스트를 생성하는 방법은 다음과 같습니다.

1. SEO/AI 가시성 패널을 엽니다.
2. SEO 완성도 점수 섹션에서 AI로 개선을 클릭합니다.
3. 대체 텍스트가 누락된 것으로 표시된 이미지를 검토한 다음 편집 또는 재생성을 클릭하여 제안된 텍스트를 수정합니다.
4. 제안된 텍스트를 추가할 준비가 되면 저장 및 계속을 클릭합니다.

팁: TinyIMG 확장 프로그램을 연결하여 이미지 크기, 파일 이름 및 대체 텍스트가 검색 엔진과 방문자에게 최적화되도록 하세요. 지원팀에서 Squarespace Extensions 연결 또는 연결 해제를 도와드릴 수 있지만 사용과 관련된 문제 해결은 도와드릴 수 없습니다. 기타 문의 사항이 있는 경우 확장 프로그램 제공업체에 직접 문의 해 주세요.

이미지 블록에 대체 텍스트 추가

이미지 블록의 블록 편집기에는 대체 텍스트 전용 필드가 있습니다. 해당 위치에 대체 텍스트를 추가하지 않으면 대체 텍스트가 표시되지 않습니다. 대체 텍스트가 없으면 스크린 리더와 같은 보조 기술이 해당 블록을 인식할 수 없습니다.

이미지 블록에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

자동 레이아웃 이미지에 대체 텍스트 추가하기

자동 레이아웃은 버전 7.1에서 사용할 수 있습니다.

자동 레이아웃의 섹션 에디터에는 대체 텍스트 전용 필드가 있습니다. 해당 위치에 대체 텍스트를 추가하지 않으면 대체 텍스트가 표시되지 않습니다. 대체 텍스트가 없으면 스크린 리더와 같은 보조 기술이 해당 블록을 인식할 수 없습니다.

자동 레이아웃 섹션의 이미지에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 페이지 패널을 엽니다.
2. 자동 레이아웃이 있는 페이지를 클릭한 다음 편집을 클릭합니다.
3. 자동 레이아웃 섹션에 커서를 올리고 콘텐츠 편집을 클릭합니다.
4. 콘텐츠 탭을 클릭합니다.
5. 대체 텍스트를 추가하려는 이미지를 클릭합니다.
6. 이미지 대체 텍스트에서 대체 텍스트를 입력합니다. 콘텐츠 탭에 이미지가 표시되지 않으면 요소를 클릭하고 이미지 표시 토글을 켜세요.
7. 뒤로를 클릭한 후 자동 레이아웃의 모든 이미지에 대해 반복하세요.
8. 저장을 클릭합니다.

제품 이미지에 대체 텍스트 추가

모든 제품 이미지에 최대 200자의 대체 텍스트를 추가할 수 있습니다. 대체 텍스트를 추가하지 않으면 제품 이름이 대체 텍스트로 사용됩니다.

제품 이미지에 대체 텍스트를 추가하려면 다음 단계를 따르세요.

1. 페이지 패널을 엽니다.
2. 스토어 페이지를 클릭한 다음 카테고리를 클릭하거나 모두를 클릭합니다.
3. 제품 이미지에 커서를 올리고 ...을 클릭한 다음 메타데이터 편집을 클릭합니다.
4. 대체 텍스트 필드에 텍스트를 추가합니다.
5. 적용을 클릭한 다음 저장을 클릭합니다.

이메일 캠페인 이미지, 블로그, 제품 섹션에 대체 텍스트 추가

Squarespace 이메일 캠페인에서 캠페인에 추가한 이미지, 블로그 게시물, 제품에 대체 텍스트를 추가할 수 있습니다. 이러한 섹션의 경우, 대체 텍스트를 추가하지 않으면 대체 텍스트가 표시되지 않습니다. 캠페인 머리말에 삽입한 이미지와 로고에는 대체 텍스트를 추가할 수 없습니다.

캠페인에 대체 텍스트를 추가하는 방법은 다음과 같습니다.

1. 이메일 캠페인을 엽니다.
2. 초안을 클릭한 다음 초안 위로 커서를 올리고 연필 아이콘을 클릭합니다.
3. 초안에서 이미지 섹션이나 블로그 섹션, 제품 섹션을 클릭합니다.
4. 오른쪽 패널에서 대체 텍스트를 추가하려는 이미지나 블로그 게시물, 제품을 클릭합니다.
5. 이미지 대체 텍스트에 대체 텍스트를 입력합니다. 대체 텍스트가 자동으로 저장됩니다.

다른 텍스트 필드를 대체 텍스트로 사용하는 사이트의 이미지

사이트의 대부분의 이미지에는 전용 대체 텍스트 필드가 없으며, 대신 관련 텍스트 필드의 내용을 대체 텍스트로 자동 사용합니다. 예를 들어 갤러리 섹션 이미지는 설명을 대체 텍스트로 사용합니다.

각 이미지 유형에 어떤 텍스트가 사용되는지 표에서 확인합니다.

대체 텍스트를 추가하지 않으면 어떻게 되나요?

사이트의 대부분 영역에서 다른 대체 텍스트가 추가되지 않은 경우 이미지의 파일 이름이 대체 텍스트로 사용됩니다. 이미지의 파일 이름을 만들 때는 대체 텍스트 모범 사례를 따르는 것을 권장하지만, 이미 이미지를 업로드한 경우 애셋 라이브러리에서 파일 이름을 업데이트할 수 있습니다.

대체 텍스트를 추가할 수 없는 이미지도 있나요?

예. 다음과 같은 이미지는 대체 텍스트를 지원하지 않습니다.

• 섹션 배경 이미지 - 추상적인 배경 이미지나 콘텐츠를 구분하는 그래픽과 같은 장식용 이미지는 일반적으로 설명이 필요하지 않습니다. 대체 방법이 필요한 경우 커스텀 코드를 사용해 볼 수 있지만, 코드 기반 솔루션의 설정이나 문제 해결을 도와드릴 수는 없습니다.
• 비디오 블록 맞춤형 섬네일 이미지 - 파일 이름이 이미지의 정적 URL에 표시되지만 대체 텍스트로는 표시되지 않습니다.