비동기 이미지로드 및 검색 엔진 최적화

Question

중간 크기의 이미지를 비동기 적으로로드하기 위해 중간 크기의 보석에 작업 중이며 중간 크기와 동일한 효과가 있습니다.

모든 것이 완벽하게 작동하지만 SEO에 대해서는 어떤 일이 발생하는지 전혀 알지 못합니다. 이미지 태그는 다음과 같습니다 : <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">. 다음은 스크립트가 무엇을하고 있는지입니다 :

새로운 이미지 (작성 데이터 압축하여 SRC를 교체

• )와 BIG_IMAGE BIG_IMAGE가로드 된
• 로드의 BIG_IMAGE는 SMALL_IMAGE 교체

당신은 그것이 서재응이라고 생각합니까? 아마도 div에 설정하고 SMALL_IMAGE를 배경 또는 캔버스를 사용하여로드하는 것이 더 좋을까요? 여기에 스크립트

:

var AsyncImage = { 
    init: function() { 
    this.els = document.querySelectorAll("[data-compress]") 
    this.engine() 
    }, 
    engine: function() { 
    for (var i = 0; i < this.els.length; i++) { 
     var el = this.els[i] 
     var d = el.src 
     this.small(el) 
     this.load(el, d) 
    } 
    }, 
    load: function (el, d) { 
    var img = new Image() 
    img.src = d 
    img.onload = function() { 
     el.src = img.src 
     el.classList.add('async-large-loaded') 
     el.classList.remove('async-small-loaded') 
    } 
    }, 
    small: function (el) { 
    el.src = el.dataset.compress 
    el.classList.add('async-small-loaded') 
    delete el.dataset.compress 
    } 
} 

AsyncImage.init() 

Answer 1

마지막으로, 나는 웹 마스터 커뮤니티에 내 질문에 대한 답을 찾았지만, 내가 너무 여기에 게시 흥미로운 일이 될 것이라고 생각합니다.

비동기 이미지로드는 순위에 실제 영향을 미치지 않습니다. src 속성에 기본 이미지 (품질 불량)를 설정하고, 비동기 적으로로드를 기다리는 동안 HQ 이미지는 괜찮은 것 같습니다.

브라우저에서 JS를 사용하지 않는 사람들을 위해 noscript 태그를 설정 한 다음 이미지 주변에 a 태그를 설정하고 HQ 이미지 경로를 가리키는 것처럼 기술적 인 수정 사항이 있음을 잊지 마세요. 순위를 매길 때 랭킹에 큰 영향을 끼치면 a 또는 img 태그가 던져 지지만 더 좋은 방법으로 순위를 지정해야합니다.

그래서 여기, 더 나은 옵션은 같은 코드를 얻을 수있을 것입니다 다음

는

<a href="BIG_IMAGE.jpg"> 
    <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg"> 
</a> 

링크 : https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo

EDIT (2018년 2월 1일) : 나는하여 SEO를 테스트 웹 마스터 콘솔에서 특정 설정없이 도메인을 설정합니다. 모든 것은 괜찮습니다. HQ 이미지는 완벽하게 색인화되었으며 LQ 이미지는 아닙니다.