대체 텍스트

대체 텍스트 란 무엇입니까?

체 텍스트(대체 텍스트),also known as”alt 특성”,”alt 설명”,또는 기술적으로 잘못으로”alt 태그를,”내에서 사용되는 HTML 코드를 설명하는 모습의 기능과 이미지에 페이지입니다.이 작업을 수행하려면 어떻게해야합니까? 사진에 대체 텍스트를 추가하는 것은 무엇보다도 웹 접근성의 원칙입니다. 화면 판독기를 사용하는 시각 장애가있는 사용자는 온 페이지 이미지를 더 잘 이해할 수 있도록 alt 특성을 읽습니다.<피>2., 이미지 파일을 로드할 수 없는 경우 이미지 대신 대체 텍스트가 표시됩니다.<피>3. 체 텍스트를 제공하지 컨텍스트/설명을 검색 엔진 크롤러,그들을 돕는 인덱스는 이미지 제대로.

강조 표시된 텍스트를 보여줍체 텍스트(alt 속)이미지의 왼쪽에.

체 텍스트를 들어

<img src="https://moz.com/learn/seo/pupdanceparty.gif" alt="Puppies dancing">

최적의 대체 텍스트 형식

는 최고의 형식으로 대체 텍스트가 충분히 설명하지만에 포함되지 않은 스팸도 키워드를 먹입니다., 는 경우에 당신은 당신의 눈을 닫을 수 있습니다 누군가가 읽은 대체 텍스트를 당신을,그리고 상상해 합리적으로 정확한 버전의 이미지,당신은 오른쪽에는 트랙에 있습니다.

보자의 몇 가지 예를 대체 텍스트의 이미지 맛있는 보이는 블루베리 팬케이크의 스택:

좋아요:<img src="https://moz.com/learn/seo/pancakes.png" alt="pancakes">

이 텍스트만”좋아요”그때 설명이 포함됩니다. 예,이것은 팬케이크 스택의 이미지입니다. 그러나,이 이미지에 대해 말할 것이 더 있습니다.,

좋다:

<img src="https://moz.com/learn/seo/pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

이 텍스트에 더 나은 대안이기 때문에 그것은 지금까지 좀 더 자세히 설명에는 무엇이 이미지입니다. 이는 단지의 스택”팬케이크”(번체 텍스트를 들어 증명);그것은 블루베리 팬케이크의 스택과 약간의 설탕 가루!

권장하지 않습니다.

<img src="https://moz.com/learn/seo/pancakes.png" alt="">

또는

<img src="https://moz.com/learn/seo/pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

이들의 어느 쪽도 아니는 권장합니다., 첫 번째 줄의 코드를 실제로 포함되어 있지 않은 어떤 텍스트에서 모두(주 따옴표는 비어),두번째 예에서 먹거리를 키워드 alt 텍스트입니다.

대체 텍스트가 중요한 이유는 무엇입니까?

접근성

대체 텍스트는 액세스 가능한 웹 디자인의 신조입니다. 그것의 원래(그리고 여전히 기본)목적은 그들을 볼 수없는 방문자에게 이미지를 설명하는 것입니다. 이 포함되어 있 화면 독자들과 브라우저에 차단하는 이미지,그러나 그것은 또한 포함되어 있는 사용자 시각 장애 또는 수 없이 시각적으로 식별하지는 이미지입니다., 이미지와 함께 대체 텍스트를 포함 시키면 시각적 능력에 관계없이 모든 사용자가 사이트의 콘텐츠를 감상 할 수 있습니다.

이미지 SEO

를 사용하여 텍스트에서 당신의 이미지를 만들 수 있는 더 나은 사용자 경험을 위해,그러나 그것은 또한 도움이 될 수 있습니다 벌을 명시적 및 암시적 SEO 혜택입니다. 와 함께 이미지를 구현하 제목하고 파일 이름 지정 모범 사례에 포함하여,대체 텍스트에 기여할 수 있습니다 또한 이미지 SEO.,

면서 검색엔진 이미지 인식 기술은 크게 향상된 몇 년 동안,검색 크롤러는 여전히 수 있는지”를 참조하십시오”이미지에 웹 사이트 페이지처럼 우리는 할 수 있습니다,그래서 그것의 해석적으로만 그들의 손에 있습니다. 그들이 이해하지 못하거나 잘못하면 의도하지 않은 키워드에 대한 순위를 매기거나 모두 순위를 놓칠 수 있습니다.

여기에 예:Google 다음을 볼 수 있습니다 이미지와 해독 할 수 있는 남자 넥타이를 매고,안경,책상에 앉아.,

짐 Halpert 사무실에서(US version)

경우에 당신은 순위하고자하는”짐 Halpert 의 가장 드와이트 슈 루트,”하지만,당신은 빌려해야합 검색 엔진에 도움의 손입니다.

그런 의미에서 대체 텍스트는 대상 키워드를 포함 할 수있는 또 다른 기회를 제공합니다., 으로 페이지에 키워드를 사용 여 당기중량 검색 엔진으로 순위는 요인,그것은 당신의 최대 관심사를 만들체 텍스트는 모두 이미지를 설명하고,가능하면 포함한 키워드 또는 키워드는 구문에 당신을 대상으로 합니다.

좋은 대체 텍스트를 어떻게 작성합니까?

1. 가능한 한 구체적으로 이미지를 설명하십시오. 대체 텍스트는 무엇보다도 이미지를 볼 수없는 사용자를 위해 이미지의 텍스트 설명을 제공하도록 설계되었습니다. 이미지가 진정으로 의미/가치를 전달하지 않고 디자인 목적으로 만 있다면 HTML 이 아닌 CSS 내에 살아야합니다.,

2. (상대적으로)짧게 유지하십시오. 가장 인기있는 화면 판독기는 약 125 자로 대체 텍스트를 잘라 내므로 해당 문자 수 이하로 유지하는 것이 좋습니다.

3. 귀하의 키워드를 사용체 텍스트를 제공할 수 있는 또 다른 기회를 얻을 포함하는 목표 키워드 페이지에 있고,따라서 다른 기회로 신호를 검색 엔진에는 당신의 페이지에 관련성이 높은 특정 검색어., 하는 동안 당신의 첫 번째 우선 순위를 설명하고 제공하는 컨텍스트를 이미지는 경우,그것은 그렇게,포함하는 키워드 alt 텍스트에 적어도 하나의 이미지가 페이지에.

4. 키워드 스터핑을 피하십시오. Google 없는 독점에 대한 제대로 쓰는 텍스트,하지만 당신은 문제가 될 사용하는 경우에 당신의 대체 텍스트를 기회로는 물건으로 많은 관련 키워드로의 생각할 수 있습니다. 작성에 초점을 설명하는 텍스트를 제공하는 컨텍스트를 이미지와 가능한 경우에는 대상을 포함하는 키워드,그리고 그것을 떠나.

5. 이미지를 텍스트로 사용하지 마십시오., 이 대체 텍스트 특정 모범 사례의 적은 일반 SEO 친화적 인 웹 개발 신조의 더 많은입니다. 검색 엔진은 이미지 내에서 텍스트를 읽을 수 없기 때문에 단어 대신 이미지를 사용하지 않아야합니다. 그렇게해야한다면 대체 텍스트 내에서 사진이 말하는 것을 설명하십시오.

6. “image of,””picture of,”등을 포함하지 마십시오. 당신의 대체 텍스트에. 대체 텍스트가 이미지를 참조하는 것으로 이미 가정되었으므로 지정할 필요가 없습니다.나는 이것이 내가 할 수있는 유일한 방법이라고 생각한다. 더 긴 설명이 필요한 더 복잡한 이미지를 보려면 longdesc=””태그를 사용하여 탐색하십시오.,

7. 양식 버튼을 무시하지 마십시오. 웹 사이트의 양식이 이미지를”제출”버튼으로 사용하는 경우 alt 속성을 지정하십시오. 이미지 버튼에는”검색”,”지금 적용”,”가입”등과 같은 버튼의 기능을 설명하는 alt 속성이 있어야합니다.

좋은 대체 텍스트는 어떻게 생겼습니까?,3″>