구글 Blogger 유효한 AMP 페이지 만드는 방법

Accelerated Mobile Pages 또는 줄여서 AMP는 모바일 스마트폰 기기에서 더 빠르고 데이터를 적게 소모하여 페이지를 로드하는 기능을 합니다.

HTML 구조에서 크게 차이가 없기 때문에 처음 AMP 게시물을 작성할 때 대부분은 Non-AMP 와의 차이점을 잘 모릅니다. 가장 눈에 띄는 부분은 <img /> 태그를 사용하지 않고 <amp-img /> 태그를 사용하 것입니다 . 따라서 블로거를 AMP로 사용하려면 모든 게시물의 이미지의 태그를 변경해야 합니다. img 를 amp-img으로

AMP 게시물의 썸네일 표시 방법

Blogger는 <amp-img/>로 이미지를 읽을 수 없습니다. 따라서 블로그 홈페이지에 게시물의 썸네일 이미지가 표시되지 않거나 SNS에 링크를 공유 할 때 미리보기 이미지가 표시되지 않을 수 있습니다.

이 문제를 해결하려면 게시물 시작 부분에 아래 코드를 사용하세요.

<noscript><img alt="alt_image_title" src="image_url.jpg" title="image_title"/></noscript>

마킹 표시된 부분을 게시물의 기본 썸네일 이미지의 URL로 바꿉니다.

AMP 게시물에 이미지 추가하는 법

위에서 설명한 것처럼 AMP의 이미지는 Non-AMP의 이미지는 작성 방법이 다릅니다. 게시글의 콘텐츠로 이미지를 추가 하기 위한 코드의 간단한 예시는 다음과 같습니다.

<amp-img alt="alt_image_title" height="300" layout="responsive" src="image_url.jpg" width="430"/>

이미지 크기와 레이아웃을 원하는대로 변경합니다.

AMP 게시물에 유튜브 동영상 삽입(Embed) (선택 사항)

아래 코드를 사용하면 유튜브 동영상을 게시물에 표시할 수 있습니다.

1. 삽입하려는 Youtube 동영상 URL에서 아래 사진과 같이 11자리의 영문 코드를 복사합니다.
2. amp-youtube 코드에 입력 합니다.
3. 그 다음 게시물에 코드를 붙여넣으시면 됩니다.

선택한 Youtube 동영상의 11자리 코드를 마킹 표시된 부분을 변경하면 됩니다.

<amp-youtube data-videoid="xxxxxxxxxxx" height="270" layout="responsive" width="480"/>