SEO에 지연 로딩 이미지 및 효과

우리는 다음 기술을 사용하여 사이트에서 이미지를 지연로드합니다.

모든 이미지 src에 대해 기본 img (예 : 로더)의 URL을 data-src속성 에 넣고 실제 이미지 URL을 속성 에 넣습니다 . 이렇게

<img src="loader.gif" data-src="img1.jpg" />

이미지가 뷰포트 외부에 있으면 아무 일도 일어나지 않지만 이미지가 뷰포트 내부로 들어가면 data-src속성 의 URL이로 드되고 이미지가 올바르게 표시됩니다.

결과적으로 Google은 페이지의 모든 이미지 (예 : 검색 결과 페이지)가 동일한 src속성 을 갖는 것으로 간주합니다. Google 봇은 물론 'unloaded'img 태그 만 default로 구문 분석하기 때문 src입니다.

내 질문은 : 동일한 src속성을 가진 많은 img 태그가 페이지의 SEO에 영향을 줍 니까?

— 브 메네 클
소스

나는 적절한 직책과 alt가 직업의 90 %라고 생각합니다. 파일 이름이 적습니다. 내가 추측 Google 이미지에서 결과에 영향을 미칠 수

— 마티

또한보십시오 : webmasters.stackexchange.com/questions/26190/…

— Salman A

Google 이미지 검색에서 색인을 생성 한 이미지 수에 영향을 줄 수 있습니다. 그것에 대해 또는 일반 웹 검색의 순위에 미칠 영향에 대해 질문하고 있습니까?

— Stephen Ostermiller

@StephenOstermiller 내 주요 관심사는 순위이지만, SEO에 미치는 모든 영향 (즉시 또는 보조)은 관심의 대상입니다

— bmenekl

이 질문은 StackOverflow에서 요청 되었지만 내 의견으로는 큰 대답이 없습니다.

— Stephen Ostermiller

답변:

이미지 게으른 로딩이 웹 검색 순위에 부정적인 영향을 미치는 것을 본 적이 없습니다. 사용자의 사이트 성능이 향상되면 순위에 도움이 될 수 있습니다. 사이트 성능 문제로 인해 검색 결과로 되돌아 오는 사람이 줄어들면 순위가 향상됩니다.

이미지 검색을 위해 지연로드 된 이미지를 색인 생성 할 수 없습니다. 대신 다음과 같은 몇 가지 가능한 기술 수정 사항이 있습니다.

<noscript>자바 스크립트를 사용하지 않는 사용자 (및 검색 엔진 봇)의 이미지를 표시하는 태그 사용
또한 이미지에 연결하십시오. 이미지가 img src 또는 a href에 있는지 여부는 이미지 검색에 중요하지 않습니다. 따라서 다음 스 니펫은 이미지 검색을 지연시키고 이미지 검색시 전체 크기 이미지를 색인화합니다. <a href="/webmasters//img_large/foo.jpg"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif"></a>

— 스티븐 오스터 밀러
소스

나는 "노 스크립트"에 의존하지 않을 것입니다. 많은 스팸이이를 사용하려고 시도하는 것을 볼 수 있습니다. 이미지에 대한 링크를 사용한다는 아이디어가 마음에 듭니다. 일반적으로 이미지가 페이지의 기본 요소 중 하나 인 경우 여전히 색인을 생성 할 수 있도록 자연스럽게 (적어도 다른 크기를 사용하는 경우 하나 이상의 버전으로) 포함하는 경향이 있습니다. 일반적으로. 우리는 이것에 대한 더 나은 이야기를 만들고 있지만 오늘이나 내일 바뀌는 것은 보이지 않습니다.

— 존 뮬러

전술을 사용하여 이미지가 이미 제품 또는 무언가에 대한 링크로 둘러싸인 경우 <a> 래퍼를 사용해 볼 수 있습니다

<a href="/webmasters//img_large/foo.jpg"><a href="www.example.com/page"><img data-lazy-load="/img_thumb/foo.jpg" src="/img/1x1_transparent.gif" /></a></a>

. 내부 링크는 UI 클릭을 가져 오는 반면 외부는 여전히 봇 색인 이미지에서 작동합니다.

— dhaupin

이 답변이 2017에도 유효합니까? 특히 "Google은 이미지 검색을 위해 지연로드 된 이미지의 색인을 생성 할 수 없습니다."부분? 게시물에 10 개의 이미지가 있다고해도 Google에 이미지가 없다고 생각하십니까?

— 나는 가장 바보 같은 사람

그것은 여전히 그렇습니다. 그러나 당신은 여전히 당신의 이미지에 링크하여 이미지를 인덱스 할 수 있습니다.

— Stephen Ostermiller

인라인 스타일을 사용하여 이미지를 숨기지 않는 한 대부분의 검색 엔진은 숨겨진 이미지를 인덱싱합니다. 대부분의 브라우저는 숨겨진 이미지를로드 하지 않습니다 .

이 주장을 확인할 수있는 테스트 페이지가 있습니다. 일부 구형 모바일 브라우저는 예외이지만, 휴대 전화의 게으른 로딩은 좋은 브라우징 경험에 역효과를 줄 수 있다고 주장합니다.

http://www.w3.org/2009/03/image-display-none/test.php

CSS 파일에서 다음 수정을 추가하십시오.

.lazy-img { display: none; }

이제 이와 같이 게으른 이미지가있는 페이지를로드 할 수 있으며 색인이 생성됩니다.

<body>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
</body>

title이미지 의 속성을 포함시키는 것이 중요합니다 . 또는 <img> 태그를 링크 <a> 태그 및 링크 텍스트로 둘러 쌉니다 . 그렇지 않으면 검색 엔진이 단어 거리별로 이미지와 키워드를 연결합니다. 당신은 SEO를 위해이 모든 문제에 갈 것입니다.

위와 같이 사용하면됩니다. 이미지가 숨겨져 있으면 아무것도 표시되지 않습니다. 문서 맨 아래에서이 클래스를 제거하려고합니다. 여기서 핵심은 인라인 순수 자바 스크립트를 사용하는 것입니다. 이 Javascript는 위 요소의 레이아웃이 완료된 직후에 실행됩니다. 맨 아래에 모든 외부 JS 파일을로드하는 경우 (필요한대로) 이 Javascript 블록을 해당 파일 위에 배치해야합니다. 따라서 DOM을 수정하는 데 지연이 발생하지 않습니다.

<body>
   <!--[if lte IE 8]
   <style type="text/css">.lazy-img { display: block !important; }</style>
   [endif]-->
   <noscript><style type="text/css">.lazy-img { display: block !important; }</style></noscript>
   <img class="lazy-img" src="img1.jpeg" title="image title"/>
   <img class="lazy-img" src="img2.jpeg" title="image title"/>
   <img class="lazy-img" src="img3.jpeg" title="image title"/>
   <img class="lazy-img" src="img4.jpeg" title="image title"/>
   <![if gte IE 9]>
   <script type="text/javascript">
      var images = document.getElementsByClassName('lazy-img');
      Array.prototype.forEach.call(images, function(image){
         image.setAttribute("data-src",image.getAttribute("src"));
         image.setAttribute("src","loading.gif");
      });
      while(images.length > 0) { images[0].className = ""; }
   </script>
   <![endif]>
</body>

이제 IE9 getElementsByClassName는 8 이상에서 지원하지 않기 때문에 IE9에 대한 조건을 추가했습니다 . 테스트되지 않은 것은 브라우저가 이미지를 그대로로드한다는 것입니다.

이 접근 방식의 장점은 웹 크롤러의 관점에서 HTML을 깨끗하게 유지한다는 것입니다.

— 반응
소스

궁금해서 테스트 페이지를 시험해 보았습니다. Mac의 최신 Chrome 및 Safari가 이미지를로드하는 것 같습니다. 불행히도 이것이 확실하게 확실하지는 않습니다.

— Pevara

불행히도이 방법을 사용하면 이미지가 문서 하단에 모두 느리게로드되지만 (나쁘지는 않지만) 내 질문에서 설명하는 것처럼 내 접근 방식에서는 이미지가 뷰포트에 들어갈 때만 느리게로드됩니다. 따라서 뷰포트에 들어 가지 않은 이미지 (예 : 최종 사용자가 페이지에서 아래로 스크롤하지 않음)는 전혀로드되지 않습니다. 이미지가 많은 페이지에서 이것은 매우 중요합니다

— bmenekl

@bmenekl 아니요,이 답변은 지연 로딩을 수행하지 않습니다. Javascript 사용 가능 브라우저에서 볼 때 HTML 만 변경하므로 써드 파티 스크립트가 지연로드를 수행 할 수 있습니다.

— Reactgular

Google은 봇과 함께 JavaScript를 실행하기로 선언했습니다 . 자세한 내용은 이 게시물 을 참조하십시오 .

문서화 한 것처럼 동적 크롤링을 위해 정적 파일을 GoogleBot에 금지해서는 안됩니다.

— 줄루 족
소스