Home
AMP

AMP에 이미지를 추가하는 방법

AMP에 이미지를 추가하기 위한 완전한 가이드.

AMP와 비 AMP와의 가장 분명한 차이점은 amp-img 태그를 사용하여 이미지 코드를 작성하는 것입니다. 페이지가 유효성 검사를 통과하려면 모든 img 이미지 태그가 amp-img로 바뀌었는지 확인합니다.

다음은 AMP에서 올바른 이미지 코드 작성 예시입니다.

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
</div>

참고: 원본 이미지를 가져 오지 않고도 가로 세로 비율을 알 수 있도록 width 및 height 속성을 작성하는 것이 중요합니다.

fill, fixed, fixed-height, nodisplay, responsive 및 intrinsic를 포함한 여러 레이아웃 옵션이 지원됩니다. 가장 일반적으로 사용되는 것은 responsive 및 intrinsic이며 이미지를 화면 크기에 맞게 조정할 수 있습니다.

여기에서 amp-img의 전체 설명과 예제를 볼 수 있습니다.

noscript 태그 사용의 중요성

이 태그의 사용법은 사용자의 브라우저에서 자바스크립트가 비활성화된 경우 콘텐츠를 표시하는 것입니다.

Blogger의 경우, 이 태그는 홈페이지나 PopularPosts 및 Related Posts와 같은 다른 위젯에 게시물의 썸네일 이미지를 표시하는 데 필요합니다. 예를 들면 다음과 같습니다. 

<div>
  <amp-img alt='image_title_here' src='image_url_here' width='xxx' layout='intrinsic' height='xxx'/>
  <noscript><img alt='image_title_here' src='image_url_here'/></noscript>
</div>

Post a Comment