웹사이트의 성능을 최적화하고, 특히 모바일 사용자를 위해 일반 페이지보다 성능이 빠른 AMP 페이지를 제공하는 방법은 모바일 최적화의 핵심입니다. AMP 페이지를 적용하는 과정에서 link rel="amphtml" 태그는 원본 페이지와 AMP 페이지를 연결하는 중추적인 역할을 합니다. 오늘은 이 태그를 효율적으로 관리하고 동적으로 업데이트하는 방법을 상세히 다루겠습니다.
AMP와 일반 페이지 간의 구조적 연결 원리
검색 엔진은 원본 HTML과 AMP 페이지 사이의 관계를 파악하여 모바일 사용자에게 가장 적합한 버전을 서빙합니다. 이를 위해 구글 검색 엔진 최적화(SEO)를 위한 동적 연결 구조를 이해해야 합니다.
| 구분 | 설정 태그 | 주요 역할 | 배치 위치 |
|---|---|---|---|
| 원본 페이지 | rel=”amphtml” | AMP 버전의 존재를 검색 엔진에 알림 | 일반 HTML의 head |
| AMP 페이지 | rel=”canonical” | 중복 콘텐츠 방지 및 원본 페이지 지정 | AMP HTML의 head |
1. AMP(Accelerated Mobile Pages)의 개념과 가치
AMP(Accelerated Mobile Pages)는 모바일 웹 페이지의 로딩 속도를 극대화하기 위해 구글에서 고안한 기술입니다. 사용자 경험을 개선하고 이탈률을 낮추는 데 매우 효과적입니다.
1.1. amphtml 태그의 중요성
이 태그가 없으면 검색 엔진은 모바일용 AMP 페이지가 별도로 존재한다는 사실을 인지하지 못합니다. 티스토리 블로그 모바일 가독성 향상을 위해서라도 반드시 원본과 AMP 버전을 명확히 연결해 주어야 합니다.
2. 자바스크립트를 활용한 동적 AMP 링크 삽입 기법
콘텐츠마다 URL이 다른 동적 환경에서는 수동으로 링크를 넣기 어렵습니다. 자바스크립트를 활용한 rel=”amphtml” 태그 동적 삽입 코드를 사용하면 자동으로 최신 상태를 유지할 수 있습니다.
먼저, HTML의 head 영역에 아래 식별용 태그를 배치합니다.
link rel="amphtml" id="amplink"
그다음, body 하단에 아래 스크립트를 삽입하여 페이지 내에 명시된 AMP 경로를 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
3. 중복 콘텐츠 방지를 위한 Canonical 설정
AMP 페이지 중복 콘텐츠 방지를 위해 AMP 버전의 head에는 반드시 원본 페이지를 가리키는 canonical 태그가 포함되어야 합니다.
link rel="canonical" href="원본 페이지 URL"
이 설정이 누락되면 검색 엔진은 두 페이지를 별개의 중복 문서로 판단하여 검색 순위에 악영향을 줄 수 있습니다.
head 앞부분에 배치하는 것이 좋습니다.
Q2. 모든 블로그 포스팅에 AMP를 적용해야 하나요?
A2. 텍스트 위주의 뉴스나 정보성 글에는 강력 추천합니다. 다만 복잡한 상호작용이 필요한 페이지는 AMP 제약 사항으로 인해 기능이 제한될 수 있으므로 선택적으로 적용하세요.
Q3. AMP를 적용하면 광고 수익이 줄어드나요?
A3. 과거에는 그런 우려가 있었으나, 현재는 AMP 전용 광고 최적화 전략을 통해 일반 페이지 못지않은 수익률을 기록할 수 있습니다.