SEO 용 이미지 Lazy Loading에 대한 좋은 접근 방법입니까?

14

AJAX를 통해로드되거나 인덱싱하고 싶지 않은 이미지의 경우 data- * 속성 접근 방식을 사용하십시오.

<img data-src="path/to/image.jpg" class="js-lazy-load" />

자바 스크립트는 매핑 데이터의 src 받는 속성 의 src 속성을 :

<img src="path/to/image.jpg" />

그러나 HTML에 이미지를 그 않는 인덱스합니다 :

<a href="path/to/image.jpg" class="js-lazy-load">Image alt text here</a>

자바 스크립트는 앵커 를 이미지 태그로 대체합니다 .

<img src="path/to/image.jpg" alt="Image alt text here" />

SEO에 영향을 미치지 않으면 서 색인 가능성과 페이지 의 의도 (접근성에 대한)를 유지하는 것처럼 보입니다 . 그러나 두 번째 의견을 좋아할 것입니다.

편집 :이 접근법 ( 이미지 링크가있는 페이지와 인라인 IMG 태그가있는 페이지) 에 대한 의견은 페이지 순위와 관련하여 비교할 것입니다. 인라인 IMG 태그는 각 나가는 링크가 전체 페이지 순위에서 떨어지기 때문에 더 좋을 것이라고 생각합니다 (반대 적으로 생산적인 rel = "nofollow"가 아닌 한).

seo google javascript

— 에어 론
소스

나가는 링크는 페이지 순위를 떨어 뜨리지 않습니다. PR이 작동하는 방식이 아닙니다.

— Lèse majesté

나가는 링크의 총 수가 각 링크에있는 PR과 다른가요? 따라서 원래 페이지에 5 개의 링크 (각각 20 % PR)가 있지만이 방법으로 50 개의 링크가 있다면 각각 2 %가됩니까?

— Aeron

맞습니다. 전달 된 PR의 양은 되는 페이지에 대한 링크의 수에 의해 분할하지만, 조각은 PR로 인해 nofollow링크 사이 PR을 분할 할 때 링크가 이제도 포함된다. 따라서 45 개의 nofollow 링크와 5 개의 일반 링크가 있어도 5 개의 일반 링크는 여전히 링크 주스의 2 % 만 통과합니다. Google은 똑똑하지만 이미지 링크는 HTML 링크와 다르게 취급합니다. 솔루션은 유용성과 접근성을위한 유효한 솔루션이므로 PR 흐름을 희석하여 권장하지 않아야합니다.

— Lèse majesté

10

좋은 접근 방법입니다. 다른 방법은 <noscript />요소 를 사용하여 imgGoogle에서 색인을 생성 하는 태그 의 일반 버전을 저장하고 JS를 사용하여 지연 로딩 버전을 만드는 것입니다.

또는 HTML5의 기록 API와 결합 된 Google의 hashbang AJAX 규칙을 사용하여 책갈피 및 색인 가능한 페이지 상태를 만들 수 있습니다. 이것은 일종의 무한 스크롤 페이지를 수행하는 경우 의사 매김의 형태를 제공하기 때문에 특히 바람직합니다. 대부분의 무한 스크롤 구현에는 필연적으로 필요합니다 ( :: cough :: Google Images :: cough ::) .

편집 : 이미지에 대한 자리 표시로 링크를 사용하여 수 사용하지 않는 PR은 항상 보존되지만 페이지에서 PR 흐름의 원인은, 더 많은 링크 사이에 구분되는 nofollow이 이미지 검색을위한 그 이미지의 홍보를 증가시킬 이론적으로 이렇게.

원하지 않거나 JS가 아닌 사용자의 경우 페이지가 정상적으로 저하되도록하려면 반대 경로로 이동하여 일반 이미지로 시작하지만 JS를 차단 하여 src페이지로드시 이미지 의 속성 을 대체 할 수 있습니다 이미지 요소를 삭제하고 src지연 로딩 대기열에 속성을 저장하십시오 ). 올바르게 수행하면 이미지가 실제로 다운로드되기 전에이 작업을 수행 할 수 있습니다.

— 레제 마 에스테
소스

2

Google은 보지 <noscript>않고 Firefox에서 이미지로드를 차단하는 방법을 아직 찾지 못했습니다. src( <script>태그 바로 뒤에 태그가 있더라도) 대체 하는 <img>것은 최신 버전의 Firefox에서 이미지가 다운로드되는 것을 방해하지 않는 것 같습니다. 다른 방법을 알고 있다면 공유하십시오!

— mindplay.dk

@ mindplay.dk : Google은 noscript스 니펫에서 텍스트를 사용하지 않도록 선택할 수 있지만 읽은 모든 noscript내용은 일반적으로 콘텐츠의 색인을 생성한다고 생각합니다 . 그러나을 대체하는 것이 옳습니다 src. 내 원래 생각은 첫 번째 이미지 script 앞에 를 배치 하여 스크립트가로드되고 실행될 때까지 이미지로드를 차단하는 것이 었습니다. 그러나 더 자세히 살펴보면 이미지가 DOM에 표시되지 않기 때문에 작동하지 않습니다. 당신은 수있는 호스트에 동시 연결을 긁고하여 다운로드를 차단하지만의 요즘 현실적이지.

— Lèse majesté

다른 사람이 생각해 낸 더러운 해킹은 JS를 사용하여 JS 프리 이미지를 주석 처리하는 것입니다 (추론 파싱을 처리하는 더 긴 버전이 있습니다) <script>document.write('<'+'!--');</script><img src=...>. 이것이 적절한 접근인지 스스로 결정해야합니다.

— Lèse majesté

2

이 패턴으로로드 된 이미지를 보았습니다.

<img data-src="path/to/image.jpg" class="js-lazy-load" />

구글과 구글 이미지 검색에 의해 다른 사람들도 발견했다 . Google이 이제 페이지에서 자바 스크립트 를 실행 하므로 실제 이미지를 src 속성에 넣을 필요가 없습니다. src 속성을 무시하면 이미지 주위에 회색 테두리가 생길 수 있으므로 다음과 같이하는 것이 가장 좋습니다.

<img src="placeholder.gif" data-src="path/to/image.jpg" class="js-lazy-load" alt="Image alt text here" />

Nb. 다른 검색 엔진에 반드시 적용되는 것은 아닙니다.

— 윌 스터
소스