AMP 적용하다 보면 가끔 amphtml이나 canonical 연결이 빠져서 모바일에서 속도가 느려지거나 검색 순위가 떨어질 때가 있죠? 오늘은 자바스크립트를 써서 이 링크들을 자동으로 관리하고, 사이트 속도랑 검색 노출까지 한 번에 잡는 방법을 친구에게 알려주듯 쉽게 설명해 드릴게요.
웹사이트를 가볍게 만들고, 특히 스마트폰으로 보는 분들을 위해 훨씬 빠른 AMP 페이지를 보여주는 건 정말 중요한 일이에요. 이때 원본 글이랑 AMP 글을 서로 이어주는 역할을 하는 게 바로 link rel="amphtml" 태그인데요. 이 태그를 어떻게 하면 편하게 관리하고 자동으로 업데이트할 수 있는지 차근차근 알아봐요.
AMP랑 일반 페이지는 어떻게 이어질까요?
검색 엔진은 원본 HTML과 AMP 페이지가 어떤 관계인지 파악해서 모바일 사용자에게 더 잘 맞는 화면을 보여줘요. 그래서 구글 검색 엔진 최적화(SEO)를 위해서라도 둘 사이를 잘 연결해 주는 구조를 이해하는 게 중요하답니다. 아래 표를 보면 금방 이해되실 거예요.
| 구분 | 설정 태그 | 주요 역할 | 배치 위치 |
|---|---|---|---|
| 원본 페이지 | rel=”amphtml” | AMP 버전이 있다고 알려줌 | 일반 HTML의 head |
| AMP 페이지 | rel=”canonical” | 중복 문서 아님을 알리고 원본 지정 | AMP HTML의 head |
AMP가 왜 필요한지 먼저 알아봐요
AMP(Accelerated Mobile Pages)는 모바일에서 웹 페이지가 순식간에 뜨도록 구글이 만든 기술이에요. 들어오자마자 화면이 딱 뜨니까 보는 사람도 편하고, 기다리기 지루해서 나가는 일도 줄어들어서 정말 유용해요.
아래 코드를 참고해서 적용해 보세요. 상황에 맞게 조금씩 고쳐 쓰시면 돼요.
var contentDiv = document.querySelector('.tt_article_useless_p_margin.contents_style'); var ampLinkElement = contentDiv ? contentDiv.querySelector('link[rel="amphtml"]') : null; if (ampLinkElement) { var ampLink = ampLinkElement.getAttribute('href'); var existingLink = document.getElementById('amplink'); if (existingLink) { existingLink.setAttribute('href', ampLink); } else { var head = document.head || document.getElementsByTagName('head')[0]; var newLinkTag = document.createElement('link'); newLinkTag.setAttribute('rel', 'amphtml'); newLinkTag.setAttribute('href', ampLink); newLinkTag.setAttribute('id', 'amplink'); head.insertBefore(newLinkTag, head.firstChild); } } else { var existingLink = document.getElementById('amplink'); if (existingLink) { existingLink.parentNode.removeChild(existingLink); } }
중복 문서로 오해받지 않으려면?
AMP 페이지를 만들 때 가장 신경 써야 할 점은 중복 콘텐츠로 오해받지 않는 거예요. 그래서 AMP 버전의 head에는 반드시 원본 페이지가 어디인지 알려주는 canonical 태그를 꼭 넣어주세요.
link rel="canonical" href="원본 페이지 URL"
이 설정이 빠지면 검색 엔진이 원본이랑 AMP 페이지를 서로 다른 글로 보고 “왜 똑같은 글이 두 개지?” 하면서 점수를 깎을 수도 있으니 주의해야 해요.
자주 묻는 질문들 정리해 봤어요
Q1. 동적으로 AMP 링크를 만들어도 검색 엔진이 잘 알아듣나요?
A1. 네, 그럼요! 구글 크롤러는 꽤 똑똑해서 자바스크립트로 만든 내용도 잘 읽어가요. 그래도 처음에 빨리 읽을 수 있게 head 앞쪽에 두는 게 더 좋긴 해요.
Q2. 블로그의 모든 글에 AMP를 쓰는 게 좋을까요?
A2. 뉴스나 정보성 글처럼 텍스트가 많은 글에는 정말 강력 추천해요. 하지만 복잡한 기능이 많거나 화려한 효과가 필요한 페이지는 AMP로 구현하기 힘들 수 있으니 골라서 적용하는 게 현명해요.
Q3. AMP를 쓰면 광고 수익이 줄어들까 봐 걱정돼요.
A3. 예전엔 그런 말이 좀 있었는데, 요즘은 AMP 전용 광고 최적화 방법을 잘 활용하면 일반 페이지 못지않게 수익을 낼 수 있으니 너무 걱정하지 않으셔도 돼요.
