모바일 최적화를 위한 AMP 페이지 연결하는 효율적인 방법

웹사이트에서 AMP 링크 자동 생성 및 업데이트하는 방법

웹사이트의 성능을 최적화하고, 특히 모바일 사용자를 위해 일반 페이지보다 성능이 빠른 AMP 페이지를 제공하는 방법은 모바일 최적화에 중요합니다. 특히 AMP 페이지를 적용하는 과정에서, <link rel="amphtml"> 태그는 AMP 페이지와 일반 HTML 페이지를 연결하는 중요한 역할을 합니다. 오늘은 AMP 페이지를 효율적으로 연결하기 위한 방법과, 이 태그를 동적으로 업데이트 및 삽입하는 방법에 대해 알아보겠습니다.

AMP 페이지와 일반 HTML 페이지의 연결을 위한 동적 <link rel="amphtml"> 태그 관리

SEO 최적화 및 성능 향상을 위한 AMP 페이지 동적 연결 가이드

AMP란 무엇인가?

AMP(Accelerated Mobile Pages)는 구글에서 개발한 오픈소스 프로젝트로, 모바일 웹 페이지의 로딩 속도를 극대화하기 위해 고안된 기술입니다. AMP 페이지는 HTML의 제약을 두어 페이지 로딩 시간을 빠르게 적용해서, 사용자 경험을 개선하며, 검색 엔진에서 더 나은 성과를 낼 수 있도록 설계되었습니다.
AMP 페이지는 주로 뉴스 사이트, 블로그, 쇼핑몰 등 다양한 유형의 웹사이트에서 사용되며, 모바일에서 빠르게 콘텐츠를 로드할 수 있도록 제작합니다.

AMP 페이지는 일반 HTML 페이지와는 다른 방식으로 구조화되어 있으며, 별도의 URL을 갖고 있습니다. 이때 AMP 페이지와 일반 페이지를 연결하는 중요한 역할을 하는 것이 바로 <link rel="amphtml"> 태그입니다. 이 태그는 AMP 페이지의 URL을 지정하여, 검색 엔진이나 브라우저가 AMP 페이지를 식별하고 연결할 수 있도록 도와줍니다. 이를 통해 모바일 사용자가 AMP 버전을 효율적으로 이용할 수 있습니다.

이미지 출처: 구글

AMP 페이지와 <link rel="amphtml"> 태그의 중요성

AMP 페이지는 모바일에서 빠르게 로드될 수 있도록 최적화된 HTML 페이지입니다. 그러나 AMP 페이지를 별도로 관리하는 경우, 일반 웹 페이지와 AMP 페이지를 연결해야 합니다. 이때 사용되는 것이 바로 <link rel="amphtml"> 태그입니다.

이 방법을 사용하지 않게 되면 중복 페이지의 문제가 발생할 수 있기 때문에 원본 페이지와 AMP 페이지를 명확하게 구분해 주어야 합니다.

<link rel="amphtml" href="AMP페이지URL"> 태그는 AMP 페이지의 URL을 지정하여, 검색 엔진이나 브라우저가 AMP 페이지를 식별하고 중복 페이지를 방지할 수 있습니다. 이를 통해 모바일 사용자가 AMP 버전을 효율적으로 이용할 수 있습니다.

헤드에 적용하는 코드

아래 코드를 HEAD 태그에 넣게 되면 실제 AMP 페이지의 경로로 변환됩니다.

<link rel="amphtml" id="amplink">

스크립트 코드 설명

스크립트 코드는 BODY 태그에 넣어 주시면 사용자가 지정한 AMP 경로를 추출해서 사용하게 됩니다.

1. document.querySelector('.tt_article_useless_p_margin.contents_style'): div 태그 내에서 rel="amphtml"을 가진 <link> 태그를 찾아서 ampLinkElement에 할당합니다.
2. existingLink = document.getElementById('amplink'): head에서 id="amplink"을 가진 <link> 태그가 이미 존재하는지 확인합니다.
3. existingLink.setAttribute('href', ampLink): 만약 해당 태그가 이미 존재한다면, 그 href 속성을 새로 가져온 ampLink 값으로 업데이트합니다.
4. head.appendChild(newLinkTag): 만약 해당 태그가 없다면, 새로운 <link> 태그를 생성하여 head의 끝에 추가합니다.

<script>
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);
  }
}
</script>

AMP 페이지에 canonical 설정

AMP 페이지에는 canonical 태그를 사용하여 원본 페이지를 지정해야 합니다. 이 태그는 AMP 페이지가 원본 HTML 페이지의 버전임을 검색 엔진에 알려주는 역할을 합니다. AMP 페이지가 검색 엔진에서 중복된 콘텐츠로 간주되지 않도록 하기 위해, 원본 페이지와의 관계를 명확히 해줍니다.

다음 코드를 AMP 페이지에 추가하고, href 속성에 원본 HTML 페이지의 URL을 지정하면 됩니다.

<link rel="canonical" href="원본 페이지 URL">

AMP 링크가 동적으로 업데이트되는 이유

AMP 적용 블로그를 참조하세요!~

이 방법을 사용하면, 웹 페이지에서 <link rel="amphtml"> 태그를 동적으로 생성하거나 업데이트할 수 있습니다. 이렇게 하면, 웹 페이지의 콘텐츠가 변경될 때마다 AMP 링크가 자동으로 최신 상태로 반영됩니다. 이를 통해 AMP 페이지와 일반 페이지 간의 연관성을 효율적으로 관리할 수 있습니다.

AMP 페이지는 모바일 최적화된 빠른 로딩을 위한 중요한 요소입니다. <link rel="amphtml"> 태그를 사용해 AMP 페이지와 일반 HTML 페이지를 연결하는 과정에서, 자바스크립트를 사용하여 이 태그를 동적으로 삽입하거나 업데이트하는 방법을 통해 관리할 수 있습니다. 이 방식으로 웹사이트가 동적으로 변하는 상황에서도 AMP 링크를 손쉽게 관리할 수 있습니다.

이 코드를 활용하면, 검색 최적화(SEO) 측면에서도 유리하며, AMP 페이지를 활용한 빠른 로딩 속도를 경험할 수 있습니다.