SEO Study 1 주차 정리

 
OKKY 에서 테크니컬 SEO 에 대한 스터디를 모집한다는 글을 보고 참여를 신청했었습니다.
업무 중 SEO 에 대한 요구사항이 늘어나는 반면 얕은 이론적인 지식을 활용하여 처리하고 있던 터라
"이게 되려나..?" 같은 마음가짐으로 적용을 해보고 있었던 상황이었어서 보자마자 지원했던 것 같습니다.
 
사실 sitemap.xml , robots.txt , google search console 과 같은 내용이나
통상적으로 SEO를 개선하기 위하여 개선해야하는 지표와 같은 영역은
 
프론트엔드 개발자라면 기본적으로 숙지하는 내용이기도 하지만
또 막상 하나하나 다 잘 이해하고 쓰는 경우는 적은 것 같습니다.
 
이번 글에서는 프론트엔드 개발자도 조금 생소할 수 있는 키워드와 개념들에 대하여 다루어보겠습니다.

---

캐노니컬 태그란?

캐노니컬 태그(Canonical tag)는 SEO 개선을 위하여 중요한 기능 중 하나입니다.
이름만 들었을 때에는 살짝 어려워보이지만 실제로 캐노니컬은 한줄짜리 간단한 코드조각에 불과합니다.

Mac 사용자의 경우 google chrome에서
command + option + i 단축키를 통하여 개발자 도구를 열 수 있습니다.
 
개발자 도구를 연 뒤 head 태그의 내용물을 잘 살펴보면
다음과 같이 rel="canonical"이 지정된 코드를 볼 수 있는데요
 
여기에서 rel은 relationship의 약자로서 해당 링크 태그의 성격과 용도를 알리는 것이라고 볼 수 있습니다.
즉 relationship이 canonical인 link 태그는 캐노니컬에 대한 내용을 담은 태그라는 뜻이라는 것이지요
MDN의 link types 문서를 참고하여 보면 이 canonical에 대한 정의를 다음과 같이 표현합니다.

캐노니컬 링크 요소는 웹 마스터의 SEO 작업 중, 중복 콘텐츠 이슈를 해소하기 위해
웹 페이지의 "공식" 혹은 "선호" URL을 지정할 수 있는 HTML 요소입니다.

 
이제 캐노니컬 태그를 다시 정리하여 한마디로 요약해보면
"중복 콘텐츠 이슈"라는 문제를 해결하기 위한 도구 라고 할 수 있는 것입니다.

---

중복 콘텐츠 이슈??

 
그렇다면 중복 콘텐츠 이슈라는 것은 무엇일까요?
예컨대 이러한 상황을 가정할 수 있습니다.

https://example.com/product?color=blue
https://example.com/product?color=blue&size=m

?color=blue&size=m 과 같이 물음표 뒤에 키 = 밸류 형태로 주소값을 작성하는 것을
query string이라고 표현합니다.
 
이와 같은 쿼리스트링은 통상적으로 주소를 표현할 때에 사용하는 Path Variable 방식과 차이를 가집니다.
Path Variable 방식은 다음과 같은 형태로 작성하는 것을 말합니다.
 
example.com/color/blue 
비개발자분들에게도 조금 더 친숙한 형태의 주소일거라고 생각이 되는데요.
 
두가지 케이스로 나누어서 표현을 하는 이유는 두 방식의 용도가 다르기 때문입니다.
Path Variable 방식은 리소스의 위치를 명확히 지정할 때에 사용하기 때문에
웹 페이지의 계층 구조에 영향을 줍니다
 
반면 쿼리스트링은 이러한 계층 구조에서 자유로우며 사용자의 입력, 선택과 같이 동적으로 변화하는
조건을 조합하여 데이터를 요청하는 데에 적합한 방식입니다.
 
즉 계층 구조에 영향을 안주면서도 사용자의 선택을 기억해야하는 경우에
유용하게 사용되는 것이 쿼리스트링입니다.
 
또한 이렇게 URL 의 형태로 사용자의 선택을 기억하게되면 특정 페이지의 상태를
다른 사람과 공유하고 싶을 때에 큰 장점이 있기 때문에
쿼리스트링은 이런 부분에서 많이들 사용하는 기술입니다.
 
이러한 쿼리 스트링은 사용자의 동적인 선택을 표현하기 때문에 매우 많은 변형이 존재할 수 있을 것입니다.
 
그런데 검색엔진은
Path가 모두 같더라도 마지막 쿼리스트링이 다르다면 다른 URL로 인식한다는 한계를 가지며
또한 경로의 마지막 / 유무 등과 같이 사람의 관점에서 보면 사소한 차이도 다른 URL로 인식되어버립니다.
바로 이것이 중복콘텐츠 이슈입니다.
 

---

URL 정규화 (URL Normalization)

URL 정규화는 둘 이상의 URL이 있는 사이트를 처리하여
그 중 하나만 표준 형식의 URL로 인식하는 것을 말합니다.
 
위키피디아의 예시를 보면 이해가 쉬운데요 아래 URL 들은 모두 같은 웹사이트를 가리키게 됩니다.
https://wikipedia.com
https://www.wikipedia.com
https://www.wikipedia.com/
https://www.wikipedia.com/?source=asdf

위 그림을 참고하여 보면 url의 구조를 이해하는데에 도움이 될 것입니다.
 
자세히 살펴보면 위 네가지 링크는 모두 protocol은 동일하지만
제각기 다른 domain을 가지고 있거나
슬래시유무 , 쿼리스트링 유무 등의 차이를 가진 걸 볼 수 있습니다
 
그리고 그럼에도 불구하고 모두  https://www.wikipedia.org/ 해당 링크로 이동하는 것을 확인할 수 있습니다
 
위의 위키피디아 예시에서 알 수 있었듯이
여러가지 어른의 사정으로 인하여 도메인주소는 다르지만 같은 내용을 담은 사이트인 경우가 생기곤 하는데요
이러한 경우에도 결국 모두 동일한 콘텐츠를 보여주는 것임에도 불구하고 URL은 여러가지가 되기 때문에
중복 콘텐츠 이슈가 발생하게 됩니다. 
 
또 위에서 다루었듯이 도메인의 차이 뿐만 아니라
쿼리스트링의 차이 , 프로토콜의 차이 , 마지막 슬래시 / 유무의 차이 등
검색엔진이 다른 사이트로 인식할 수 있는 여지를 만드는 방법은 매우 다양합니다.
 
이러한 문제를 해결하고 인식할 수 있는 하나의 URL로 정리해주는 것을 URL 정규화라 할 수 있고
이 URL 정규화를 위해 캐노니컬 태그 등과 같은 기술을 적용할 수 있는 것입니다. 

---

301 Redirection vs canonical tag vs CName Record

 
URL 정규화를 시도할 때에 캐노니컬 태그만으로도 충분한 경우가 있지만
다른 기술적인 방법이 필요한 경우도 있습니다.
 
예를 들어 도메인 이전등의 이유로 인하여 더이상 해당 페이지를 사용하지 않고
현재 운영되는 페이지로 이동시켜야하는 경우 등을 생각할 수 있을 것입니다.
 

캐노니컬 태그

https://xionwcfm.tistory.com/m/449

React Animate Presence 개념부터 구현까지

 
제 블로그에는 다음과 같이 path variable에 m이 포함되어 있는 url이 존재합니다.
해당 링크로 접속하는 경우에는 모바일 사용자를 위한 레이아웃으로 구성된 페이지를 보게되는 식입니다.
위 페이지의 캐노니컬 태그를 확인해보면 다음과 같습니다.
 

PC 화면을 보여주는 URL을 캐노니컬로 사용하는 것을 통하여
실제로는 모바일 유저를 위해 사용되는 페이지가 맞지만 중복콘텐츠로 잡힐 염려가 있기 때문에
캐노니컬 태그를 통하여 중복콘텐츠로 잡히지 않게 처리를 하는 모습입니다.
이렇듯 캐노니컬 태그를 통하여 URL 정규화를 수행할 수 있습니다.
 

301 리디렉션

그런데 다른 URL을 특정한 URL로 처리한다는 관점에서 보면
캐노니컬 태그는 301 리디렉션과도 비슷해보이는 지점이 있습니다.
그래서인지 실제로도 301 리디렉션과 캐노니컬 태그를 비교하는 글도 많이 찾아 볼 수 있습니다.
 
리디렉션이란 사용자가 A 페이지에 접근을 시도했을 때
의도적으로 B 페이지로 이동시키는 방법을 말하는데요
 
즉 example.com에 접근을 시도한 사용자를 의도적으로
newexample.com으로 이동시키는 식으로 사용할 수 있는 것입니다.
 
즉 이러한 리디렉션의 경우에는 어른의 사정으로 인하여 도메인을 옮기게 되었을 경우 유용하게 사용됩니다.
http 상태코드 301은 Moved Permanently를 뜻하며
해당 URL이 더이상 사용되지 않고 Location 헤더에 주어진 URL로 완전히 변경되었다는 것을 의미합니다.
 

CName Record

또한 사용자가 쉽게 실수하거나 통상적으로 URL 매핑이 필요한 케이스도 존재합니다.
예컨대 위에서 보았듯이 www.example.com과 example.com과 같이 www의 유무와 같은 차이는 
통상적으로 매우 많이 사용되는 케이스이기도 합니다.
 
이런 경우에 대한 처리를 위하여 DNS에서는 CNAME Record를 제공합니다.
캐노니컬 네임 레코드(Canonical Name Record)라고 부르는 기능인데요
정식 도메인을 가리키는 여러가지 서브도메인을 정의할 수 있는 기능입니다.
 
이 CNAME을 사용할때에 가장 큰 차이는 CNAME은 리디렉션이 아니라는 것인데요
CNAME은 서브도메인의 네임을 매핑할 뿐이지만 301 리디렉션은 해당 사이트를 호스팅하고 있는
웹사이트 서버에 요청을 보낸다는 차이가 있습니다.
 
즉 정리하자면 다음과 같습니다.

캐노니컬 태그	실제로 전부 사용 중이지만 콘텐츠는 같은 경우에 중복 콘텐츠 방지를 위해 사용한다.
301 리디렉션	예전 도메인이 더이상 사용되지 않으니 지금 도메인으로 연결시킬 때 사용한다
CNAME Record	www. 유무와 같이 여러가지 서브도메인들을 하나로 정리해서 연결시킬 때 사용한다.

 

---

DA , PA

이부분은 조금 생소하게 느껴지기도 하는 약어인데요
DA란 Domain Authority를 의미하며 PA는 Page Authority를 의미합니다.
 
PA란 특정 페이지가 검색 엔진 결과(SERP)에서
얼마나 높은 순위를 차지할지 예측하는 점수로 Moz에서 개발한 점수체계입니다.
쉽게 생각하면 그 페이지가 얼마나 좋은 가치를 지녔는가를 점수화한거라고 보면 되겠는데요
당연히 점수가 좋을 수록 검색엔진에 상위 노출될 확률도 높아집니다.
 
DA 역시도 Moz에서 개발한 점수 체계로 여기에서는 산업, 특정 주제에 대한 점수를 표현한다고 합니다.
https://ahrefs.com/website-authority-checker

Website Authority Checker: Check the "Authority" Of Any Domain

https://moz.com/domain-analysis
위와 같은 사이트에서 간단하게 체크해볼 수 있습니다.

이런 형태로 점수가 측정되네요 
 
다만 점수의 경우 티스토리를 사용하시는 분의 경우에는
그냥 티스토리 도메인 자체가 퉁쳐져서 검색되는거같습니다.
 
개인 도메인으로 운영하시는 분들은 유의미한 점수를 볼 수 있을 것같네요 

---

마치며

미들 키워드 , 롱테일 키워드, SEM , 링크쥬스, 히트맵 등 아직 다루지 못한 내용이 많습니다.
사실 캐노니컬 태그를 다루면서 CName , DNS , 301 Redirection 등 
어렴풋이만 알고있었거나 대충 땜질했던 개념들을 정리하는 과정에서 많은 힘을 써버리고 말았네요
다른 중요한 내용들도 많으니 시간 될 때 정리해나가야겠습니다.

---

레퍼런스

https://yozm.wishket.com/magazine/detail/1420/

SEO 초보자를 위한 ‘캐노니컬 태그’ 설명하기 | 요즘IT

 
https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/rel

Link types - HTML: Hypertext Markup Language | MDN

https://www.beusable.net/blog/?p=4507

데이터 분석을 위한 기초, URL 이해하기 | 뷰저블

https://ko.wikipedia.org/wiki/CNAME_%EB%A0%88%EC%BD%94%EB%93%9C

CNAME 레코드 - 위키백과, 우리 모두의 백과사전

https://en.wikipedia.org/wiki/Domain_authority

Domain authority - Wikipedia

https://moz.com/learn/seo/page-authority