오늘의 포스트는 내가 직접 발견한 문제점을 해결하는 내용의 포스트가 아니라 어떤 선구자 분께서 먼저 발견하시고 해결한 문제점을 소개하는 포스트다.
(하지만 코드는 내가 응용해서 변경했다.)
이 영상은 유튜브에서 구글 블로그에 대해서 검색하다가 보게 된 영상이다.
이 영상의 내용을 알기 쉽게 설명하자면 다음과 같다.
구글 블로그의 모바일 URL에는 ?m=1이 붙는 문제가 있다
구글 블로그는 모바일 기기에서 사이트에 접속하면 URL의 끝 부분에 ?m=1이 붙는다.
그런데 모바일 기기에서 ?m=1이 붙지 않는 URL로 접속을 해도 블로그는 문제 없이 잘 보인다.
한마디로 쓸데없이 같은 글에 두 개의 URL이 생겨나는 것인데, 이 문제는 예전에 티스토리 블로그를 운영하던 때에도 겪은 적이 있다.
바로 같은 포스트에 문자 URL과 숫자 URL, 두 개의 URL이 생겨나고 있었는데, 구글 검색 엔진 입장에서는 이게 서로 다른 페이지로 인식될 수 있다.
이렇게 되면 하나의 글이 두 개의 URL로 존재하게 되어 중복 콘텐츠 문제가 발생할 수 있고,
어느 한 쪽에만 구글 애드센스 광고가 표시되고, 다른 URL에는 애드센스 광고가 표시되지 않는 문제가 생기기도 한다.
그래서 위의 영상에서는 URL을 하나로 통일하기 위해서 모바일 기기에서도 URL의 끝 부분에 붙는 ?m=1 URL 매개변수를 삭제하는 방법을 알려주고 있다.
구글 블로그의 모바일 URL에 ?m=1이 표시되는 이유
요즘은 반응형 웹이 거의 필수가 되었다.
그런데 예전에는 반응형 디자인을 사용하지 않고 데스크톱과 모바일 사용자에게 서로 다른 버전의 웹사이트를 표시했었다.
그래서 구글 블로그도 모바일로 접속하는 사용자에게는 ?m=1이 붙는 URL로 접속하도록 했었고,
이제는 대부분의 블로그가 반응형 디자인을 사용하고 있지만 그 예전의 흔적이 아직도 남아있는 것이다.
?m=1을 제거해 보자.
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}일단 이 코드가 영상에서 사용한 코드다.
이 코드를 영상처럼 <head> 태그 안에서 자바스크립트 코드가 들어가는 부분에 추가해야 한다.
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
} else if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
} else if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
} else if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
}
if (clean_uri !== uri) {
window.history.replaceState({}, document.title, clean_uri);
}그리고 이 코드는 영상 속에서 나오는 코드에서 중복되는 부분을 내가 리팩토링 한 코드다.
위에서 보여준 오리지널 코드가 잘 작동한다면 이 코드도 잘 작동할 것이다.
Amalia 템플릿을 사용 중인 나의 경우에는 이 위치에 코드를 추가했다.
구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한 후, [ctrl + F] 키를 누르고 코드 내에서 <script type='text/javascript'>를 검색한다.
그러면 자바스크립트 코드를 넣을 수 있는 곳들이 나오는데, 그중에서 <head>와 </head> 태그 사이에 있는 곳에 코드를 넣어야 한다.
문제 없이 코드를 저장하면, 블로그를 모바일 기기에서 접속했을 때 ?m=1 URL 매개변수가 삭제된다.
(내용 추가)
if (typeof(history.replaceState) == 'function') {
var cleanUrl = document.querySelector("link[rel='canonical']").getAttribute('href');
history.replaceState(null, null, cleanUrl);
}마지막으로 코드를 또 수정해 보았다.
이건 앞에서 보여준 두 코드와는 완전 다른 방식으로 작동하는 코드인데, 어차피 ?m=1을 삭제하는 역할을 한다는 것은 동일하다.
이 코드는 템플릿에 따라서 작동하지 않을 가능성도 있지만, Amalia 템플릿을 사용하는 나에게는 이 코드가 가장 짧으면서 효율적인 코드다.
이 방법으로는 페이지네이션 에러가 발생한다
또 내용을 추가한다.
현재 이 코드는 URL에서 ?m=1이나 &m=1 같은 문자를 제거해 주지만, 다른 큰 문제를 가지고 온다.
내가 수정한 코드는 물론 유튜버가 알려준 코드도 말이다.
구글 블로그 다음 페이지로 넘어가도 페이지네이션 버튼은 1에 고정되는 문제 해결 방법
어떤 문제가 생기는지 자세한 설명과 그 문제까지 보완한 최종 코드는 이 포스트에서 확인하자.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩