-
[SEO] Canonical tag(캐노니컬 태그, 대표URL)과 중복 콘텐츠 이슈Nextjs 2022. 9. 4. 23:57
예전에 SEO 작업 하면서 웹페이지에 설정하긴 했는데 뒤늦게 기록용으로 canonical tag 에 대해서 남겨본다.
Canonical tag(캐노니컬 태그)란 ?
웹페이지 HTML 코드 상에 삽입되는 태그로, 검색엔진들에게 어떤 URL이 대표 URL인지 알려주는 역할을 한다. head 태그 안에 넣으며, 일반적인 형태는 아래와 같다.
<link rel="canonical" href="https://jisoo-log.tistory.com" />캐노니컬 태그가 필요한 이유
페이지의 내용은 같지만, URL이 다른 경우 검색엔진이 같은 내용의 페이지를 여러번 인덱싱하는 문제가 생길 수 있다. 검색엔진 입장에서는 중복되는 콘텐츠가 많은 웹페이지로 인식할 수 있고, 전반적으로 웹페이지 크롤링이 적게 될 가능성이 있다.
http://www.mysite.com/article/article1.html http://www.mysite.com/article/article1.html?type=1&code=a http://www.mysite.com/article/article1.html?type=2&code=b또한, 중복된 페이지가 없더라도 명시적으로 캐노니컬 태그를 적용하지 않으면 인덱싱이 되지 않을 수 있다. 네이버는 기본적으로 SEO 체크 시 아래와 같이 선호 URL을 넣으라고 가이드한다. (다만 canonical 태그를 넣어도 상황에 따라 검색엔진이 다른 대표 URL을 선택할수도 있다고 한다.)
네이버 웹마스터 도구 사용했을때 결과 한편 대표 URL을 넣겠다고 단 하나의 링크(메인 주소)만 넣게 된다면 나머지 페이지들이 전부 인덱싱에서 누락되는 문제가 발생할수도 있으니 주의해야 한다.
중복 콘텐츠 이슈 해결하기
1. 각 페이지마다 원본 링크를 지정해줘야한다. 파라미터가 따로 붙어있는 경우 원본 URL을 넣어준다.
Nextjs 에서 아래와 같이 작업했다. split 을 사용해서 ? 뒤에 오는 내용을 전부 떼어 버렸다.
import { useRouter } from 'next/router'; import Head from 'next/head'; const DOMAIN = "도메인주소" function App(){ const { asPath } = useRouter(); const canonicalUrl = (DOMAIN + asPath).split('?')[0]; return ( <> <Head> <link rel="canonical" href={canonicalUrl} /> <Head> {/* 여기는 기타 provider 및 layout 등등.. */} </> ); } export default App;2. 공식적이지 않은 URL은 대표 주소로 301 redirect 해줄 것
이 부분은 next.config.js 파일에 redirect 설정을 추가해줬다. 이 경우 308 redirect가 되는데, 공식적으로는 301 redirect 를 해달라고 하지만 사실 308도 상관없다고 한다.
const nextConfig = { async redirects() { return [ { source: '접근을 원치 않는 주소', destination: 'redirect 시킬 곳의 주소', permanent: true, }, ]; }, webpack(config) { // ...(중략)... }, }; module.exports = nextConfig;마무리
최근에 기본적인 SEO 작업을 다시 반복하게 되었다. 그런데 SSR이 안되는 웹페이지였어서, 일단 기본적인 메타태그를 먼저 넣었다. 추후 SSR 작업을 하고 나서 대표 url을 넣겠다고 했더니 대표님이 이유를 물으셨다(아무래도 네이버 웹마스터 도구에 경고가 뜨니까 빠른 해결을 바라셨던 것 같다). 현재 캐노니컬 태그를 넣게 웹페이지 도메인 값 하나만 들어가게 되는지라 그에 대한 설명이 필요했다.
그래서 위 처럼 대답을 했다. 그러고 나니 블로그에도 한번 정리를 해둬야 할 것 같아서 다시 적었다. ㅎㅎ 글을 쓰게 된 계기..
참고)
https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=ko
표준 태그를 사용해 중복 URL 통합 | Google 검색 센터 | 문서 | Google Developers
사이트에 중복 콘텐츠가 있는 경우 Google은 표준 URL을 선택합니다. 표준 URL 및 중복 URL 통합 방법을 자세히 알아보세요.
developers.google.com
https://searchadvisor.naver.com/guide/seo-basic-create
웹 사이트를 만들 때
searchadvisor.naver.com
https://searchadvisor.naver.com/guide/markup-structure
선호 URL 및 로봇 메타 태그
선호 URL (=대표 URL) HTML 문서의 <head> 태그내에 있는 <link> 태그를 활용합니다 동일 콘텐츠를 여러 개의 URL로 표현이 가능할 경우 가장 선호되는 대표 URL을 지정합니다. 예를 들어 아래 세 개의 URL
searchadvisor.naver.com
'Nextjs' 카테고리의 다른 글
[SEO] VideoObject 스키마 마크업을 통해 구글에 동영상 노출하기 (0) 2022.10.02 Next.js 다이나믹 메타 태그 넣기 (0) 2022.07.10 Next.js 정적, 동적 사이트맵 만들기 (0) 2022.06.26 Next.js 와의 첫 만남 (CSR vs SSR) (0) 2021.09.26