/20241216 amp 관련 플러그인을 제거했다. 별로 도움도 안 되는 것 같고, 따로 신경 쓸 부분이 생기는게 개인적으로 너무 거슬린다.
AMP란?
내가 이해한 개념을 설명하자면 구글에서 만든 빠르고 가벼운 모바일 전용 웹페이지다.
그러니까 기존의 웹페이지는 그대로 두고 새로 AMP페이지를 만드는 것이다.
예를 들면
좋은 자료들(?)이 많은 추천 토렌트 사이트 모음는 이런 화면이고
좋은 자료들(?)이 많은 추천 토렌트 사이트 모음 (amp)(뒤에 “/AMP”를 붙이면 나오는 페이지)는 이렇게 나온다.
AMP의 장점은
구글에서 만든 방식이니 만큼 구글 모바일 검색결과에서 더 상위에 내 글이 올라올 가능성이 높아진다.
또한 모바일 페이지를 따로 지원하지 않는 블로그라면 도움이 될 수도 있을 것이다. (나는 블로그가 반응형이라서 모바일 페이지가 따로 필요하진 않았고 구글 검색결과에서 상위에 뜨는 것이 조금이라도 도움이 되라고 적용했다.)
AMP의 단점은
글에 따로 스타일시트(css)를 먹인 것이 amp에서는 제대로 표현되지 않는다.
css에서도 보이게 하려면 일을 두 번 해줘야 하는 것이고
수정을 하면 amp페이지의 용량이 커져서 원래의 취지가 많이 약해진다.
워드프레스 AMP 플러그인
나는 플러그인을 설치했는데 처음에는AMP for WP – Accelerated Mobile Pages를 설치했다가 너무 복잡하고 조잡해서 바로 지워버렸다. (그리고 메뉴에 애드센스 삽입 기능이 있었는데 적용했더니 가운데 정렬이 되지 않더라.)
기능은 별로 없어도 깔끔한 AMP를 설치했고 거기에 애드센스와 애널리틱스 코드를 삽입하는 방법을 설명하려고 한다.
애드센스 코드 삽입하기
애드센스는 애드센스 홈페이지에서 “광고/광고단위/신규 광고 단위 만들기/디스플레이”를 클릭해서 광고 단위 이름을 지정해주고 “만들기”를 클릭한다.
그러면 코드 화면이 나오는데 우측에 AMP를 클릭한다. (참고로 “자동 광고”도 가능한데 나는 별로 좋아하지 않는다. 그냥 디스플레이 광고를 본문 위와 아래에 붙이는게 깔끔해서 좋다.)
<head></head> 태그 사이에 붙여넣는 코드와 <body></body> 태그 사이에 붙여넣는 두개의 코드가 있는데
head에 붙여넣는 코드는 워드프레스 관리자 화면에서 “플러그인/플러그인 편집기”에 들어가서 우측 상단에서 편집할 플러그인 “AMP”에 들어가서
우측에 “templates/html-start.php”를 선택하면 나오는 코드에서 상단에 <head>가 보일 것이다. 바로 밑줄에 해당 코드를 넣어주면 된다.
그리고 <body>에 집어넣는 코드. 이 코드가 광고 코드이다. (이걸 상단에 붙여넣으면 광고가 상단에 표시된다는 것이다.)
나는 본문 상단과 하단에 두개의 광고를 넣었는데 나처럼 넣으려면 “templates/single.php”에서 아래의 코드 위에 삽입하면 상단에 광고가 표시되고 아래에 삽입하면 하단에 광고가 표시된다.
<?php $this->load_parts( [ 'featured-image' ] ); ?>
<div class="amp-wp-article-content">
<?php echo $this->get( 'post_amp_content' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</div>
애널리틱스 코드 삽입하기
애널리틱스는 통계를 확인하기 위한 서비스이다.
AMP를 설치하고 AMP페이지를 얼마나 접속하는지 알기 위해서 설치했다.
애널리틱스 AMP 코드는 애널리틱스 홈페이지에서는 못찾았고 인터넷에서 검색을 해야 나오더라. Add Analytics to AMP pages
“워드프레스 관리자 화면/플러그인/플러그인 편집기/(우측 상단에서 편집할 플러그인)AMP”에 들어가서
“templates/html-start.php”에 들어가서 <head> 바로 밑줄에 아래 코드를 삽입해주면 된다.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
그리고 그 화면에서 가장 밑줄로 내려가서 아래의 코드를 삽입해준다.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
“<GA_MEASUREMENT_ID>”에는 “나의 Google Analytics 속성 ID”를 입력해야 한다.
애널리틱스 홈페이지에 들어가서 “(좌측 하단에)관리/추적 정보/추적 코드”에서 “UA-00000000-1″이런 식의 코드가 “나의 Google Analytics 속성 ID”다. 이것으로 바꿔주면 된다.
상단에 썸네일, 대표 이미지 숨기기
AMP를 적용해놓고 보니까 상단에 썸네일로 지정한 이미지가 뜨는게 마음에 들지 않았다.
그래서 css로 숨겼다.
방법은 “워드프레스 관리자 화면/플러그인/플러그인 편집기/(우측 상단에서 편집할 플러그인)AMP”에 들어가서
“templates/style.php”에서 중간쯤에 아래의 코드를 삽입해줬다.
.amp-wp-article-featured-image {
display: none;
}
주의
플러그인을 업데이트 하면 기존에 수정했던 코드들이 다 사라지고 초기화되더라.
업데이트를 하지 않거나 다시 수정해줘야 할 것 같다.
매번 업데이트 할때마다 수정하는게 너무 귀찮아서 나는 amp에 애드센스와 애널리틱스 삽입 코드라는 페이지를 따로 만들었다.
관련 링크
안녕하세요 좋은 정보글 잘봤습니다 AMP 페이지에 애드센스가 붙지않아 코드를 입력했는데 2시간 정도지난 지금 들어가봐도 AMP페이지에 애드센스가 보이지않는데 혹시 잘못 설정한걸까요?
제가 어떤 상황인지 정확히 알 수는 없지만 https://gryeo.com/archives/49863 를 참고해보시면 좋을 것 같아요. amp 업데이트 할때마다 광고가 사라져서 링크의 내용을 그대로 복사해서 붙여넣어서 사용하고 있거든요. (물론 사용자 코드 부분은 수정을 하셔야겠죠.)