로토의 블로그
나의 첫 AMP 대표 이미지

나의 첫 AMP


취미로 하는 밴드의 공연 티져 페이지를 만들고 있다.

간단한 웹 페이지라 파이어베이스 통해서 호스팅을 하고 있는데, 문득 이런 페이지면 AMP 적용하기 쉽지 않을까? 라는 생각이 들어 적용해봤다.

태그 영역별

html

<!doctype html>
<html amp lang="ko">

meta

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<link rel="amphtml" href="https://couband-teaser.firebaseapp.com/">
<link rel="canonical" href="https://couband-teaser.firebaseapp.com/">

script

  <script type="application/ld+json">
    {
      "@context": "http://scheHma.org",
      "@type": "NewsArticle",
      "headline": "쿠뺀 2017 마무리 공연",
      "datePublished": "2017-11-21T18:25:41Z",
      "image": [
        "/images/mainImage.png"
      ]
    }
  </script>  
<script async src="https://cdn.ampproject.org/v0.js"></script>

style

amp test

https://search.google.com/test/amp 에서 확인

작업결과

기존 페이지에서 변경한 부분

font awesome

web font

@font-face {
      font-family: 'Hanna';
      src: url("https://fonts.gstatic.com/ea/hanna/v3/BM-HANNA.ttf");
    }

해결하지 못한 부분

-----------2017-11-22------8.31.59

관련해서 amp의 레이아웃 기능을 좀 더 찾아봐야 할 것 같다.

결과물

-----------2017-11-22------8.30.33

page url

https://couband-teaser.firebaseapp.com

github repository

https://github.com/rotoshine/couband-teaser

짤막한 후기