구글 블로그 HTML 편집에서 AMP HTML과 일반 HTML의 가장 분명한 차이점은 이미지
코드 작성입니다. 일반적으로 기존 HTML 에서는
<img ... />를 사용하여 이미지를 표시하지만 AMP HTML은
다음과 같이 작성합니다.
<amp-img alt="alt_image_title" title="image_title" src="image_url" width="xxx" layout="responsive" height="xxx"/>
사용 가능한 레이아웃 옵션에는 fill , fixed ,
fixed-height , flex-item , nodisplay ,
responsive 가 있습니다. 가장 일반적으로 사용되는 것은
responsive이며 표시된 이미지를 화면에 맞게 반응형으로 쉽게 조정할
수 있습니다.
<noscript> 사용 (선택 사항)
기본적으로
<noscript> ... </noscript>는 자바 스크립트가 작동하지
않거나 브라우저에서 자바스크립트가 비활성화 된 경우에 콘텐츠 또는 기타 다른
요소를 표시하기 위해 사용합니다.
브라우저가 점점 더 정교 해지고 있다는 점을 감안할 때, AMP 블로거 템플릿에
이미지를 작성하는 경우를 포함하여 더 이상
<noscript>를 사용할 필요가 없습니다.이 태그가 없어도
이미지는 계속 표시되지만 Blogger에서는 <img ... /가 있는
이미지 만 읽습니다. > , 결과적으로 홈페이지에 게시물 썸네일
이미지가 나타나지 않습니다.
썸네일 이미지가 표시되지 않는 경우
블로거에 썸네일 이미지를 표시하려면
<noscript> ... </noscript>를 사용합니다. 게시물의
모든 이미지에 이 태그를 추가 할 필요는 없습니다.
전체 코드가 다음과 같이 되도록 썸네일 이미지로 표시할 이미지에 이 태그를 한 번만 추가하세요.
<amp-img alt="alt_image_title" title="image_title" src="image_url" width="xxx" layout="responsive" height="xxx"/> <noscript><img alt="alt_image_title" title="image_title" src="image_url"/></noscript>
이 포스팅이 도움이 되었기를 바랍니다.