WordPress 대체 속성 설명: 이미지 대체 텍스트란 무엇입니까?

페이지와 기사 전반에 걸쳐 이미지를 사용하는 것이 얼마나 중요한지 우리는 모두 알고 있습니다. 단순한 텍스트 블록이 더 생생해지면 방문자의 참여를 시각적으로 더 많이 유도하고 메시지를 전달할 수 있습니다. 그러나 하나를 추가하면 하나의 이상하게 들리는 필드에 집중하지 않을 수 없습니다. "음, 대체 텍스트, 지금은 무엇입니까?"라고 생각합니다. 확실히 WordPress 개발자가 임의로 추가한 필드가 될 수는 없습니다. 존재하는 경우 목적이 있을 수 있습니다.

대체 텍스트는 이미지 태그에 추가된 HTML 속성입니다. 이미지를 표시할 수 없는 경우 WordPress에 표시되는 짧은 텍스트 문자열입니다. 대체 텍스트는 이미지 SEO를 향상시킵니다. 또한 스크린 리더를 사용하는 시각 장애인 사용자와 검색 엔진이 이미지의 내용을 이해하는 데 도움이 됩니다.

대체 텍스트에는 "alt tag", "alt text" 또는 "alt 속성"과 같이 아무렇게나 사용되는 몇 가지 이름도 있습니다. 이를 최대한 활용하려면 다음과 같은 alt 태그를 생각하는 것이 가장 좋습니다. alt 속성은 긴 보고서의 "실행 요약"과 같습니다. 이미지(즉, 보고서)에 포함된 내용을 매우 간략하고 구체적으로 요약합니다.

일부 기존 CMS 플랫폼과 많은 맞춤형 웹사이트에서는 각 페이지의 코드에 직접 해당 부분을 수동으로 추가해야 합니다. 그러나 여기 우리와 같은 운이 좋은 사람들은 WordPress에서 그 기능을 훨씬 쉽게 얻습니다.

이미지 대체 텍스트는 WordPress에서 어떻게 작동합니까?

대체 텍스트는 새로운 것이 아닙니다. 그들은 또한 WordPress에서만 제공하는 고유한 것이 아닙니다. 사실, 그것들은 20세기 말 인터넷의 초창기 시절로 거슬러 올라가는 아주 오래된 기능입니다.

HTML 2.0이 출시된 1995년에 도입된 이후 Alt 태그는 세 가지 구체적인 목적을 수행했습니다.

• 브라우저가 어떤 이유로 사진을 로드할 수 없는 경우 Alt 태그가 이미지 대신 페이지에 나타납니다.
• 스크린 리더는 인터넷을 검색할 때 시각 지원을 사용하는 사람들을 위해 대체 텍스트를 소리내어 읽어줍니다.
• Google과 같은 검색 엔진 봇은 이미지의 내용을 더 잘 이해하기 위해 이를 사용합니다.

따라서 대체 텍스트는 뛰어난 접근성 기능이며 추가 작업이 많이 필요하지 않습니다.

WordPress의 이미지 대체 텍스트의 예

이제 대체 텍스트의 몇 가지 예를 살펴보겠습니다. 나는 당신이 당신의 alt 태그에 포함하고 싶은 것을 정확히 이해할 수 있도록 어떤 좋은 예와 나쁜 예를 강조했습니다.

좋은 대체 텍스트의 예

다음은 블로그 게시물 중 하나에 삽입한 이미지입니다. 아래에서 볼 수 있듯이 이미지의 목적은 독자가 기사에 설명된 결과를 달성할 수 있는 방법을 정확히 보여주는 것입니다.

우리가 만든 alt 태그의 최종 결과는 "연락처 페이지의 NAP의 좋은 예"입니다.

이미지는 컨텍스트를 추가하고 사용자가 문제를 해결하는 데 도움이 되기 때문에 적절하게 표시하고 지적하는 것이 중요합니다.

잘못된 대체 텍스트의 예

한편 도움이 되지 않는 대체 텍스트를 만들 수도 있습니다. 동일한 이미지에 "NAP" 또는 "business NAP" 라는 대체 태그가 있다고 가정합니다 .

이 대체 텍스트는 아무에게도 도움이 되지 않고 시간만 소모하기 때문에 좋지 않습니다. 대체 텍스트가 일부 대체 텍스트보다 낫다는 말입니까? 논란의 여지가 있지만 이러한 대체 태그는 사용자 접근성 관점에서 도움이 되지 않는다는 것이 저희의 생각입니다. 또한 Google 크롤러에 대한 컨텍스트를 추가하지 않습니다. 이미지를 표시할 수 없는 최악의 시나리오에서도 사용자는 페이지에 무엇이 있어야 하는지에 대한 아이디어를 제공하는 간결한 문자열 대신 임의의 단어만 보기 때문에 여전히 혼란스러워합니다.

따라서 잘못된 alt 태그를 만드는 데 시간을 낭비하는 것은 가치가 없다고 결정했습니다. 대신 사이트를 확인하고 그렇게 하기로 결정할 때 실제로 도움이 되는 alt 태그를 만드는 것이 훨씬 더 나은 시간 투자임을 알게 되었습니다.

WordPress에서 멋진 이미지 대체 텍스트를 작성하기 위한 9가지 모범 사례

이제 WordPress에서 이미지의 alt 속성을 사용하는 방법을 알게 되었습니다. 이를 통해 올바르게 사용하고 있는지 확인하기 위한 몇 가지 팁과 모범 사례를 살펴보겠습니다.

1. 대체 텍스트는 125자 미만이어야 합니다.

대체 태그를 125자 미만으로 유지하십시오. alt 태그의 길이에 대한 엄격한 규칙은 없으므로 이 권장 사항을 경험에 따라 사용하십시오. 그러나 관련이 있는 경우 보다 설명적인 텍스트를 위해 이 일반 규칙을 자유롭게 희생하십시오. 그럼에도 불구하고 일반적으로 필요하지 않습니다.

또한 다음은 125자 모양의 예입니다.

"아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아아

그것은 많은 텍스트입니다! 대부분의 경우 대체 텍스트를 거기에 맞출 수 있습니다.

2. 좋은 Alt 태그를 작성하거나 전혀 작성하지 않음

그러나 낮은 마진은 어떻습니까? 기술적으로 아무 것도 없습니다(물론 0은 제외). 개인적인 경험으로 말하고, 게으른 길을 가고, 한두 단어만 쓰는 것 또한 시간을 할애할 가치가 없습니다. 즉, 좋은 alt 태그를 작성할 계획이 없다면 처음부터 태그가 없는 것처럼 좋습니다.

3. 관련 Alt 태그를 유사하지만 고유하게 유지

대체 태그를 유사하게 만드는 것은 완벽하게 허용되지만 여전히 고유해야 합니다. 방법 게시에 두 개의 연속 단계를 설명하는 이미지가 있다고 가정합니다. 그런 경우에는 부품이 중복되는 것은 어느 정도 피할 수 없습니다.

그러나 여기에서 각 단계를 명확하게 설명하고 올바른 번호로 표시하여 각 대체 텍스트가 충분히 고유한지 확인할 수 있습니다.

예: alt=" 이것은 WordPress alt text에 대한 내 자습서의 첫 번째 단계입니다." vs. alt=" WordPress alt tags 자습서의 두 번째 단계"

4. 관련이 없는 한 "~의 이미지"를 사용하지 마십시오.

일반적으로 대체 텍스트에 "~의 이미지" 또는 "~의 스크린샷"을 쓸 필요가 없습니다. 검색 엔진과 스크린 리더는 이미지를 다루고 있다는 것을 알고 있으므로 해당 텍스트를 추가할 필요가 없습니다. 대신 남은 공간을 더 잘 활용할 수 있습니다.

물론 해당 키워드 쿼리에 대해 Google에 표시되지 않는 한 사실입니다. 타겟 키워드에 "의 스크린샷"과 같은 문구가 포함되어 있는 경우 이미지에 추가하면 실제로 Google 검색에서 더 높게 표시되는 데 도움이 됩니다.

예를 들어 뉴스에서 정치인의 이메일 서신 이미지가 유출되었다는 소식을 들었다고 가정해 보겠습니다. 당연히 "유출된 이메일 이미지 [IMAGINARY NAME OF POLITICIAN]" 과 같은 것을 찾을 수 있습니다 .

여기에서 대체 텍스트에 "이미지"라는 문구를 추가하면 해당 검색어에 대해 표시되는 데 도움이 됩니다.

마찬가지로, 주제에 대한 "영감"에 대한 키워드를 대상으로 하는 게시물이 있다고 가정합니다. 이 경우 "[주제]의 영감을 주는 이미지" 와 같은 문구를 사용하는 것도 허용됩니다.

5. 대체 텍스트에 스팸 키워드를 넣지 마십시오.

alt 태그를 작성할 때 텍스트를 관련성 있게 유지하고 스팸 키워드를 피하십시오.

즉, 이미지가 개를 보여주는 경우 "dogs canine pet dog hound man's best friend dog breed pup" 과 유사한 대체 텍스트를 작성하지 마십시오 . 대신 컨텍스트를 추가하는 더 설명적인 것을 선택하십시오.

잠재적으로 이 텍스트는 이미지를 둘러싼 내용과 단락을 고려하여 이미지를 자연스럽게 설명합니다. 아래 섹션에서 구체적인 예를 보여 드리겠습니다.

6. 마지막으로 이미지를 추가하면 좋은 대체 텍스트를 작성하는 데 도움이 됩니다.

블로그 게시물을 완전히 준비한 후 이미지를 추가하면 Alt 태그를 놓치지 않고 나중에 수정하는 데 추가 시간을 할애해야 합니다. 경우에 따라 이미지를 삽입한 후 페이지에서 업데이트되지 않는 것을 발견하기 위해 alt 태그를 편집할 수도 있습니다.

WordPress에 이미지를 추가하는 것은 페이지와 게시물을 만들 때 마지막 단계로 수행하는 것이 가장 좋습니다.

7. 이미지 이름을 대체 텍스트로 사용

이미지를 소싱할 때 당신이 쓰고 있는 것과 매우 관련이 있는 이름을 지정하는 것을 기억하십시오. 공백을 사용하는 대신 대시를 사용하여 단어를 구분하면 됩니다. 이를 통해 이미지를 업로드하면 이미 작성한 이름을 복사하고 대시를 제거하기만 하면 됩니다. 이렇게 하면 시간 낭비 없이 완벽한 대체 태그를 얻을 수 있습니다. 이 프로세스를 수행하는 방법을 정확히 알아보려면 WordPress에 alt 태그 추가에 대한 가이드에서 이 섹션을 읽으십시오.

8. Great Alt 태그는 이미지를 자세히 설명합니다.

alt 태그를 작성할 때 설명하는 것이 중요합니다. 이미지에 있는 내용을 더 잘 설명할수록 시각 장애가 있는 사용자가 이미지를 삽입한 이유를 더 쉽게 이해할 수 있습니다. 검색 엔진에도 동일하게 적용됩니다. 이렇게 하면 누군가가 이러한 유형의 이미지를 검색할 때 Google에서 귀하의 사이트를 더 잘 보여줄 수 있습니다. 이는 롱테일 키워드라고도 하는 최적화한 것과 정확히 일치하는 검색보다 길고 다른 검색에서도 발생합니다.

9. 웹사이트 디자인 이미지를 CSS에 넣기

이미지가 순전히 디자인상의 이유로 만들어진 경우 웹사이트 스타일의 CSS에서 구현해야 합니다. 그렇게 하면 올바른 사이트 코드 구조/계층 구조가 설정됩니다. 또한 검색 엔진과 화면 판독기가 콘텐츠에 기여하는 이미지와 순수하게 디자인 기능으로 사용되는 이미지를 구분할 수 있습니다.

이 논리에 따라 이제 모든 이미지에 실제로 alt 태그가 있어야 한다는 것을 배웠습니다. HTML에서 이미지를 구현한다는 것은 이미지가 페이지에 컨텍스트를 추가하고 대체 텍스트를 추가할 수 있다는 것을 의미합니다. 한편, CSS에 이미지를 구현한다는 것은 이미지가 컨텍스트를 추가하는 것이 아니라 페이지를 렌더링하는 데 도움이 된다는 것을 의미하므로 alt 태그를 추가하는 기능에 액세스할 수 없습니다.

닫는 말

대부분의 웹사이트에서 대체 텍스트를 추가하는 데 막대한 시간 투자가 필요하지 않습니다. 한편, 그들과 함께 오는 이점은 큽니다. 웹사이트에 더 쉽게 액세스할 수 있도록 하면 잠재적으로 Google에서 이에 대한 보상을 받을 수 있습니다.

alt 태그를 작성하는 방법을 배우는 가장 좋은 방법은 몇 가지 예를 보고 직접 시도해 보는 것입니다. WordPress에서 대체 텍스트를 이미지에 추가하거나 변경하는 방법에 대한 실제 프로세스를 배우려면 여기에 링크된 가이드를 읽으십시오.

마지막으로 항상 WordPress에 변경 사항을 저장하고 alt 태그가 보이는지 확인하십시오. 그렇지 않으면 제작 방식 때문에 WordPress에 새 대체 텍스트가 표시되지 않는 경우가 있습니다. 이전에 이러한 문제가 발생한 경우 WordPress에서 Alt 태그를 표시하지 않는 문제를 해결하는 방법에 대한 이 가이드를 읽으십시오.