검색 엔진에서 텍스트가 포함 된 이미지의 색인을 생성하려면 어떻게합니까?

나는 친구를 위해 작은 포트폴리오 웹 사이트를 구축하고 광고를하고 있으며 표준 글꼴을 싫어하고 모든 것을 사용자 정의 글꼴로 작성하고 싶어합니다.

CSS 글꼴 임베딩은 현재로서는 선택 사항이 아니기 때문에 모든 텍스트 (다행히 텍스트가 많지 않음)가 이미지로 표시됩니다.

이미지 콘텐츠를 어떻게 색인화 할 수 있습니까? 작은 텍스트 (링크, 메뉴 등)의 경우 텍스트를 alt 속성에 넣었지만 더 긴 경우 솔루션이라고 생각하지 않습니다. 내가 무엇을 할 수 있을지 ? 이미지 옆에 숨겨진 div에 텍스트를 넣으시겠습니까?

글꼴을 묻습니다!

아니요, 그러나 임베드 가능 글꼴은 모든 현재 브라우저 (FF, Chrome, Safari, Opera) 및 IE5.5 +에서 작동합니다 (예, 90 년대 이후 IE에서 작동했습니다).

여기에 TTF를 업로드하십시오 : http://www.kirsle.net/wizards/ttf2eot.cgi

코드와 2 개의 파일 (TTF 및 EOT [M $ 웹 글꼴])을 다시 제공합니다. 복사, 붙여 넣기, 업로드가 완료되었습니다. 승리 승리!

그리고 제발 제발 이미지를 사용하지 마십시오 :)

그러나 그렇게하는 경우 이미지를 사용하지 않는 것처럼 마크 업을 작성한 다음 모든 요소에 배경 이미지를 추가하고 텍스트 들여 쓰기 : -9999px를 사용하여 텍스트를 숨 깁니다. 그러나 포함 가능한 글꼴 만 사용하십시오. 또한, 당신이 클라이언트 / 친구라면 사진 작가라면 아마도 고대 브라우저를 사용하여 (아마도 IE4와 같은 정말 오래된 것입니다 ...)

그녀 가이 웹 사이트에서 자신의 글꼴을 판매하지 않는 한 둘 다 CSS 포함에 대해 더 많은 작업을 수행 할 수 있다고 생각합니다 (예,이 옵션은 현재로서는 가능하지 않지만 고집합니다).

글꼴 (그라데이션 색상, 트위스트 정렬, 광택, 엠보싱, 조각 등)에 대한 그래픽 작업이 더 무거운 경우 CSS 옵션을 필요에 따라 렌더링하는 것이 실제로 불가능한 경우 다음을 수행하는 것이 좋습니다.

CSS (아마도 스프라이트)를 통해 이미지를 사용하고 text-ident로 앵커 텍스트를 숨 깁니다. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

CSS

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

이것은 하나의 기술입니다. 예, Google은이를 처벌 할 수는 있지만이 사이트를 사용하여 단일 사이트에 대해 불이익을받은 적이 없다고 알고 있습니다.

다른 방법은 텍스트와 함께 앵커 태그 ALONG 안에 img 태그를 사용한 다음 CSS를 사용하여 텍스트를 숨기고 필요한 경우 위치 이미지를 수정하는 것입니다. 이 마지막 옵션을 사용하면 이미지에 대체, 제목, longdesc를 추가하여 색인화되는 정보량과 품질을 높일 수 있습니다.

이 마지막 옵션으로 더 나아가서 피겨 캡션과 함께 HTML5에 사용 가능한 그림 태그 사용을 사용하여 더 좋고 신선한 솔루션을 얻을 수 있습니다. 아이디어는 앵커-> 그림-> img + 그림을 유지하는 것입니다.

Figcaption은 앵커 텍스트 역할을하며 CSS를 사용하여 숨길 수 있습니다.

3 가지 솔루션이 있습니다. 하나를 선택. 나는 마지막으로 갈 것입니다.

왝. 그녀는 사이트의 접근성을 죽이고 페이지 렌더링 속도 저하와 같은 다른 모든 종류의 문제를 일으키는 글꼴 문제를 극복해야합니다.

longdesc이미지에 속성을 추가해 볼 수 있다고 말했습니다 . 검색 엔진이 얼마나 많은 무게를 주 었는지 말하기는 어렵지만 아마도 0보다 더 큽니다.

웹 글꼴은 현재 모든 주요 브라우저에서 거의 표준이지만 다른 글꼴 형식의 브라우저 간 복잡한 점을 알아내는 것은 까다로울 수 있습니다.

Google은 유용한 웹 글꼴 API 및 글꼴 디렉토리 를 제공하여 유용하다고 생각할 수 있습니다.

사이트의 다른 페이지로 이동하는 유일한 방법으로 alt 태그가있는 이미지를 사용하는 것이 실제로 Google에 많은 명확성을 제공하지는 않습니다.

가장 좋은 방법은 친구에게 문제를 해결하기 위해 페이지 나 사이트 어딘가에 텍스트 링크가 필요하다고 설득하는 것입니다. 예를 들어 모든 텍스트 링크로 Sitemap 페이지를 설정하거나 작동해야하는 모든 텍스트 링크로 각 페이지에 드롭 다운하는 경우 링크 이미지 외에 손상을 입히지 않습니다.

Google에서이를 악의적 인 것으로보고 사이트의 순위를 낮추거나 스팸으로 표시 할 수 있으므로 숨겨진 링크를 사용하지 않는 것이 좋습니다.

다른 사람들이 제안했듯이 표준 "웹 안전"글꼴을 사용할 필요가 없습니다. 크로스 브라우저 방식으로 작동하는 글꼴 대체 기술이 많이 있습니다. 좋은 개요를 보려면 글꼴 대체 방법에 대한 웹 디자이너 안내서를 확인하십시오 . SEO를 포기하거나 이미지 SEO에 의지 할 필요가 없습니다. 케이크를 먹을 수도 있습니다.

나는 배경 이미지와 숨겨진 중첩 범위 로이 작업을 수행했습니다. 텍스트 브라우저 및 검색 엔진에 적합하며 더 풍부한 브라우저를위한 사용자 정의 글꼴이 있습니다.

HTML :

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS :

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

산출:

실제로 참조하십시오 .

이 방법으로 대체 할 수있는 텍스트의 양에는 제한이 없지만 (적절한 방식으로 적절한 태그 및 숨겨진 스타일) 클라이언트가 사용하려는 사용자 정의 글꼴은 모든 일반 웹 글꼴보다 읽기 쉽지 않습니다. 당신은 정말로 그녀에게 말하려고 노력해야합니다.

sFIR 은 이러한 목적으로 작동 할 수 있지만 클라이언트 측에서는 리소스를 많이 사용하므로 텍스트에 링크를 포함시켜야하는 경우 까다로울 수 있습니다.

1. webfonts 만 사용 하십시오 . 거의 모든 브라우저가이를 올바르게 표시합니다 (대체 형식으로 입력 한 경우). 일반 파일 (그것들)로 호스팅하십시오. 여기 정말 좋은 튜토리얼이 있습니다. 한 가지 더 장점 : Google을 속이는 방법을 생각할 필요가 없습니다.

2. sIFR , Cufón , FLIR 또는 기타 이미지 스프라이트-알 수없는 이유로 발명 된 정말 오래된 스타일의 황소 덩어리입니다.) 그것을 사용하지 마십시오.

3. 몇 개의 이미지에 입력 된 많은 텍스트는 다음과 같습니다.

   • 긴 로딩 시간
   • 안티 서구 (물론 클로킹을 사용하여 Google 봇과 사용자에게 다른 콘텐츠를 제공 할 수는 있지만 더 많은 작업과 테스트가 필요하며 위험합니다 [경쟁 사이트 소유자가 Google에 알려 줄 수 있음]

typeface.js 라이브러리를 사용해보십시오 ! 페이지 상단에 라이브러리를 포함시키고 특수 글꼴이 지정된 요소에 특수 클래스를 제공하면 사용자 정의 TrueType 또는 OpenType 글꼴을 사용할 수 있습니다. 무료이며 오픈 소스이며 크로스 플랫폼이며 검색 엔진에서도 텍스트를 볼 수 있습니다. 이미지가 필요하지 않습니다. 라이브러리는이 모든 것을 처리하며 일반적인 웹 페이지처럼 디자인하기 만하면됩니다.

여기에 많은 훌륭한 옵션이 있습니다. Font Squirrel (http://www.fontsquirrel.com/fontface/generator)은 언급 할 가치가 있습니다. 예, Google Font API도 훌륭합니다.

이미지 대체에 관해서는 개인적으로 이미지를 범위의 부모에 배경으로 사용하여 요소의 범위를 권장합니다. 그러나 표시 : 없음 대신에 위치 : 절대 화면에서 벗어납니다. 그렇게하면 화면 판독기는 여전히 해당 내용을 얻습니다.

들여 쓰기보다 화면에서 벗어나는 것을 떠올리는 것 같지만 어리석은 바지를 입었을 수도 있습니다.

그러나 두 배도 있습니다-그 글꼴을 포함하십시오.

Font Squirrel 의 Font-Face 키트 중 하나를 사용하십시오 . 이 키트는 4 가지 글꼴 형식과이를 사용하는 데 필요한 올바른 CSS를 제공합니다. 모든 최신 브라우저와 레거시 IE 버전에서도 작동합니다!

이미지로 사이트를 구축하십시오. 그녀가 엔진에 의해 발견되지 않은 것에 대해 불평하는 이슬 몇 달 동안 그녀는 텍스트로 사이트를 재건하고 추가 비용을 청구합니다!