JS를 통해 지연 이미지 (<noscript> 대체 이미지)

Question

일련의 이미지를 표시하기 위해 jQuery 슬라이더를 사용하고 있으며 Google 이미지 검색에서 일반 검색 결과의 상단에 순위를 매기고 있지만 이미지의 아무 것도 표시하지 않습니다. 관련 키워드 제 생각에는 Google이 data-image 속성을 통해 JavaScript로 슬라이더에 (게으른)로드되어 있기 때문에 이미지의 색인을 생성하지 않는다는 것입니다. 성능을 위해 이미지를 게으른로드하고 표준 <img> 태그 집합을 사용하지 않는 것이 중요하므로 검색 엔진에서보다 쉽게 ​​색인을 생성 할 수있는 방법으로 애셋을 게재하는 가장 좋은 방법을 찾으려고합니다.

<li class="slide" data-image="img/image.jpg"> 
    <div class="caption">IMAGE INFO</div> 
    <noscript><img src="img/image.jpg" alt="Image info" width="x" height="x"></noscript> 
</li> 

나는이 방법 잠재적 인 문제가 있는지 궁금해서, 또는 완전히 다른 것이 바람직 할 것입니다 경우 : I는 다음과 같이 슬라이드 마크 업 내에서 <noscript> 태그를 사용하여 고려 중이 야? 검색 엔진이 <noscript> 태그 내에 포함되어 있다면 검색 엔진 최적화와 관련하여 여전히이 마크 업을 고려할 것입니까?

감사합니다.

Answer 1

noindex 태그는 해결책이지만 최선은 아닙니다. 동일한 문제가 있었는데, 먼저 이미지 사이트 맵을 시도한 다음 noindex 태그를 시도하고 마지막으로 가장 좋은 해결책을 찾았습니다. 나는 완전히 작업 예제이 블로그 포스트를 작성했습니다 : Lazy loading and the SEO problem, solved!

가장 좋은 방법은 인덱스 AJAX 내용에 Google에서 제공하는 방법을 사용하는 것입니다. 그러나 AJAX에 국한되지 않고 실제로 동적으로 생성 된 모든 컨텐츠에 사용할 수 있습니다.

내 샘플에서는 동적으로 이미지를로드하는 이미지 갤러리에이 방법을 사용합니다. 몇 마디에 이스케이프 처리 된 조각을 사용해야합니다. 조각은 URL의 마지막 부분이며 #이 접두사입니다. 조각은 서버에 전달되지 않고 클라이언트 쪽에서 만 사용되어 브라우저에 무언가를 표시하도록 알려주고 일반적으로 인 페이지 책갈피로 이동합니다. #을 접두사로 사용하는 대신 #!을 사용하면 Google이 추한 URL을 사용하여 서버에 페이지의 특수 버전을 요청합니다. 서버가 이러한 추악한 요청을 받으면 HTML 스냅 샷을 렌더링하는 정적 버전의 페이지 (이 경우 인덱싱되지 않은 이미지)를 다시 보내는 것은 사용자의 책임입니다.

ASP.NET을 사용하여 서버 쪽에서 HTML 스냅 샷을 생성합니다 (그러나 모든 기술로 생성 할 수 있음).

var fragment = Page.Request.QueryString["_escaped_fragment_"]; 
if (!String.IsNullOrEmpty(fragment)) 
{ 
    var escapedParams = fragment.Split(new[] { '=' }); 
    if (escapedParams.Length == 2) 
    { 
     var imageID = escapedParams[1]; 
     // Render the page with the gallery showing the requested image (statically!) 
     ... 
    } 
} 

NOSCRIPT 태그 방식의 단점

는 사용자가 즐겨 찾기에 특정 이미지를 보여주는 페이지 수없는 사실 가난한 사용자 경험을 제공한다는 것입니다. 사용하여 조각과 자바 스크립트를 사용하면 사용자에게

if (window.location.hash) 
{ 
    // NOTE: remove initial # 
    var fragmentParams = window.location.hash.substring(1).split('='); 
    var imageToDisplay = fragmentParams[1] 
    // Render the page with the gallery showing the requested image (dynamically!) 
    ... 
}