WordPress에서 이미지 alt 텍스트를 추가하는 방법

WordPress의 이미지에 "Alt Text"로 알려진 대체 텍스트를 추가하는 것은 웹 사이트에 액세스 할 수 있고 SEO 친화적 인 웹 사이트를 제공하는 간단하지만 필수적인 단계입니다. Alt Text는 시각적 요소를 정확하게 설명하여 시각 장애가있는 사용자가 누락 될 중요한 정보를받을 수 있도록 도와줍니다. 좋은 텍스트를 작성하면 검색 엔진과 AI 알고리즘이 이미지를 이해하여 사이트의 가시성을 높일 수 있습니다.

이 가이드에서는 세 가지 쉬운 방법을 사용하여 좋은 텍스트를 만드는 이유, 중요한 이유 및 WordPress의 이미지에 추가하는 방법을 안내합니다.

alt 텍스트 가란 무엇이며 왜 중요한가요?

Alt Text는 사이트 코드에 나타나는 이미지에 대한 간단한 설명입니다. 스크린 리더는이를 사용하여 시각 장애가있는 사용자에게 이미지를 설명합니다. 또한 이미지가로드되지 않으면 ALT 텍스트가 브라우저에 표시되어 콘텐츠를 이해할 수 있도록합니다. 스크린 샷에 명확하고 설명적인 ALT 텍스트를 제공하면 검색 엔진 최적화 및 가시성에도 기여합니다.

사용자 경험 측면에서 Alt Text는 또한 화면 크기로 인해 이미지가 올바르게 표시되지 않을 수있는 휴대 전화 및 태블릿에서 콘텐츠가 의미가 있고 액세스 할 수 있도록합니다. 효과적인 Alt 텍스트를 작성하면 사이트를보다 포괄적으로 만들뿐만 아니라보다 귀중하고 실용적인 WordPress 사이트를 만듭니다.

HTML alt 속성 이해

ALT 속성은 이미지를 지정하는 데 사용되는 HTML 코드의 필수 부분입니다. IMG 태그에 포함되어 있으며 이미지에 대한 간단한 설명을 제공합니다. 예를 들어, 이미지에 "Lasagna를 먹는 큰 오렌지 고양이"를 읽는 Alt 속성이있는 경우 스크린 리더는 사용자에게 "큰 오렌지 고양이"를 발표합니다.

WordPress에서 Alt Text를 추가하는 방법

Media Library, Gutenberg 편집기를 통해 또는 코드에서 직접 WordPress의 Alt Text를 추가 또는 편집 할 수 있습니다. 세 가지 옵션을 모두 검토하여 귀하와 귀하의 웹 사이트에 적합한 옵션을 선택할 수 있습니다.

1. WordPress 미디어 라이브러리 사용

이것은 이미 업로드 한 이미지에 대체 텍스트를 추가하는 가장 쉬운 방법입니다.

• WordPress 대시 보드에 로그인하십시오.
• 미디어> 도서관 으로 이동하십시오.
• 편집하려는 이미지를 클릭하십시오.
• 오른쪽의 부착 세부 사항 창에서 Alt 텍스트 필드를 찾으십시오.
• 설명적인 ALT 텍스트를 입력하십시오. 필드에서 클릭하거나 창을 닫습니다. WordPress는 변경 사항을 자동으로 저장합니다.

2. Gutenberg 편집기 사용

게시물이나 페이지에 이미지를 추가하거나 편집하는 경우 바로 Alt 텍스트를 설정할 수 있습니다.

• Gutenberg 편집기에서 게시물 또는 페이지를 엽니 다.
• 편집하려는 이미지 블록을 클릭하십시오.
• 오른쪽 사이드 바에서 이미지 설정 과 ALT 텍스트 (대체 텍스트) 필드를 찾으십시오.
• alt 텍스트를 입력하십시오.
• 변경 사항을 유지하려면 게시물이나 페이지를 저장하거나 업데이트하십시오.

3. 코드를 직접 편집합니다

HTML에 익숙한 사람들을 위해 코드 편집기를 사용할 수 있습니다.

• Gutenberg 편집기의 코드 편집기 로 전환하십시오.
• 이미지의 <Img> 태그를 찾으십시오.
• Alt = "설명 텍스트" 속성을 추가하거나 편집하십시오.
• 게시물 또는 페이지를 저장하거나 업데이트하십시오

Media Library, Gutenberg 편집기를 선호하거나 코드를 직접 편집하든 WordPress에 Alt Text를 추가하는 것은 매우 간단합니다. 테스트 페이지 또는 스테이징 웹 사이트에서 이러한 각 방법을 시도하면 이미지에 액세스 할 수 있고 설명 적이며 모든 사용자 및 검색 엔진에 최적화 할 수 있습니다.

작문 효과 효과 Alt Text

우리가 보았 듯이 효과적인 Alt 텍스트를 작성하는 것은 웹 사이트에 액세스 할 수있게하고 사용자 경험을 향상 시키며 컨텐츠를 모두에게 포함시키는 데 필수적인 기술입니다. 다음 팁은 화면 독자에 의존하는 것을 포함하여 모든 사용자에게 명확하고 간결하며 의미있는 Alt 텍스트를 제작하는 데 도움이됩니다.

간결하고 설명 적입니다

Alt 텍스트를 작성할 때 이미지의 필수 요소를 명확하고 간단하게 설명하십시오. 불필요한 세부 사항으로 압도적으로 이미지의 내용을 이해할 수있는 충분한 정보를 사용자에게 제공하려고합니다. 이상적으로 125 자 미만의 주요 아이디어를 포착하는 문장이나 문구를 목표로하므로 스크린 리더가 처리하기가 쉽고 쉽게 읽을 수 있습니다.

키워드 스터핑을 피하십시오

SEO에 대한 많은 키워드를 추가하려는 유혹이 있지만, 관련이 없거나 반복적 인 키워드로 Alt 텍스트를 채우면 사용자에게 혼란스러워지고 검색 순위에 해를 끼칠 수도 있습니다. 대신 자연어를 사용하고 이미지 설명에 진정으로 맞는 경우 키워드 만 포함하십시오. 검색 엔진 최적화보다 명확성 및 사용자 경험을 우선시하십시오.

필요하지 않은 경우 "이미지"를 건너 뜁니다

스크린 리더는 이미 이미지가 발생할 때 이미 발표되므로 "이미지"또는 "그림"과 같은 문구로 대체 텍스트를 시작하는 것은 일반적으로 중복됩니다. “산 위의 일몰 이미지”보다는“산 위의 일몰”과 같은 설명으로 바로 가십시오. 유일한 예외는 컨텍스트가 사진, 그림 또는 아이콘을 구별하는 것과 같은 설명이 필요한 경우입니다.

각 Alt 텍스트를 독특하게 만듭니다

페이지에 몇 가지 유사한 이미지가 있으면 각 이미지에 대해 동일한 ALT 텍스트를 사용하지 마십시오. 대신, 설명을 조정하여 각 이미지를 독특하게 만드는 이유를 강조하십시오. 이를 통해 사용자는 컨텍스트를 이해하고 특히 사진 갤러리 또는 제품 목록에 대한 사이트에 액세스 할 수 있고 유익한 정보를 제공 할 수 있습니다.

내용과 기능을 설명하십시오

이미지가 페이지에있는 이유를 생각해보십시오. 순전히 장식적인 경우 Alt 텍스트를 비워 둘 수 있습니다 (빈 Alt 속성 사용, Alt =” ). 그러나 이미지가 버튼, 링크 또는 인포 그래픽과 같은 목적을 제공하는 경우 표시된 내용과 수행 사항을 모두 설명하십시오. 예를 들어, "PDF 버튼 다운로드"또는 "2022 년에서 2025 년까지의 판매 성장을 보여주는 그래프". 이런 식으로 사용자는 사이트에 액세스하는 방법에 관계없이 필요한 모든 정보를 얻습니다.

대체 텍스트 생성을위한 도구

몇 가지 도구가 효과적인 Alt 텍스트를 작성하는 데 도움이 될 수 있습니다. 예를 들어 WordPress 용 Yoast SEO 플러그인은 이미지에 대한 Alt 텍스트를 생성하는 데 도움이되는 기능을 제공하여 검색 엔진에 최적화되도록합니다. Adobe Creative Cloud는 또한 사용자가 비주얼에 대한 Alt 텍스트를 만드는 데 도움이되는 도구를 제공합니다.

또한 AltText.ai와 같은 온라인 도구는 특히 Alt 텍스트를 작성하지 않거나 많은 이미지에 대한 Alt 텍스트를 생성 해야하는 사람들에게는 매우 중요 할 수 있습니다.

이 도구는 프로세스를 단순화하여 모든 웹 사이트 이미지에 대해 설명적이고 Seo 친화적 인 Alt 텍스트를보다 쉽게 ​​만들 수 있습니다.

장기적인 이익을 가진 단기 작업

WordPress에서 이미지에 Alt Text를 추가하는 것은 빠르고 쉽고 접근성 및 SEO를 지불합니다. 새 이미지를 업로드하든 오래된 이미지를 업데이트하든, Alt 텍스트가 일상의 일부를 만드십시오. 방문자 (및 검색 알고리즘)가 감사합니다.

모든 사람을 위해 WordPress 프로젝트를 사용자 친화적으로 만드는 것에 대해 자세히 알아 보려면보다 접근하기 쉬운 사이트에 대한 7 가지 필수 요소에 대한 가이드를 확인하십시오.